This is a simple setup of Leaflet (via Mapbox) with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations
Nice overview of using d3 + Leaflet. I found this slightly simpler to use than Mike's classic post.
Built with blockbuilder.org
forked from enjalot's block: dots on a map: setup-gl
forked from enjalot's block: topojson on a map: setup-gl
forked from enjalot's block: topojson on a map: buffers
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| #map { | |
| position:absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| svg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .land { | |
| stroke: #111; | |
| stroke-opacity: 1; | |
| fill: #efe93d; | |
| fill-opacity: 0.1; | |
| } | |
| .river { | |
| stroke: #111; | |
| fill: none; | |
| stroke-width: 1px; | |
| } | |
| .caption { | |
| background-color: rgba(100, 200, 200, 0.8); | |
| border: 1px solid #444; | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| padding: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="caption"></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw' | |
| //Setup mapbox-gl map | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc', | |
| center: [-0.1,51.5119112], | |
| zoom: 11.5, | |
| }) | |
| map.scrollZoom.disable() | |
| map.addControl(new mapboxgl.Navigation()); | |
| // Setup our svg layer that we can manipulate with d3 | |
| var container = map.getCanvasContainer() | |
| var svg = d3.select(container).append("svg") | |
| var path = d3.geo.path() | |
| .projection(function(lonlat, i) { | |
| var p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])) | |
| return [p.x, p.y]; | |
| }) | |
| d3.json("london-neighborhoods.topojson", function(err, london) { | |
| d3.json("london-rivers.topojson", function(err, rivers) { | |
| //console.log(london.objects['london-neighborhoods-slim']) | |
| var neighborhoods = topojson.feature(london, london.objects['london-neighborhoods-slim']); | |
| var buffered = buffer(neighborhoods, -0.0005, 'degrees') | |
| var riverFeatures = topojson.feature(rivers, rivers.objects['london-rivers']); | |
| var thames = getThames(riverFeatures, 80, 'meters') | |
| //var buffered = buffer(features, -0.0005, 'degrees') | |
| //var sliced = difference(neighborhoods, thames) | |
| //console.log("sliced", sliced) | |
| //console.log("original", features) | |
| //console.log("buffered", buffered) | |
| var land = svg.append("path") | |
| .datum(buffered) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| /* | |
| var riversvg = svg.append("path") | |
| .datum(thames) | |
| .attr("class", "river") | |
| .attr("d", path); | |
| */ | |
| function render() { | |
| land.attr("d", path) | |
| //riversvg.attr("d", path) | |
| } | |
| // re-render our visualization whenever the view changes | |
| map.on("viewreset", function() { | |
| render() | |
| }) | |
| map.on("move", function() { | |
| render() | |
| }) | |
| // render our initial visualization | |
| render(); | |
| map.on("click", function(e) { | |
| console.log("click", e); | |
| var p = { | |
| 'type': 'Feature', | |
| 'geometry': { | |
| 'type': 'Point', | |
| 'coordinates': [e.lngLat.lng, e.lngLat.lat] | |
| } | |
| }; | |
| features.features.forEach(function(feature) { | |
| //buffered.features.forEach(function(feature) { | |
| var isInside = turf.inside(p, feature); | |
| if(isInside) { | |
| console.log(feature); | |
| d3.select(".caption").text(feature.properties.name) | |
| } | |
| }) | |
| }) | |
| }) }) | |
| // from http://blockbuilder.org/armollica/c6c97710ac404e67b6bf | |
| function buffer(featureCollection, distance, unit) { | |
| var features = featureCollection.features | |
| .map(function(feature) { | |
| var buffered = null; | |
| try { | |
| buffered = turf.buffer(feature, distance, unit).features[0]; | |
| buffered.properties = feature.properties; | |
| } catch(e) { console.error(e); } | |
| return buffered; | |
| }) | |
| .filter(function(feature) { return feature !== null; }); | |
| return { | |
| type: "FeatureCollection", | |
| features: features, | |
| properties: null | |
| }; | |
| } | |
| function getThames(featureCollection, distance, unit) { | |
| var thames = featureCollection.features.filter(function(feature) { | |
| if(feature.properties.name === "River Thames") | |
| return true; | |
| return false; | |
| }) | |
| console.log("thames", thames); | |
| var fc = { | |
| type: "FeatureCollection", | |
| features: thames, | |
| properties: null | |
| }; | |
| return buffer(fc, distance, unit) | |
| } | |
| function difference(fcA, fcB) { | |
| var features = []; | |
| fcA.features.forEach(function(a) { | |
| fcB.features.forEach(function(b) { | |
| try { | |
| var diff = turf.erase(a,b); | |
| features.push(diff); | |
| } catch(e) { | |
| } | |
| }) | |
| }) | |
| return { | |
| type: "FeatureCollection", | |
| features: features, | |
| properties: null | |
| } | |
| } | |
| </script> | |
| </body> |
