Adding basic interaction, zooming to the feature clicked on.
Adapted from an official mapbox-gl basic example and hover styles
Built with blockbuilder.org
forked from enjalot's block: WWSD #8: Getting started Mapbox-gl
forked from enjalot's block: WWSD #9: Basic Styling and Interaction
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v9', | |
| center: [-0.1, 53], | |
| zoom: 5 | |
| }); | |
| map.on('load', function () { | |
| var url = "http://enjalot.github.io/wwsd/data/UK/counties.topojson" | |
| d3.json(url, function(err, topo) { | |
| console.log("topojson", topo) | |
| var counties = topojson.feature(topo, topo.objects.lad) | |
| console.log("counties", counties) | |
| map.addSource('counties', { | |
| 'type': 'geojson', | |
| 'data': counties | |
| }); | |
| map.addLayer({ | |
| 'id': 'counties', | |
| 'type': 'fill', | |
| 'source': 'counties', | |
| 'layout': {}, | |
| 'paint': { | |
| 'fill-outline-color': '#111', | |
| 'fill-color': '#088', | |
| 'fill-opacity': 0.8 | |
| } | |
| }); | |
| map.addLayer({ | |
| 'id': 'counties-hover', | |
| 'type': 'fill', | |
| 'source': 'counties', | |
| 'layout': {}, | |
| 'paint': { | |
| 'fill-outline-color': '#111', | |
| 'fill-color': '#19feff', | |
| 'fill-opacity': 0.8 | |
| }, | |
| "filter": ["==", "LAD13NM", ""] | |
| }); | |
| /* | |
| */ | |
| map.on("click", function(e) { | |
| var features = map.queryRenderedFeatures(e.point, { layers: ["counties"] }); | |
| if(features.length) { | |
| var envelope = turf.envelope(features[0]).geometry.coordinates[0] | |
| var bounds = [envelope[0], envelope[2]] | |
| map.fitBounds(bounds) | |
| } | |
| }) | |
| map.on("mousemove", function(e) { | |
| var features = map.queryRenderedFeatures(e.point, { layers: ["counties"] }); | |
| if (features.length) { | |
| map.setFilter("counties-hover", ["==", "LAD13NM", features[0].properties.LAD13NM]); | |
| } else { | |
| map.setFilter("counties-hover", ["==", "LAD13NM", ""]); | |
| } | |
| }); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
