JSFiddle - React, Tailwind, and code Playground

by pjleonard37

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Show and hide layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<nav id="menu"></nav>
<div id="map"></div>

</body>
</html>

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibGVvc29ubmVrdXM5NSIsImEiOiJjazAxdHcyZWExMHBjM2lwN2psMDhheXQwIn0.KpEYrurG0lE55PLKMuYtKw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/leosonnekus95/ck11gbbaz0neb1cmrunqmijkf',
zoom: 12,
center: [174.7570008, -36.8658221]
});

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

map.addLayer({
                    'id': 'Uptown',
                    'type': 'fill',
                    'source': {
                    'type': 'geojson',
                    'data': {
                    'type': 'Feature',
                    'geometry': {
                    'type': 'Polygon',
                    'coordinates': 
        
        
                    [
          [
            [
              174.75553035736084,
              -36.86266073708062
            ],
            [
              174.75063800811768,
              -36.87591310126164
            ],
            [
              174.75093841552734,
              -36.876153407886235
            ],
            [
              174.75698947906494,
              -36.877560902932636
            ],
            [
              174.75677490234375,
              -36.878350461967756
            ],
            [
              174.75733280181882,
              -36.87958627711373
            ],
            [
              174.76196765899655,
              -36.880822072261466
            ],
            [
              174.76548671722412,
              -36.880169849536685
            ],
            [
              174.77067947387695,
              -36.87841911888939
            ],
            [
              174.76922035217285,
              -36.87316668614119
            ],
            [
              174.768533706665,
              -36.87179344154945
            ],
            [
              174.76964950561523,
              -36.868909547550295
            ],
            [
              174.76728916168213,
              -36.86708989174973
            ],
            [
             ...