Adding custom marker

Switch to another map style. See the example: https://docs.mapbox.com//mapbox-gl-js/example/setstyle/

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">



<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.marker {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';

		var geojson = {
		  'type': 'FeatureCollection',
		  'features': [{
		      'type': 'Feature',
		      'geometry': {
		        'type': 'Point',
		        'coordinates': [-77.032, 38.913]
		      },
		      'properties': {
		        'title': 'Mapbox',
		        'description': 'Washington, D.C.'
		      }
		    },
		    {
		      'type': 'Feature',
		      'geometry': {
		        'type': 'Point',
		        'coordinates': [-122.414, 37.776]
		      },
		      'properties': {
		        'title': 'Mapbox',
		        'description': 'San Francisco, California'
		      }
		    }
		  ]
		};

		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/light-v10',
		  center: [-96, 15.8],
		  zoom: 2
		});

		// add markers to map
		geojson.features.forEach(function(marker) {
		  // create a HTML element for each feature
		  var el = document.createElement('div');
		  el.className = 'marker';

		  // make a marker for each feature and add it to the map
		  new mapboxgl.Marker(el)
		    .setLngLat(marker.geometry.coordinates)
		    .setPopup(
		      new mapboxgl.Popup({
		        offset: 25
		      }) // add popups
		      .setHTML(
		        '<h3>' +
		        marker.properties.title +
		        '</h3><p>' +
		        marker.properties.description +
		        '</p>'
		      )
		    )
		    .addTo(map);
		});