MapboxGl SymbolLayer iconImage showing random image in production

16 Views Asked by At

I'm building a mobile application with React Native and expo, using mapbox for the map rendering.

I'm working with a MapView that display different images in custom markers based on the sport_id of my data.

The simplified code below is working really fine when I'm building my app in development (with eas), but when I'm building my app in production on android, I have the following problem :

Regardless of the sport_id, the image displayed in the marker is always the last image specified in the MapBoxGl.Images, so the "img3" in my example.

This comportment isn't reproduced on IOS, where this setup is working fine (like my dev build on android).

<MapboxGl.MapView
      style={homeStyle.mapview}
      scaleBarEnabled={false}
      onMapIdle={() => {
        setShowButton(true);
      }}
      styleURL="mapbox://styles/nodal-app/cltc5nuum00hf01qpemz37gja"
      ref={mapRef}
    >
      
      <MapboxGl.Images
        images={{
          "img1": require("../../assets/emojis/foot.png"),
          "img2": require("../../assets/emojis/basket.png"),
          "img3": require("../../assets/emojis/tennis.png"),
        }}
      /> 

    <MapboxGl.ShapeSource
        id="spots"
        shape={shape}
        cluster={true}
        clusterMaxZoomLevel={14}
        clusterRadius={50}
        onPress={() => {
              something()
        }}
    >
            
        <MapboxGl.SymbolLayer
          id="emojiSymbols"
          sourceID="spots"
          filter={["!", ["has", "point_count"]]} 
          style={{
            iconImage: [
              "case",
                // Display img1 if sport_id is 1
              ["==", ["get", "sport_id"], 1],
              "img1", // Football
              ["==", ["get", "sport_id"], 2],
              "img2", // basket
              ["==", ["get", "sport_id"], 3],
              "img3", // tennis

              "❓", // default value
            ],
            iconAnchor: "bottom",
            iconSize: 0.05,
            iconOffset: [0, -300],
          }}
        />
   </MapboxGl.ShapeSource>
</MapboxGl.MapView>

I've tried the following things without results :

  • Change files names in my "assets" folder

  • Import the files directly at the top of the screen script

  • Put my images in the cache at app launch

  • Add my asset folder in the assetBundlePatterns of my config app.json

I would really appreciate any help on this. Let me know if you need additionnal data or code exemples.

0

There are 0 best solutions below