JSFiddle - React, Tailwind, and code Playground

by Takuya Nakajima

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/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.eyJ1IjoibmF6b21pa2FuIiwiYSI6ImNpem9hZHlpNjAydTAyd3J2eXp4b2R2MzUifQ.GRdOzl4ieyG4ph220RqjhQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [139.752993, 35.685192],
  zoom: 2,
});

map.on('load', function() {
  map.addLayer({
    "id": "asia",
    "type": "fill",
    "source": {
      type: 'geojson',
      data: 'https://api.myjson.com/bins/epixv'
    }
  });
});