JSFiddle - React, Tailwind, and code Playground

by kanaa

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

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

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1Ijoia2FyaW1uYWFqaSIsImEiOiJjazVkNGZsbHUxc2g4M2ptbXp6aXphZDc4In0.ctuAToHAEOrKxqKzBDANIg";

let map = new mapboxgl.Map({
  container: "map",
  style: "https://api.mapbox.com/styles/v1/saman/ciql4uao1000xbkm7knq5qf52?access_token=pk.eyJ1Ijoic2FtYW4iLCJhIjoiS1ptdnd0VSJ9.19qza-F_vXkgpnh80oZJww",
  center: [139.76548450914242, 35.671784969494794],
  zoom: 16
});