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
Built with blockbuilder.org
forked from almccon‘s block: MapboxGL choropleth
<!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>