[Bug]: On Initial zoom Features are not getting rendered

[sarath40158]

Mapbox Implementation

Mapbox GL

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

#main

Standalone component to reproduce

import React from 'react'
import { MapView, Camera, ShapeSource, CircleLayer, LineLayer } from '@rnmapbox/maps'

const aLine = {
  type: 'LineString',
  coordinates: [
    [80.41956421171835, 16.29841309698017],
    [80.41956421171835, 16.29835131091197],
    [80.4195695761428, 16.29812476181567],
    [80.41966613564813, 16.29497879163125],
    [80.41966613564813, 16.294999387356782]
  ]
}

export class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{ flex: 1 }}>
        <Camera centerCoordinate={[80.41956421171835, 16.29841309698017]} zoomLevel={16} />
        <ShapeSource id={'idStreetLayer'} shape={aLine}>
          <LineLayer
            id={'idStreetLayer'}
            sourceID={'ShapeSource'}
            style={{ linePattern: 'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png' }}></LineLayer>
          {/* <CircleLayer id={'idStreetCircleLayer'} /> */}
        </ShapeSource>
      </MapView>
    )
  }
}

Observed behavior and steps to reproduce

• On Initial Zoom Level at which mapbox loads the map. Features of shape source with line-layer that has linePattern not getting rendered
  Once if we ZoomIn and ZoomOut again they are getting rendered and able to see on map

Too re-produce this issue try to load any linePattern to Initial Camera Centre coordinate's

Expected behavior

• Shape-source with LineLayer of linePattern images should be rendered upon map is loaded

Note : I see issue is in both Implementation mapbox and mapbox-gl

Notes / preliminary analysis

• rendering issue on initial load
• I see issue is in both Implementation mapbox and mapbox-gl

Additional links and references

RPReplay_Final1668421376.mov

[sarath40158]

@mfazekas @naftalibeder @justsml @davicedraz @arcticfly @YeshanJay @AlexanderLourenco
@comrade-tomsk @luhart @KiwiKilian @ryo-rm
Any one from the team ? Please look through this small issue ?

[arcticfly]

I've seen a similar bug intermittently on Android. @sarath40158 does this bug consistently affect iOS, and does it never affect Android?

[sarath40158]

@arcticfly
Yes It is consistently affecting on iOS, When ever app re-open's. we cannot see any linePattern.
After zoomIn and zoomOut we were able to see them

[sarath40158]

@mfazekas @naftalibeder @justsml @davicedraz @YeshanJay @AlexanderLourenco
@comrade-tomsk @luhart @KiwiKilian @ryo-rm
can anyone check this we need to ship our app ?

[KiwiKilian]

@sarath40158 please stop spamming everybody. You can try to investigate yourself and fix it. Otherwise be patient until somebody else picks up on the issue. As I see you already figured, this might be a upstream problem mapbox/mapbox-maps-ios#1436. I can only reproduce with linePattern. lineColor works fine.

[naftalibeder]

Hi, please don’t spam everyone.

Can you share a true standalone component, rather than part of one?

If you’re in a hurry, you can also investigate yourself. I would suggest first finding the most minimal version of this you can - does the bug still happen with a solid line? Is it the same with a different feature like a CircleLayer?

The more specific the report, the more likely somebody will look into this.

[sarath40158]

@naftalibeder

CircleLayer doesn't have pattern prop's to load. FillLayer has pattern prop. I can see same behaviour with FillLayer also. Here is true standalone component.

import React from 'react'
import { MapView, Camera, ShapeSource, CircleLayer, LineLayer } from '@rnmapbox/maps'

const aLine = {
  type: 'LineString',
  coordinates: [
    [80.41956421171835, 16.29841309698017],
    [80.41956421171835, 16.29835131091197],
    [80.4195695761428, 16.29812476181567],
    [80.41966613564813, 16.29497879163125],
    [80.41966613564813, 16.294999387356782]
  ]
}

export class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{ flex: 1 }}>
        <Camera centerCoordinate={[80.41956421171835, 16.29841309698017]} zoomLevel={16} />
        <ShapeSource id={'idStreetLayer'} shape={aLine}>
          <LineLayer
            id={'idStreetLayer'}
            sourceID={'ShapeSource'}
            style={{ linePattern: 'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png' }}></LineLayer>
        </ShapeSource>
      </MapView>
    )
  }
}

[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

[mfazekas]

I could reproduce the issue with this code:

import React from 'react';
import {
  MapView,
  Camera,
  ShapeSource,
  CircleLayer,
  LineLayer,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [80.41956421171835, 16.29841309698017],
    [80.41956421171835, 16.29835131091197],
    [80.4195695761428, 16.29812476181567],
    [80.41966613564813, 16.29497879163125],
    [80.41966613564813, 16.294999387356782],
  ],
};

export class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{ flex: 1 }}>
        <Camera
          defaultSettings={{
            centerCoordinate: [80.41956421171835, 16.29841309698017],
            zoomLevel: 16,
          }}
        />
        <ShapeSource id={'idStreetLayer'} shape={aLine}>
          <LineLayer
            id={'idStreetLayer'}
            sourceID={'ShapeSource'}
            style={{
              linePattern:
                'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
              lineWidth: 32,
            }}
          />
        </ShapeSource>
      </MapView>
    );
  }
}
export default BugReportExample;

[mfazekas]

Sounds like an upstream issue for me, as a workaround you can use the images component, to download the images yourself and only add the layer when images are downloaded.

[mfazekas]

Reported to upstream as 1751

[mfazekas]

I'm closing the issue for now.
We've deprecated

          <LineLayer
            id={'idStreetLayer'}
            sourceID={'ShapeSource'}
            style={{
              linePattern:
                'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
                

The recommended way is:

  <Images
    images={{'colorado-flag':  {'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png'}}}
  />
  
   <LineLayer
            id={'idStreetLayer'}
            sourceID={'ShapeSource'}
            style={{
              linePattern: 'colorado-flag',
              ...
              

This should work for import-s as we know the image size, for url-s we still need to either add the ability to wait for all the url-s to load before, and only add layers once images are there.

I'm closing this issue, if you still face the issue pls open a discussion to plan how to fix with 10.1.