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 () {

  map.addSource('points', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': {	
          	'type': 'Point',	
            'coordinates': [-77,38]	
          },
        },
        {
          'type': 'Feature',
          'geometry': {'type': 'Point','coordinates': [-122, 37]},
        }
      ]
    }
  });

  map.addLayer({
    'id': 'points',
    'type': 'circle',
    'source': 'points',
  });
  
});