Features not showing up until zooming in

[maxmiranda]

Environment

• Xcode version: 13.4.1
• iOS version: 15.5
• Devices affected: All
• Maps SDK Version: 10.4.1

Observed behavior and steps to reproduce

In my app, I blanket the map with square features (aka blocks). Intermittently, these square features are not showing up on the map until I zoom in or zoom out. Then they render perfectly normally.

https://user-images.githubusercontent.com/24932260/178053303-278b3f10-447c-4ed8-aa52-ff8c84d050a0.mov

Expected behavior

When I load the app, all the features should be present.

Notes / preliminary analysis

I will admit, my app uses features in a somewhat complex way: we're storing information on who owns which blocks in our database. And the blocks only become visible once we fetch the info on block ownership and then set the feature state of the corresponding features to reflect the block ownership (we have layers that style the blocks based on the feature state).

HOWEVER, it is my theory that none of that is relevant. Because, when I zoom in or zoom out, there are NO database calls whatsoever. None of my code relating to: fetching block ownership info, setting up the map layers or source, or setting the feature state based on the block ownership gets called upon zoom in or zoom out. I don't think it's a race condition on my end either because i'm experiencing this issue intermittently but the order of us: adding the map overlay, fetching the database info, then setting the feature states doesn't change.

Additional links and references

I did find this issue which seems like it pertains to my issue, but it's for Mapbox GL Native, so i have no idea if it's relevatn: https://github.com/mapbox/mapbox-gl-native/issues/1675.

Would very much appreciate someone looking into this!!

[ZiZasaurus]

@maxmiranda, we would be happy to look into this for you. Do you happen to have a minimal sample app you can provide that reproduces this behavior?

[maxmiranda]

@ZiZasaurus thanks so much! I do not at the moment, I can try to create one but unsure how long that will take because it would have to involve re-creating a lot of the complex logic described above.

Happy to simply give you access to our repo if you want to play around with it.

[maxmiranda]

@ZiZasaurus I'm now finding the issue has gotten worse and is occurring every single time a user opens the app. I would greatly appreciate your assistance on this. I've given you access to our repo, and I'd be happy to schedule some time on your calendar to explain in more detail what's going on.

[zhengping97]

@maxmiranda @ZiZasaurus Hi! Just wanna check if there is any update on this. I am not using IOS but I faced this issue on my web application as well (three.js 3D model not appearing until zooming in).

[sarath40158]

@mfazekas @macdrevx @maxmiranda Any Update on this issue ?

[maxmiranda]

Might not be most satisfactory answer but for me it literally just stopped ahppening out of the blue after a certain point. Maybe it takes time for Mapbox to get used to rendering all your features, i have no idea?

[sarath40158]

@maxmiranda

• You can simple test this trying to load linePattern with LineLayer see code below Issue : On initial load at current zoom, Doesn't render any linePattern of LineLayer Once if we zoom In or Zoom Out it loads the linePattern image

https://user-images.githubusercontent.com/94572332/201636794-1b20da6b-b7f9-474e-8395-ea267618b862.mov

 <MapboxGL.ShapeSource
      key={'ShapeSource'}
      id={'ShapeSource'}
      shape={{
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: [
                [80.41956421171835, 16.29841309698017],
                [80.41956421171835, 16.29835131091197],
                [80.4195695761428, 16.29812476181567],
                [80.41966613564813, 16.29497879163125],
                [80.41966613564813, 16.294999387356782]
              ]
            }
          }
        ]
      }}>
      <MapboxGL.LineLayer
        key={'LineLayer'}
        id={'LineLayer'}
        sourceID={'ShapeSource'}
        style={{lineWidth: 8, linePattern: 
          'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png'}}
        ></MapboxGL.LineLayer>
    </MapboxGL.ShapeSource>

[sarath40158]

Any one facing same issue I has temporary fix

File : RCTMGLStyle.m replace : ==> linePattern Prop

From :

[RCTMGLUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
          if (image != nil) {
            dispatch_async(dispatch_get_main_queue(), ^{
              if (isValid()) {
                [self->_style setImage:image forName:imageURI];
                [self setLinePattern:layer withReactStyleValue:styleValue];
              }
            });
          }
        }];

To :

  NSString *imageURI = [styleValue getImageURI];
            NSURL *url = [NSURL URLWithString:imageURI];
            NSData *data = [NSData dataWithContentsOfURL:url];
            UIImage* img = [[UIImage alloc]initWithData:data];
            
            if (img != nil) {
                [self->_style setImage:img forName:imageURI];
                [self setLinePattern:layer withReactStyleValue:styleValue];
            }

If any one facing pattern issue with images running on main thread and RCTMGLUtils fetchImage had some issue in rendering the image on load