JSFiddle - React, Tailwind, and code Playground

by Gary Cline

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.44.1/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<body>
  <div id='map'></div>
</body>

JavaScript

// 'use strict'
mapboxgl.accessToken = 'pk.eyJ1IjoiZ2NsaW5lMDAxIiwiYSI6ImNpd3o1aG9kdTAxOGgydG8wOXA1emlyMTEifQ.FtviOLuh7BVrbQlZvwsTOw'

function createMapBox2(awarddollars_opdiv, BREAKS_WORLD, BREAKS_USA) {
	var zoomThreshold;
	var map;
	map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/light-v9',
		center: [-98, 38.88],
		minZoom: 1,
		zoom: 1
	});

	zoomThreshold = 6;

	map.addControl(new mapboxgl.NavigationControl());

	map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/light-v9',
		center: [-98, 38.88],
		minZoom: 2,
		zoom: 1
	});

	zoomThreshold = 3;

	map.addControl(new mapboxgl.NavigationControl());

	map.on('load', function () {
		map.addSource('HHSWorld', {
			type: 'vector',
			url: 'mapbox://gcline001.cjfb5n4yn2ehc2wo0zxdph9o0-4ktqq'
			// url: 'mapbox://gcline001.ciz3dx5yp04no2wo41us21wdl-4zq5h'
		});

		map.addLayer({
			'id': 'worldAward',
			'source': 'HHSWorld',
			'source-layer': 'WorldStatesCongressDisc',
			'maxzoom': zoomThreshold,
			'type': 'fill',
			'filter': ['==', 'class', 'country'],
			'paint': {
				'fill-color': {
					property: awarddollars_opdiv,
					type: 'interval',
					stops: [
						[BREAKS_WORLD[0], COLORSWORLD[0]],
						[BREAKS_WORLD[1], COLORSWORLD[1]],
						[BREAKS_WORLD[2], COLORSWORLD[2]],
						[BREAKS_WORLD[3], COLORSWORLD[3]],
						[BREAKS_WORLD[4], COLORSWORLD[4]],
						[BREAKS_WORLD[5], COLORSWORLD[5]],
						[BREAKS_WORLD[6], COLORSWORLD[6]]
					]
				},
				'fill-opacity': 1
			}
		}, 'place_label_country_small_s');

		map.addLayer({
			'id': 'USStateAward',
			'source': 'HHSWorld',
			'source-layer': 'WorldStatesCongressDisc',
			'minzoom': zoomThreshold,
			'type': 'fill',
			'filter': ['==', 'class', 'state'],

			'paint': {
				'fill-color': {
					property: awarddollars_opdiv,
					stops: [
						[BREAKS_USA[0], COLORSSTATE[0]],
						[BREAKS_USA[1], COLORSSTATE[1]],
						[BREAKS_USA[2], COLORSSTATE[2]],
						[BREAKS_USA[3],...