Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 30, 2019 18:26
Show Gist options
  • Save d3noob/5193723 to your computer and use it in GitHub Desktop.
Save d3noob/5193723 to your computer and use it in GitHub Desktop.
World map with zoom / pan and cities
license: mit

A World map with zoom / pan functionality and added markers on cities.

code city country lat lon
ZNZ ZANZIBAR TANZANIA -6.13 39.31
TYO TOKYO JAPAN 35.68 139.76
AKL AUCKLAND NEW ZEALAND -36.85 174.78
BKK BANGKOK THAILAND 13.75 100.48
DEL DELHI INDIA 29.01 77.38
SIN SINGAPORE SINGAPOR 1.36 103.75
BSB BRASILIA BRAZIL -15.67 -47.43
RIO RIO DE JANEIRO BRAZIL -22.90 -43.24
YTO TORONTO CANADA 43.64 -79.40
IPC EASTER ISLAND CHILE -27.11 -109.36
SEA SEATTLE USA 47.61 -122.33
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(200)
.rotate([-180,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
// load and display the cities
d3.csv("cities.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.city;}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", "red");
});
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@harshithabraj
Copy link

its not working fine for me, can anybody send me the zip file of it ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment