Add custom icons with Markers
Use Marker
to add custom icons to your map.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Add custom icons with Markers</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><style>.marker {display: block;border: none;border-radius: 50%;cursor: pointer;padding: 0;}</style> <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 geojson = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {'message': 'Foo','iconSize': [60, 60]},'geometry': {'type': 'Point','coordinates': [-66.324462, -16.024695]}},{'type': 'Feature','properties': {'message': 'Bar','iconSize': [50, 50]},'geometry': {'type': 'Point','coordinates': [-61.21582, -15.971891]}},{'type': 'Feature','properties': {'message': 'Baz','iconSize': [40, 40]},'geometry': {'type': 'Point','coordinates': [-63.292236, -18.281518]}}]}; 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: [-65.017, -16.457],zoom: 5}); // Add markers to the map.for (const marker of geojson.features) {// Create a DOM element for each marker.const el = document.createElement('div');const width = marker.properties.iconSize[0];const height = marker.properties.iconSize[1];el.className = 'marker';el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;el.style.width = `${width}px`;el.style.height = `${height}px`;el.style.backgroundSize = '100%'; el.addEventListener('click', () => {window.alert(marker.properties.message);}); // Add markers to the map.new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);}</script> </body></html>