Draw GeoJSON points

Draw points from a GeoJSON collection to a map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/geojson-markers/

by Nikolay Petrov

HTML

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

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

CSS

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

JavaScript

// https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/

mapboxgl.accessToken = 'pk.eyJ1IjoicGV0cm92bm4iLCJhIjoiVHJkcXROMCJ9.hzniKblVA-O0YJSvCfwztg';
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://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
    function (error, image) {
      if (error) throw 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
                ]
              },
            },
            {
              // feature for Mapbox SF
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [-122.414, 37.776]
              },
            }
          ]
        }
      });

      // Add a symbol layer
      map.addLayer({
        'id': 'points',
        'type': 'symbol',
        'source': 'points',
        'layout': {
          'icon-image': 'custom-marker',

        }
      });
    }
  );
});