Starcops
Starcops

Reputation: 21

MapboxGl SymbolLayer iconImage showing random image in production

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 :

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

Upvotes: 0

Views: 41

Answers (0)

Related Questions