JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">
<style>
  body {
    margin: 0;
    padding: 0;
  }

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

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

const style = {
  version: 8,
  center: [139.77477614708073, 35.68378771092881],
  zoom: 17,
  bearing: 113,
  pitch: 60,
  sources: {
    composite: {
      url: 'mapbox://tristen.cjtuipk9f011nu9qr0wmc1aic-88las,mapbox.mapbox-streets-v8',
      type: 'vector'
    }
  },
  glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
  layers: [{
      id: 'background',
      type: 'background'
    },
    {
      id: 'building',
      type: 'fill-extrusion',
      source: 'composite',
      'source-layer': "building",
      minzoom: 15,
      paint: {
        'fill-extrusion-color': '#b91bf8',
        'fill-extrusion-height': ['get', 'height']
      }
    },
    {
      id: 'route-japan-polygon',
      type: 'fill',
      source: 'composite',
      'source-layer': 'route_Japan_polygon',
      paint: {
        'fill-color': '#813dff'
      }
    }
  ]
};

new mapboxgl.Map({
  container: 'map',
  style
});