JSFiddle - React, Tailwind, and code Playground

by w8r

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.2.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.2.0/mapbox-gl.css">
<script src="https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>
<div id="map"></div>

CSS

html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
#map { width: 100%; height: 100%; position: relative; }

JavaScript

const map = L.map("map", {
  center: [40, -74.50],
  zoom: 9
});

console.log(L.mapboxGL, map);

var gl = L.mapboxGL({
  attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  accessToken: 'not-needed',
  style: 'https://api.maptiler.com/maps/basic/style.json?key=WrAno2oMdcq6tir0zRa8'
}).addTo(map);