JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.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.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [18.6303,-1.7005],
    zoom: 13,
    pitch: 40,
    bearing: 20
});

map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['test_3d'] });

    if (!features.length) {
        return;
    }

 console.log(features);
});


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

    map.addLayer({
        'id': 'test_3d',
        'type': 'fill-extrusion',
        'source': {
            'type': 'geojson',
            'data': mine 
        },
        'paint': {
            'fill-extrusion-color': "#CCC",
            'fill-extrusion-height': {
                'property': 'mx_ext_h',
                'type': 'identity'
            },
            'fill-extrusion-base': {
                'property': 'mx_ext_b',
                'type': 'identity'
            },
            'fill-extrusion-opacity': 1
        }
    });
});


var mine = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "mx_ext_h": 400,
        "mx_ext_b": 500
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              18.622770309448242,
              -1.6972681565276475
            ],
            [
              18.622941970825195,
              -1.7032736594498075
            ],
            [
              18.628349304199215,
              -1.7085070110212788
            ],
            [
              18.636374473571777,
              -1.7040886905481554
            ],
            [
              18.637747764587402,
              -1.6955951916747873
            ],
            [
              18.632426261901855,
              -1.692592430620544
            ],
            [
              18.62452983856201,
              -1.6940938117294717
           ...