Mapbox GL - How to populate custom icons using vector source?

Question

When reading examples of Mapbox GL using custom markers, I've seen examples - ie: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ where geojson data is hard coded (geometry) and icons can be custom selected for the map...

In a quick example that I've created : https://jsfiddle.net/claybox7/cmh3qw22/8/ I'm using a 'vector' geometry source saved in mapbox . When it is run, it will show circles of the provided long/lat from my data source.

How would I create markers like the "icon": "monument" ones used in the mapbox gl example above instead of circles to represent my geometry points?

Answer 1

You need to change the type of your layer from circle to symbol and add an icon-image at the layout properties. The code should look like this:

map.addLayer({
 'id': 'schoolData',
 'type': 'symbol',
 'source': 'schoolData',
 'layout': {
 'visibility': 'visible',
 'icon-image': 'monument-15'
 }, ...
});

All possible default icons can be found at Github.

• kremzeek: Excellent! Thanks! - Here's the updated jsfiddle example: jsfiddle.net/cmh3qw22/9