How to use URL as iconImage in SymbolLayer?

[NDobricic]

I've been wrecking my brain with this for the past 3 hours. I just want to access the icon field in feature properties from iconImage, which contains an URL to an image. Here is my code:

import React from 'react';
import { View } from 'react-native';
import MapboxGL from '@rnmapbox/maps';

const defaultStyle = {
    version: 8,
    name: 'Land',
    sources: {
      map: {
        type: 'raster',
        tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
        tileSize: 150,
        minzoom: 1,
        maxzoom: 19,
      },
    },
    layers: [
      {
        id: 'background',
        type: 'background',
        paint: {
          'background-color': '#FFFFFF',
        },
      },
      {
        id: 'map',
        type: 'raster',
        source: 'map',
        paint: {
          'raster-fade-duration': 100,
        },
      },
    ],
  };

const App = () => {
  MapboxGL.setWellKnownTileServer('Mapbox');
  MapboxGL.setAccessToken(null);

  const features = [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'https://i.imgur.com/V1REv35.jpeg',
      },
      geometry: {
        type: 'Point',
        coordinates: [45, 45],
      },
    }
  ]

  return(
      <View style = {{ width: '100%', height: '100%' }}>
          <MapboxGL.MapView
              style={{width: '100%', height: '100%', overflow: 'hidden'}}
              styleJSON={JSON.stringify(defaultStyle)}
          >
              <MapboxGL.Camera
                  centerCoordinate={[45, 45]}
                  zoomLevel={5}
              />
              <MapboxGL.ShapeSource id="markers" shape={{type: 'FeatureCollection', features}} >
                <MapboxGL.SymbolLayer
                  id="markerSymbols"
                  style={{
                    iconImage: ['get', 'icon'],
                    iconSize: 0.1
                  }}
                />
              </MapboxGL.ShapeSource>
          </MapboxGL.MapView>
      </View>
  )
};

If I change ['get', 'icon'] to the actual URL, it works fine, but this is just a minimal example, in my actual application I'm fetching the data from a server and I would have many markers, so that wouldn't work.

What am I doing wrong?

[mfazekas]

@NDobricic pls note that using an url as iconImage should be (deprecated in v10)[https://github.com/rnmapbox/maps/wiki/Deprecated-URLInIconImages].

Pls use Images and onImageMissing.

This is pseudo code, but somthing like this should work:

const features = [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'V1REv35.jpeg',
      },
      geometry: {
        type: 'Point',
        coordinates: [45, 45],
      },
    }
  ]
  
  
         const [images,setImages] = useState({});
         
         ...

         <MapView>
             <Images onImageMissing={(imageKey) => {
                      setImages({...images,imageKey: `https://i.imgur.com/${imageKey}`})
                    }} images={images} />             
             <ShapeSource id="markers" shape={{type: 'FeatureCollection', features}} >
                <SymbolLayer
                  id="markerSymbols"
                  style={{
                    iconImage: ['get', 'icon'],
                    iconSize: 0.1
                  }}
                />
              </ShapeSource>
          </MapView>

    

[NDobricic]

Works great! A bit unrelated, but is there any way to style the Symbols? E. g. if I want the images to be circles instead of rectangles, if I want them to have borders etc.

[mfazekas]

Not directly, what you can do is use the Image component:

     <Mapbox.MapView>
             <Mapbox.Images onImageMissing={(imageKey) => {
                      setImages({...images,imageKey: `https://i.imgur.com/${imageKey}`})
                    }}>
                 {Object.keys(images).map((imageKey) => 
                   <Mapbox.Image name={imageKey}>
                      <View style={{borderRadius:100}}>
                        <Image source={{uri: images[imageKey]}} />
                      </View>
                   </Mapbox.Image>
                 }
              />             
             <Mapbox.ShapeSource id="markers" shape={{type: 'FeatureCollection', features}} >
                <Mapbox.SymbolLayer
                  id="markerSymbols"
                  style={{
                    iconImage: ['get', 'icon'],
                    iconSize: 0.1
                  }}
                />
              </Mapbox.ShapeSource>
          </Mapbox.MapView>
          ```
          
          Note that it might be complicated as you might need to add a listener to react-native Image's onLoad event and call Mapbox.Image component's `refresh` method.

[between0n1]

@mfazekas
Hello, thank you for the response. I'm trying to achieve the same thing ( give borders to image ) as NDobricic. Could you explain more about how to refresh Mapbox.Image component when onLoad callBack is invoked?