Images with style? (e.g. roundBorder? , borderColor?) - || Custom <Image /> for each marker?

[eybel]

I am trying MapBox for the first time and since I'm coming from react native maps library and I was wondering if you cuould style the markers (my markers load images by URL), so far I wasnt able to do it. I can only show thumbnails. I wanted them to be round but I cant achieve this, it seems it has not way to style the images.

1. Is there any other way to style the images shown as markers?
2. Could I use a regular component?
3. Will styles be a prop in the future?
4. Thank you

MY CURRENT CODE

<ShapeSource
          id="losts_founds"
          shape={featureCollection}
          cluster={true}
          clusterRadius={50}
          clusterMaxZoomLevel={15}
          onPress={(event) => onMarkerSelected(event)}
        >
          <SymbolLayer
            id="lost_found_clusters_count"
            filter={["has", "point_count"]}
            style={{
              textField: ["get", "point_count"],
              textPitchAlignment: "viewport",
              textOffset: [0, -3], // Offset text to the top
              textIgnorePlacement: true,
              textAllowOverlap: true,
              textFont: ["Open Sans Bold", "Arial Unicode MS Bold"], // Specify the font and weight
            }}
          />
          <SymbolLayer
            id="lost_found_clusters"
            belowLayerID="lost_found_clusters_count"
            filter={["has", "point_count"]}
            style={{
              iconAnchor: "bottom",
              iconAllowOverlap: true,
              iconImage: "dog-icon",
            }}
          />
          <SymbolLayer
            id="lost_found_markers"
            filter={["!", ["has", "point_count"]]}
            style={{
              iconSize: 0.3,
              iconAnchor: "bottom",
              iconAllowOverlap: true,
              iconImage: [
                "case",
                [">=", zoomLevel, 13], // Show DogIcon if zoom level is 13 or lower
                ["get", "icon"], // Use the feature's icon property if zoom level is greater than 13
                "dog-icon",
              ],
            }}
          />
          
<Images images={{ "dog-icon": DogIcon, ...imageUrls }} />
</ShapeSource>

[mfazekas]

You can use the Image component to draw views with React-Native, and use them as icons in symbol layer.
See https://rnmapbox.github.io/docs/examples/SymbolCircleLayer/ShapeSourceIcon

Note that if you're using remote Image-s you'll most likely need to use a refresh on the Image, once RN rendered the image.

<Mapbox.Images>
  <Mapbox.Image name="dog-icon">
     <View>
         <View style={...}>
            <Image />
         </View>
     </View>
  </Mapbox.Image>
</Mapbox.Images>

[eybel]

I tried the Image component but I couldn't figure how to use it.

My current component is:

<Images images={{ "dog-icon": DogIcon, ...imageUrls }} />

This component has the "images" prop that takes an array of objects.

imageUrls is my array of featureCollection type that it has a prop "icon" where the full path for that marker's thumbnail live.

e.g of my imageUrls: [{"name": {uri: "FULL_PATH_TO_IMAGE"}}, {"name": {uri: "FULL_PATH_TO_IMAGE"}}]

NOW HERE:

How do you set that up the way you mentioned? You are saying that I should use this structure and the Image component:

<Mapbox.Images>
  <Mapbox.Image name="dog-icon">
     <View>
         <View style={...}>
            <Image />
         </View>
     </View>
  </Mapbox.Image>
</Mapbox.Images>

But I don't see how that would load my "imageUrls" array.

[mfazekas]

