JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css">



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

CSS

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

    #map {
        position: fixed;
        width: 100%;
    }
    #features {
        width: 50%;
        margin-left: 50%;
        font-family: sans-serif;
        overflow-y: scroll;
        background-color: #fafafa;
    }
    section {
        padding: 25px 50px;
        line-height: 25px;
        border-bottom: 1px solid #ddd;
        opacity: 0.25;
        font-size: 13px;
    }
    section.active {
        opacity: 1;
    }
    section:last-child {
        border-bottom: none;
        margin-bottom: 200px;
    }

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hicmUxOCIsImEiOiJjamhhaGFmN3YwOWwzM2RxODFzejd6ZnBlIn0.Iit934ngxDe43RA4G4L66g';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/shbre18/cl09rd59x003r16mqn8ug4ft7',
  center: [-0.1164237, 51.511005],
  zoom: 16.5,
  pitch: 65,
  bearing: 0,
});

function rotateCamera(timestamp) {
  // clamp the rotation between 0 -360 degrees
  // Divide timestamp by 100 to slow rotation to ~10 degrees / sec
  map.rotateTo((timestamp / 100) % 360, {
    duration: 0
  });
  // Request the next frame of the animation.
  requestAnimationFrame(rotateCamera);
}

map.on('load', () => {
  // Start the animation.
  rotateCamera(0);

  // Add 3d buildings and remove label layers to enhance the map
  const layers = map.getStyle().layers;
  for (const layer of layers) {
    if (layer.type === 'symbol' && layer.layout['text-field']) {
      // remove text labels
      map.removeLayer(layer.id);
    }
  }

  map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
      'fill-extrusion-color': '#aaa',
'fill-extrusion-color': [
  "interpolate",
  ["linear"],
  ["get", "height"],
  4,
  "#f5f7fa",
  5,
  "#e3458a",
  6,
  "#f5f7fa",
  31,
  "#f5f7fa",
  32,
  "#e3458a"
],
      // use an 'interpolate' expression to add a smooth transition effect to the
      // buildings as the user zooms in
      'fill-extrusion-height': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'height']
      ],
      'fill-extrusion-base': [
        'interpolate',
        ['linear'],
        ['zoom'],
        15,
        0,
        15.05,
        ['get', 'min_height']
      ],
      'fill-extrusion-opacity': 1.0
    }
  });
});