Mapbox GL AddLayer: Where are the icon images coming from

If you follow the examples, you only get the sprites that load with your particular style's sprite sheet, which is NOT NECESSARILY a 1 to 1 match with any other style.

ex: emerald-v8 has NO "icon-image":"harbor-15" like the example that uses streets-v8.

To see the list of available sprites from corresponding styles: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

I can choose the "harbor" icon from their emerald-v8 repository like so:

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

Here is the resource that helped me pull it all together, and it explains how to create your own icons: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

EDIT:

Basically, to add one of your own icons, go into Mapbox studio, create your own style, or edit one of theirs. Simply add one of your own SVGs, then that icon will become available to you into your custom sprite sheet.enter image description here


You can also use external/generated icons as icon-image if you use map.loadImage() and map.addImage() first.

Examples:

Add an icon to the map

Add a generated icon to the map

Tags:

Mapbox Gl