<Mapbox.Images>
  {imageUrls.map(url => 
    (() => {
       let imageRef = useRef();
       return (
       <Mapbox.Image name={url} ref={imageRef}>
       <View>
         <View style={...}>
            <Image source={{uri: url}} onLoad={imageRef.current.refresh()} />
         </View>
       </View>
    </Mapbox.Image>)})}
</Mapbox.Images>

[eybel]

<Mapbox.Images>
  {imageUrls.map(url => 
    (() => {
       let imageRef = useRef();
       return (
       <Mapbox.Image name={url} ref={imageRef}>
       <View>
         <View style={...}>
            <Image source={{uri: url}} onLoad={imageRef.current.refresh()} />
         </View>
       </View>
    </Mapbox.Image>)})}
</Mapbox.Images>

So:

1. Mapbox.Image can take children components and inside this one you could use a React Native Image component.
2. Mapbox.Image has a name prop that has to take a unique name (e.g the URL)
3. Then inside you could render a regular image component and style
4. Not sure why the refresh() on the component though...

If this works, Ill come back and let you know in a bit to thank you. We were about to change the whole scenario because of this.

[eybel]

<Mapbox.Images>
  {imageUrls.map(url => 
    (() => {
       let imageRef = useRef();
       return (
       <Mapbox.Image name={url} ref={imageRef}>
       <View>
         <View style={...}>
            <Image source={{uri: url}} onLoad={imageRef.current.refresh()} />
         </View>
       </View>
    </Mapbox.Image>)})}
</Mapbox.Images>

SCREENSHOT OF CURRENT RESULT

I had no luck. We tried different ways:

Our current code:

MARKERS (we shaped it based on how mapbox feature collection works)

const MARKERS = useMemo(
   () =>
     featureCollection(
       POSTS_IN_MAP.map((marker) => {
         const imageName =
           getThumbnailUrlFromMultimediaUrl(
             marker.lost_found_multimedia?.[0].multimedia_url || ""
           ) || "";

         return point([marker.longitude!!, marker.latitude!!], {
           marker,
           imageName,
         });
       })
     ),
   [POSTS_IN_MAP]
 );

MAKERS SHAPE REAL EXAMPLE WITH WORKING REMOTE IMAGE:

MARKERS==> {"imageName": "https://xxxxxxxxxxxxxxxxxxx.supabase.co/storage/v1/object/public/multimedia/a80d4b61-6ecb-41e1-bc36-3abe74364888_thumbnail.png", "marker": {"category": "Dog", "city": "Rosario", "created_at": "2024-06-24T18:43:47.663693+00:00", "deleted_at": null, "description": "Description here", "extra_data": null, "found_at": "2024-06-24T15:42:18.326+00:00", "id": 34, "latitude": -32.966077, "longitude": -60.6412696, "lost_found_multimedia": [[Object]], "sex": "m", "title": "Title"}}

We create an array of the imageUrls so we could provide them to the <Mapbox.Images> and <Mapbox.Image> component:

  const imageUrls = POSTS_IN_MAP.map((marker) => {
    return getThumbnailUrlFromMultimediaUrl(
      marker.lost_found_multimedia?.[0].multimedia_url
    );
  });

Finally we return this (MapboxImage is an alias for Mapbox.Image):

<ShapeSource
         id="losts_founds"
         shape={MARKERS}
         cluster={true}
         clusterRadius={20}
         clusterMaxZoomLevel={15}
         onPress={(event) => onMarkerSelected(event)}
         ref={shapeSourceRef}
       >
         <SymbolLayer
           id="lost_found_clusters_count"
           filter={["has", "point_count"]}
           style={{
             textField: ["get", "point_count"],
             textPitchAlignment: "viewport",
             textFont: ["Open Sans Bold", "Arial Unicode MS Bold"], 
           }}
         />
         <CircleLayer
           id="lost_found_clusters"
           belowLayerID="lost_found_clusters_count"
           filter={["has", "point_count"]}
           style={{
             circleColor: "#FEA072",
             circleRadius: 30,
             circleOpacity: 0.8,
             circleStrokeWidth: 2,
             circleStrokeColor: "#FFFFFF",
           }}
         />

         <SymbolLayer
           id="lost_found_markers"
           filter={["!", ["has", "point_count"]]}
           style={{
             iconSize: 1,
             iconAnchor: "bottom",
             iconAllowOverlap: true,
             iconImage: ["get", "imageName"], // IS THIS CORRECT??? Dynamically set the iconImage
           }}
         />

         <Images>
           {imageUrls.map((url, index) => {
             let imageRef = useRef();
             return (
               <MapboxImage name={url} ref={imageRef} key={index}>
                 <View
                   style={{ backgroundColor: "gray", width: 100, height: 100 }}
                 >
                   <Image
                     source={{ uri: url }}
                     onLoad={imageRef.current?.refresh()}
                   />
                 </View>
               </MapboxImage>
             );
           })}
     </Images>
</ShapeSource>

What are are doubting about is how to connect the SymbolLayer with these Mapbox.Images and Mapbox.Image components.

just using the <Mapbox.Images /> component we were able to do it by provinding the "iconImage" prop that would use this expression ["get", "iconName"] but now we are not sure how to do it. We think it should get the URL as the "iconName" value, since in your example you actually put the url as the value.

NOTE 1: we are able to see 3 GRAY squares as the markers, but images are not being displayed for some reason.
NOTE 2: we get every now and then this error " ERROR Error: Rendered more hooks than during the previous render." i think it has to do with that useRef()... This may not be that stable yet... we are kind of giving up, but if you think I am targeting this wrong I will give it a try again.

It would be awesome to have the component with a style props in the future or a more simpler way of achieve this. We may go back to showing just icons for now if we cant make this work.

I appreaciate your effors!