Adding Markers in Mapbox GL

I wouldn't normally post this map showing the birthplaces of Liverpool Football Club players but it is the first Mapbox GL created map in the wild that I've seen which includes map markers. The map also includes text labels with the markers so could provide a useful source for anyone looking to add markers and / or text labels to a Mapbox GL map.

The Mapbox GL example maps includes one demo showing how to add markers to a map. That example, like this map, shows you how to add an icon for the marker and also how to add a text label to the marker. The Mapbox GL example map also shows you how to style the text label. However the Liverpool players map includes far more styling of the text labels than the Mapbox GL example, so could be a useful guide for anyone interested in adding text labels to their markers.

If you look at the source code for the Liverpool players map you can see how a halo is added to the text,

"text-halo-color": "white",
"text-halo-width": 1,
"text-halo-blur": 0.5,

You can also see in this map how you can control the size of the text label according to the zoom level of the map. In this case the text labels become bigger as you zoom in on the map,

"text-size": { "stops": [[2, 6], [4, 8],[6,10],[8,12],[14,16]]

Currently Mapbox GL doesn't work on Internet Explorer (although Mapbox say support for IE is coming soon). While IE isn't supported it is good practice to add a warning for IE users. This Liverpool players map doesn't include a warning but the Mapbox GL examples section does include an example of how you can Check for Mapbox GL Browser Support and alert users with non-supported browsers.