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%;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
	var map = new mapboxgl.Map({
	  container: 'map',
	  style: 'mapbox://styles/mapbox/light-v10',
	  center: [-96, 37.8],
	  zoom: 3
	});

	map.on('load', function() {
	  // Add an image to use as a custom marker
	  map.loadImage(
	    'https://www.transparentpng.com/download/circle/DDkf8w-black-circle-clipart-file.png',
	    function(error, image) {
        console.log(error.msg);
	      if (error) throw error;
        console.log("no error");
	      map.addImage('custom-marker', image);
	      // Add a GeoJSON source with 2 points
	      map.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 layer
	      map.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,...