JSFiddle - React, Tailwind, and code Playground

by Gary Cline

HTML

<div id='map' class="myMap"></div>
  <div id='features'>Wait for it!</div>

JavaScript

// Mapboxgl demo app
'use strict';

var map;

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2NsaW5lMDAxIiwiYSI6ImNpd3o1aG9kdTAxOGgydG8wOXA1emlyMTEifQ.FtviOLuh7BVrbQlZvwsTOw'

// init the map
map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-1.83, -78.183],
    zoom: 5.5,
});

map.on('style.load', function() {
	map.addSource("tom", {
   		"type": "vector",
    	"data": 'mapbox://gcline001.cjg8fdse402b2s4mowr0zmswa-927x5'
  	});
  /*
// style for point data
	map.addLayer({
        'id': 'foobar',
        'type': 'symbol',
        'source': 'tom',
        'interactive': true,
    	'layout': {
    	  	'icon-image': '{marker-symbol}-12',
    	  	'text-field': '{title}',
    	  	'text-font': 'Open Sans Semibold, Arial Unicode MS Bold',
    	  	'text-offset': [0, 0.6],
    	  	'text-anchor': 'top'
    	},
    	'paint': {
    	  	'text-size': 12
    	}
    });
*/

// style for polygon data
    map.addLayer({
        'id': 'foobar1',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#ffffb2',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': [
            '<=', 'GM_EDU', 0.49
        ]
    });

    map.addLayer({
        'id': 'foobar2',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#fecc5c',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': ['all',['>', 'GM_EDU', 0.49], ['<=', 'GM_EDU', 0.815]]
    });

    map.addLayer({
        'id': 'foobar3',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#fd8d3c',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': ['all',['>', 'GM_EDU', 0.815], ['<=', 'GM_EDU', 1.139]]
    });

   ...