| license: mit |
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
| <!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> |
