WWSD #9-a: Basic Styling and Interaction

Working with spatial data

Example #9-a

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 = "https://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>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js to https://cdnjs.cloudflare.com/ajax/libs/turf.js/2.0.2/turf.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js

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