ShapeSource and SymbolLayer: Trying to make icon depend of zoom

[qlerebours]

trafficstars

Hello,

What i'm trying to do is to get a different icon for a SymbolLayer depending on the Zoom value. I tried to use the Mapbox.StyleSheet.camera but it doesn't work, i get the following error:

07-26 17:50:28.931 17259 17259 E AndroidRuntime: com.facebook.react.bridge.NoSuchKeyException: value
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.facebook.react.bridge.ReadableNativeMap.getNullableValue(ReadableNativeMap.java:128)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.facebook.react.bridge.ReadableNativeMap.getString(ReadableNativeMap.java:168)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.RCTMGLStyleValue.getString(RCTMGLStyleValue.java:52)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.RCTMGLStyle.addImage(RCTMGLStyle.java:68)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory.setSymbolLayerStyle(RCTMGLStyleFactory.java:217)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.layers.RCTMGLSymbolLayer.addStyles(RCTMGLSymbolLayer.java:59)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.layers.RCTLayer.addToMap(RCTLayer.java:257)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.layers.RCTMGLSymbolLayer.addToMap(RCTMGLSymbolLayer.java:39)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.sources.RCTSource.addLayerToMap(RCTSource.java:177)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.sources.RCTSource.addToMap(RCTSource.java:127)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.sources.RCTMGLShapeSource.access$001(RCTMGLShapeSource.java:38)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.components.styles.sources.RCTMGLShapeSource$1.onAllImagesLoaded(RCTMGLShapeSource.java:81)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.utils.DownloadMapImageTask.onPostExecute(DownloadMapImageTask.java:77)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.mapbox.rctmgl.utils.DownloadMapImageTask.onPostExecute(DownloadMapImageTask.java:22)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.os.AsyncTask.finish(AsyncTask.java:651)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.os.AsyncTask.access$500(AsyncTask.java:180)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.os.AsyncTask$InternalHandler.handleMessage(AsyncTask.java:668)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.os.Handler.dispatchMessage(Handler.java:102)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.os.Looper.loop(Looper.java:148)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at android.app.ActivityThread.main(ActivityThread.java:5458)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at java.lang.reflect.Method.invoke(Native Method)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:738)
07-26 17:50:28.931 17259 17259 E AndroidRuntime:        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:628)

Here is my code for the map:

<Mapbox.ShapeSource
        id="monuments"
        cluster
        clusterRadius={50}
        clusterMaxZoom={14}
        images={monumentsImages}
        shape={monumentsGeoJson}
        onPress={this.onLayerPress}
      >
        <Mapbox.SymbolLayer
          id="pointCountMonuments"
          style={mapboxStyles.clusterCount}
        />

        <Mapbox.CircleLayer
          id="clusteredPoints"
          belowLayerID="pointCountMonuments"
          filter={['has', 'point_count']}
          style={mapboxStyles.clusteredPoints}
        />

        <Mapbox.SymbolLayer
          id="singlePointMonuments"
          filter={['!has', 'point_count']}
          style={mapboxStyles.singlePointMonument}
        />
</Mapbox.ShapeSource>

Here is the style of the SymbolLayer. This is a very simple example where whatever the zoom is, the same icon is showing. This code generates the above error.

singlePointMonument: {
    iconAllowOverlap: true,
    iconSize: 0.5,
    iconImage: Mapbox.StyleSheet.camera({
      0: '{icon}',
      10: '{icon}',
      20: '{icon}',
    }, Mapbox.InterpolationMode.Exponential),
  },

This code works well:

singlePointMonument: {
    iconAllowOverlap: true,
    iconSize: 0.5,
    iconImage: '{icon}',
  },

Here is an example of my monumentsImages object:

{
    "abcd": {uri: "https://...."},
    "efgh": {uri: "https://...."},
}

And I confirm that my monumentsGeoJson has an icon property:

[
    {
        "type":"Feature",
        "properties":{"uuid":"efgh","icon":"efgh"},
        "geometry":{"type":"Point","coordinates":[2.304897,48.870502]}
    }, ...
]

I thought it could be due to interpolating that can't calculate an interpolation between 2 strings, but i didn't found how to prevent using interpolation.

[noway]

It's been fixed in master branch of new repo: https://github.com/react-native-mapbox-gl/maps/issues/140