| license: mit |
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: dots on a map: setup-gl
forked from enjalot's block: WWSD #11: Mapbox-gl + d3 SVG overlay
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.0/mapbox-gl.css' rel='stylesheet' /> | |
| <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%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoicmNuIiwiYSI6Img2bS1ZTzAifQ.5JQpWlniPX4Y7wX_wn0F0w' | |
| //Setup mapbox-gl map | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/rcn/ciyt1qkl900202rqm6yg72vhb', | |
| center: [-0.1,51.5119112], | |
| zoom: 1.2, | |
| }) | |
| //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") | |
| // we calculate the scale given mapbox state (derived from viewport-mercator-project's code) | |
| // to define a d3 projection | |
| function getD3() { | |
| var bbox = document.body.getBoundingClientRect(); | |
| var center = map.getCenter(); | |
| var zoom = map.getZoom(); | |
| // 512 is hardcoded tile size, might need to be 256 or changed to suit your map config | |
| var scale = (512) * 0.5 / Math.PI * Math.pow(2, zoom); | |
| var d3projection = d3.geo.mercator() | |
| .center([center.lng, center.lat]) | |
| .translate([bbox.width/2, bbox.height/2]) | |
| .scale(scale); | |
| return d3projection; | |
| } | |
| // calculate the original d3 projection | |
| var d3Projection = getD3(); | |
| var path = d3.geo.path() | |
| d3.csv("rims.csv", function(err, data) { | |
| var dots = g.selectAll("circle.dot") | |
| .data(data) | |
| dots.enter().append("circle").classed("dot", true) | |
| .attr("r", 1) | |
| .style({ | |
| fill: "#0082a3", | |
| "fill-opacity": 0.6, | |
| stroke: "#004d60", | |
| "stroke-width": 1 | |
| }) | |
| .transition().duration(1000) | |
| .attr("r", 6) | |
| function render() { | |
| d3Projection = getD3(); | |
| path.projection(d3Projection) | |
| dots | |
| .attr({ | |
| cx: function(d) { | |
| var x = d3Projection(d.geometry.coordinates)[0]; | |
| return x | |
| }, | |
| cy: function(d) { | |
| var y = d3Projection(d.geometry.coordinates)[1]; | |
| return y | |
| }, | |
| }) | |
| } | |
| // re-render our visualization whenever the view changes | |
| map.on("viewreset", function() { | |
| render() | |
| }) | |
| map.on("move", function() { | |
| render() | |
| }) | |
| // render our initial visualization | |
| render() | |
| }) | |
| </script> | |
| </body> |
| office | lat | lon | |
|---|---|---|---|
| kl | 3.139003 | 101.686855 | |
| nairobi | -1.292066 | 36.821946 | |
| panama | 9.028102 | -79.484711 | |
| beirut | 33.893791 | 35.501777 | |
| budapest | 47.497912 | 19.040235 | |
| geneva | 46.204391 | 6.143158 |