JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css">
<div id="map"></div>

CSS

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

JavaScript

const map = new mapboxgl.Map({
  container: 'map',
  style: 'https://seatgeek-tileserver.global.ssl.fastly.net/mapbox_styles/mk/v4112-1505-25/vector_js.json',
  zoom: 3,
  minZoom: 2,
  maxZoom: 9,
  attributionControl: false
});

map.on('load', () => {
	map.addLayer({
    id: 'section-hover-layer',
    type: 'fill',
    source: 'buster',
    'source-layer': 'shape',
    filter: ['==', 'object_type', 'section']
  }, 'section-labels'); // place underneath the section-labels layer
  
  // Update the data
  map.setPaintProperty('section-hover-layer', 'fill-color', {
    default: 'rgba(0, 0, 0, 0.0)', // can also be #RRGGBB
    property: 'mk',
    type: 'categorical',
    stops: [
      ['s:134', 'rgba(0, 0, 255, 0.6)'],
      ['s:133', 'rgba(0, 0, 255, 0.5)'],
      ['s:132', 'rgba(0, 0, 255, 0.4)'],
      ['s:131', 'rgba(0, 0, 255, 0.3)'],
      ['s:130', 'rgba(0, 0, 255, 0.2)'],
      ['s:129', 'rgba(0, 0, 255, 0.1)']
    ]
  });
});