JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<div id='map' style='width: 400px; height: 300px;'></div>

JavaScript

(function() {

  mapboxgl.accessToken = 'pk.eyJ1Ijoiam9zaG1vdG8iLCJhIjoiY2toM3lxZHduMDM2dTJ4bnMxb3V4OTkxeSJ9.Vuct5lw2xjX9LXKL5zxb_w';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/outdoors-v11', // stylesheet location
    center: [-93, 31], // starting position [lng, lat]
    zoom: 6 // starting zoom
}) ;

var nav = new mapboxgl.NavigationControl() ;
map.addControl(nav, 'bottom-right') ;

map.on('load', function() {

    map.addSource('population', {
        'type': 'geojson',
        'data': {
            'type': 'MultiPoint',
            'coordinates': [
                [-84.2963900, 33.7747200],
                [-85.1116700, 31.2925000],
                [-82.3791700, 34.1780600],
                [-82.4666700, 34.2333300],
                [-85.2505600, 31.5716700],
                [-83.3069400, 31.9919400],
                [-85.1507806, 30.3934889],
                [-99.7327800, 32.4486100],
                [-93.6438900, 31.6313900]
            ]
        }
    });

    map.addLayer({
        'id': 'points',
        'type': 'circle',
        'source': 'population',
        'paint': {
            'circle-radius': 10,
            'circle-color': '#007cbf'
        }
    });

}) ;

})();