MapboxGL choropleth

Based on example Update a choropleth layer by zoom level by Mapbox

County highlights based on Mapbox example Highlight features containing similar data

See also many other improvements in this block: https://bl.ocks.org/mfincker/3370e8e2f1eda60affcbe3d6b1827c58

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
    <script src="//d3js.org/d3.v4.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>

.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    right: 10px;
    z-index: 1;
}

.legend h4 {
    margin: 0 0 10px;
}

.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}

</style>

<div id='map'></div>
  
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RhbWVuIiwiYSI6IlpkZEtuS1EifQ.jiH_c9ShtBwtqH9RdG40mw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-98, 38.88],
    minZoom: 3,
    zoom: 3
});

var zoomThreshold = 9;
var zoomThreshold1 = 12;

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

map.addSource('county_geo_data', {
        'type': 'vector',
        'url': 'mapbox://stamen.cccc8kgi'
    });
    map.addSource('tract_geo_data', {
        'type': 'vector',
        'url': 'mapbox://stamen.42zqg3sk'
    });
    map.addSource('block_geo_data', {
        'type': 'vector',
        'url': 'mapbox://stamen.0ujdjkh2'
    });

map.addLayer({
        'id': 'county_geo_data',
        'source': 'county_geo_data',
        'source-layer': 'county_geo_data',
        'maxzoom': zoomThreshold,
        'type': 'fill',
        'paint': {
            'fill-color': {
                property: 'poverty_rate',
                stops: [
                    [0, '#ffffd4'],
                    [0.1, '#fed98e'],
                    [0.2, '#fe9929'],
                    [0.3, '#d95f0e'],
                    [0.7, '#993404']
                ]
            },
            'fill-opacity': 0.75
        }
    }, 'waterway-label');
    
    map.addLayer({
        'id': 'county_geo_data_highlighted',
        'source': 'county_geo_data',
        'source-layer': 'county_geo_data',
        'maxzoom': zoomThreshold,
        'type': 'line',
        'paint': {
            'line-color': 'black',
          	'line-width': 2,
            'line-opacity': 1
        },
        "filter": ["in", "NAME", ""]
    }, 'waterway-label');
  
  	map.on('mousemove', 'county_geo_data', function(e){
      var feature = e.features[0];
      console.log(feature.properties.NAME);
      map.setFilter('county_geo_data_highlighted', 
                    ['in',"NAME",feature.properties.NAME]
                    );
    })
  
    map.addLayer({
        'id': 'tract_geo_data',
        'source': 'tract_geo_data',
        'source-layer': 'tract_geo_data',
        'maxzoom': zoomThreshold1,
        'type': 'fill',
        'paint': {
            'fill-color': {
                property: 'poverty_rate',
                stops: [
                    [0, '#ffffd4'],
                    [0.1, '#fed98e'],
                    [0.2, '#fe9929'],
                    [0.3, '#d95f0e'],
                    [0.7, '#993404']
                ]
            },
            'fill-opacity': 0.75
        }
    }, 'waterway-label');
    
    map.addLayer({
        'id': 'block_geo_data',
        'source': 'block_geo_data',
        'source-layer': 'block_geo_data',
        'type': 'fill',
        'paint': {
            'fill-color': {
                property: 'poverty_rate',
                stops: [
                    [0, '#ffffd4'],
                    [0.1, '#fed98e'],
                    [0.2, '#fe9929'],
                    [0.3, '#d95f0e'],
                    [0.7, '#993404']
                ]
            },
            'fill-opacity': 0.75
        }
    }, 'waterway-label');
  
});

var tooltip = d3.select("body").append("div");

</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js

https://d3js.org/d3.v4.js