JSFiddle - React, Tailwind, and code Playground

by dollysingh3192

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js"></script>
<title></title>
<body>
<div id='map'></div>
<div class="info-box"></div>
</body>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.info-box {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px;
  font-size: 40px;
  background: rgba(0, 0, 0, 0.1);
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidmljYXBvdyIsImEiOiJjaWlodWlxdWowMGZkdWNrcGZocGc3aWV2In0.OM4475u6L_2MB0Dx-y7eoA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [-122.4376, 37.7577], // starting position
    zoom: 12 // starting zoom
});

function updateInfoWindow() {
	d3.select('.info-box').text('zoom: ' + d3.format(".2f")(map.getZoom()));
}

map.on('zoom', updateInfoWindow);
updateInfoWindow();

var geoJSON;

map.on('load', function loaded() {
  var source = new mapboxgl.GeoJSONSource({
  	data: geoJSON
  });
  map.addSource('my-awesome-source-1', source);
  map.addLayer({
    id: 'my-awesome-layer-1',
    source: 'my-awesome-source-1',
    type: 'fill',
    paint: {
      'fill-opacity': 0.5,
      'fill-color': '#11939A'
    },
    /* minzoom: 10.1,
    maxzoom: 13.5 */
  });
  
  map.setLayerZoomRange('my-awesome-layer-1', 0, 13);
  /* var zoom = 10;
  var duration = 4000; */
  map.on('click', 'my-awesome-layer-1', function(e) {
  		console.log(e.point);
	});
  /* function zoomTo() {
      map.zoomTo(zoom, {duration: duration, easing: linear});
    if (zoom === 10) {
      zoom = 14;
    } else {
      zoom = 10;
    }
    window.mapInstance = map;
    //if(zoom === 13.7) {
    var features = map.queryRenderedFeatures({ layers: ['my-awesome-layer-1'] });
    console.log(features);
    //}
  } */
  //setInterval(zoomTo, duration);
  //zoomTo();
});

function linear(t) {
    if (t <= 0) return 0;
    if (t >= 1) return 1;
    return t;
};

geoJSON = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -122.46116638183594,
              37.77288579232439
            ],
            [
              -122.44279861450195,
              37.75117238560617
            ],
            [
             ...