Add markers to a web map with a symbol layer
This example draws points from a GeoJSON collection to a map.
Upon loading, the map uses loadImage
to add an image to the application, addSource
to add a collection of points to the application, and then addLayer
to draw the image on the map at each point location.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Add markers to a web map with a symbol layer</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div><script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/streets-v12',center: [-96, 37.8],zoom: 3}); map.on('load', () => {// Add an image to use as a custom markermap.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',(error, image) => {if (error) throw error;map.addImage('custom-marker', image);// Add a GeoJSON source with 2 pointsmap.addSource('points', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{// feature for Mapbox DC'type': 'Feature','geometry': {'type': 'Point','coordinates': [-77.03238901390978, 38.913188059745586]},'properties': {'title': 'Mapbox DC'}},{// feature for Mapbox SF'type': 'Feature','geometry': {'type': 'Point','coordinates': [-122.414, 37.776]},'properties': {'title': 'Mapbox SF'}}]}}); // Add a symbol layermap.addLayer({'id': 'points','type': 'symbol','source': 'points','layout': {'icon-image': 'custom-marker',// get the title name from the source's "title" property'text-field': ['get', 'title'],'text-font': ['Open Sans Semibold','Arial Unicode MS Bold'],'text-offset': [0, 1.25],'text-anchor': 'top'}});});});</script> </body></html>