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.