This example uses d3.behavior.zoom with SVG transforms for map panning and zooming.
forked from mbostock's block: Map Pan & Zoom I
license: gpl-3.0 |
This example uses d3.behavior.zoom with SVG transforms for map panning and zooming.
forked from mbostock's block: Map Pan & Zoom I
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
background: #fff; | |
} | |
#sphere { | |
fill: #000; | |
} | |
path { | |
fill: none; | |
stroke: #000; | |
stroke-width: 1; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
comp-op: plus; | |
vector-effect: non-scaling-stroke; | |
} | |
.world-10m { | |
stroke: #FF0; | |
} | |
.world-50m { | |
stroke: #0FF; | |
} | |
.world-110m { | |
stroke: #F0F; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
</style> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<body> | |
<script> | |
var width = 960, | |
height = 560; | |
var projection = d3.geo.robinson() | |
.translate([width / 2, height / 2]) | |
.scale((width - 1) / 2 / Math.PI); | |
var zoom = d3.behavior.zoom() | |
.scaleExtent([1, 8]) | |
.on("zoom", zoomed); | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
var g = svg.append("g"); | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height); | |
svg | |
.call(zoom) | |
.call(zoom.event); | |
g.append("path") | |
.datum({type: "Sphere"}) | |
.attr("id", "sphere") | |
.attr("d", path); | |
[ | |
"world-10m.json", | |
"world-50m.json", | |
"world-110m.json" | |
].forEach(function(scale) { | |
d3.json(scale, function(error, world) { | |
if (error) throw error; | |
var inner_g = g.append("g"); | |
var classname = scale.split('.')[0]; // Trim '.json' from the class name | |
inner_g.append("path") | |
.datum(topojson.merge(world, world.objects.countries.geometries)) | |
.attr("class", classname) | |
.attr("d", path); | |
inner_g.append("path") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", classname) | |
.attr("d", path); | |
}); | |
}); | |
function zoomed() { | |
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
} | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)