-
-
Save marcneuwirth/1814450 to your computer and use it in GitHub Desktop.
Zoom/pan map example: integrates d3.geo with d3.behavior with the aim of producing a map that can be panned and zoomed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html lang="en"> | |
| <head> | |
| <!-- | |
| Zoom/pan map example: integrates d3.geo with d3.behavior with the aim of | |
| producing a map that can be panned and zoomed. | |
| Iain Dillingham, http://dillingham.me.uk/ | |
| --> | |
| <title>Zoom/pan map example</title> | |
| <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.geo.min.js"></script> | |
| <style type="text/css"> | |
| #uk { | |
| fill: #E5F5F9; | |
| stroke: #2CA25F; | |
| stroke-width: 0.5; | |
| } | |
| #axes { | |
| stroke: #BDBDBD; | |
| stroke-width: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script type="text/javascript"> | |
| var w = 960; | |
| var h = 500; | |
| var proj = d3.geo.mercator(); | |
| var path = d3.geo.path().projection(proj); | |
| var t = proj.translate(); // the projection's default translation | |
| var s = proj.scale() // the projection's default scale | |
| var map = d3.select("#vis").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .call(d3.behavior.zoom().on("zoom", redraw)); | |
| var axes = map.append("svg:g").attr("id", "axes"); | |
| var xAxis = axes.append("svg:line") | |
| .attr("x1", t[0]) | |
| .attr("y1", 0) | |
| .attr("x2", t[0]) | |
| .attr("y2", h); | |
| var yAxis = axes.append("svg:line") | |
| .attr("x1", 0) | |
| .attr("y1", t[1]) | |
| .attr("x2", w) | |
| .attr("y2", t[1]); | |
| var uk = map.append("svg:g").attr("id", "uk"); | |
| d3.json("uk.json", function (json) { | |
| uk.selectAll("path") | |
| .data(json.features) | |
| .enter().append("svg:path") | |
| .attr("d", path); | |
| }); | |
| function redraw() { | |
| // d3.event.translate (an array) stores the current translation from the parent SVG element | |
| // t (an array) stores the projection's default translation | |
| // we add the x and y vales in each array to determine the projection's new translation | |
| var tx = t[0] * d3.event.scale + d3.event.translate[0]; | |
| var ty = t[1] * d3.event.scale + d3.event.translate[1]; | |
| proj.translate([tx, ty]); | |
| // now we determine the projection's new scale | |
| proj.scale(s * d3.event.scale); | |
| // redraw the map | |
| uk.selectAll("path").attr("d", path); | |
| // redraw the x axis | |
| xAxis.attr("x1", tx).attr("x2", tx); | |
| // redraw the y axis | |
| yAxis.attr("y1", ty).attr("y2", ty); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment