Setting the Icons for circles

Question

I'm Michael. I would like to set the icons(image data with URL) instead of circles. My current code is below.

map.addSource('on0120-2k8v9e', {
        type: 'vector',
        url: 'mapbox://michael.5z4bp1z2'
    });
map.addLayer({
    'id': 'on0120-2k8v9e',
    'type': 'circle',
    'source': 'on0120-2k8v9e',
    'layout': {
        // Make the layer visible by default.
        'visibility': 'visible'
    },
    'paint': {
        'circle-radius': 8,
        'circle-color': 'rgba(55,148,179,1)'
    },
    'source-layer': 'on0120-2k8v9e'
});
     map.addSource('ot0123-cwuarc', {
    type: 'vector',
    url: 'mapbox://michael.25j63pdx'
});
map.addLayer({
    'id': 'ot0123-cwuarc',
    'type': 'circle',
    'source': 'ot0123-cwuarc',
    'layout': {
        // Make the layer visible by default.
        'visibility': 'visible'
    },
    'paint': {
        'circle-radius': 8,
        'circle-color': 'rgba(55,148,179,1)'
    },
    'source-layer': 'ot0123-cwuarc'
});

If anyone knows how to set icons (image data with URL) instead circles in this code, please teach us...

Thank you. Michael

Answer 1

Take a look at the ICON layer of the mapbox. You should be able to import any image using the map.loadImage() function and use it in the layer.

https://docs.mapbox.com/mapbox-gl-js/example/add-image/

For your example it should be as follows:

  map.loadImage(imgSrc, (error, res) => {
    map.addImage(imgKey, res);
    map.addLayer({
      'id': 'on0120-2k8v9e',
      'type': 'symbol', // Notice the type here
      'source': 'on0120-2k8v9e',
      'layout': {
          // You can add more properties to change icon properties
          'icon-size': 10
      },
      'source-layer': 'on0120-2k8v9e'
    });
})

Notice the nested part of loadImage , the add layer should happen after the icon is loaded.

Feel free to create a jsbin or fiddle and I can help you further