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.
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