I am using this blog to learn new stuff about mapping. I have been testing
Kartograph, and now I'm starting with
d3.js.
I wanted to post a first tutorial about mapping with it, but I have found one which, in my opinion, has everything:
http://bost.ocks.org/mike/map/ Besides, the entry links with
many good examples.
So I will post how to display a rotating globe, with the two possibilities: SVG and Canvas. I didn't know how to do it, and haven't found a tutorial about that.
As usual, all the code is available at GitHub, where you can find also all the working examples:
Getting the data
In this case, I have used
the file used in the d3.js docs. The data must be in the
TopoJSON format to work with the example. How to convert a regular GeoJSON into a TopoJSON is also covered
in the recommended article.
Basic map using SVG
SVG is an XML vector format, so all the lines and polygons drawn are kept as shapes and can be, therefore, manipulated and styled after their creation.
In
this example, a map like the one at the picture above is generated.
var diameter = 320,
radius = diameter/2;
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90)
.rotate([10,0,0]);
var svg = d3.select("#map").append("svg")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection);
d3.json("./world-110m.json", function(error, world) {
var globe = {type: "Sphere"};
svg.append("path")
.datum(globe)
.attr("class", "foreground")
.attr("d", path);
var land = topojson.object(world, world.objects.land);
svg.insert("path")
.datum(topojson.object(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
});
- The projection variable is set using an ortographic projection, just to see the globe.
- The scale is set from the radius to fit all the globe in the SVG size.
- The translate method is a bit tricky. If it's not used, the center of the globe will be at the upper-left corner.
- The clipAngle method forces the script to stop drawing at 90 grades. If the angle is not set, the land that is supposed to be hidden is drawn. Just try changing the value.
- The rotate method is not necessary, but I have used it to show how it works. The array represents the three axis. So in this case the globe is rotated in the east-west direction.
- To create the SVG element, the div with the id=map is selected, and the size is set to the diameter of the globe so the globe fits the space.
- The path element is created, with the projection defined before. This is the object that will be used to project the geographic coordinates into the SVG coordinates.
- Then, the TopoJSON file is loaded, and only after this is done, the map is drawn.
- And here is where the map is drawn. First, the globe is drawn, with a dark border and a blue background that represents the sea. Note that the class foreground is assigned. At the top of the file a style is defined for this class, the same way than in a regular html element.
Note how a globe is defined, as a sphere type and assigning it with the datum method.
- Then the land elements of the TopoJSON are drawn (using the datum method), using land as the class.
Basic map using Canvas
The canvas element is part of HTML5, and allows to draw elements on a raster. It's different from SVG, since once a shape is drawn, there is no way to modify it or style it. And no event handlers on every shape can be set. The memory use of a Canvas is then much lower than the one used by the same drawing using SVG, since there is no DOM to handle.
The Canvas element is better for non-static images, like a rotating globe. This is why most of the map animatinos use the Canvas option.
var diameter = 320,
radius = diameter/2;
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90)
.rotate([10,0,0]);
var canvas = d3.select("#map").append("canvas")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection);
d3.json("./world-110m.json", function(error, world) {
var land = topojson.object(world, world.objects.land),
globe = {type: "Sphere"};
context = canvas.node().getContext("2d");
context.strokeStyle = '#766951';
context.fillStyle = '#d8ffff';
context.beginPath(), path.context(context)(globe), context.fill(), context.stroke();
context.fillStyle = '#d7c7ad';
context.beginPath(), path.context(context)(land), context.fill(), context.stroke();
});
The basic parts are more or less the same, but:
- Of course, no SVG element is generated, but a canvas one
- The stroke and fill colors are set before drawing the elements using strokeStyle and fillStyle. A light blue for the sea and a light brown for the land.
- Every time a new kind of element has to be drawn, a path is created with beginPath, and a projection is assigned to it.
- The strokes and polygons are drawn using different methods (fill and stroke)
Rotating map using SVG
One of the cool things about
D3.js is to make things move.
In this example, the projection will be given a rotation to the globe seems to be rotating. The JavaScript part, then must be changed this way:
var diameter = 320,
radius = diameter/2,
velocity = .01,
then = Date.now();
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90);
var svg = d3.select("#map").append("svg")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection);
var globe = {type: "Sphere"};
svg.append("path")
.datum(globe)
.attr("class", "foreground")
.attr("d", path);
d3.json("./world-110m.json", function(error, world) {
var land = topojson.object(world, world.objects.land),
globe = {type: "Sphere"};
svg.insert("path", ".graticule")
.datum(topojson.object(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
svg.selectAll("path")
.attr("d", path.projection(projection));
});
});
- The SVG paths are inserted the same way, but a timer is set after appending the land zones (the globe stays with the same shape, so no rotatino is needed)
- The timer changes the angle in the step defined in the velocity variable, and tht projection is changed to this angle.
- The path is modified with the path that has the new projection.
Using SVG, no path has to be re-drawn.
Rotating map using Canvas
var diameter = 320,
radius = diameter/2,
velocity = .01,
then = Date.now();
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90);
var canvas = d3.select("#map").append("canvas")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection);
d3.json("./world-110m.json", function(error, world) {
var land = topojson.object(world, world.objects.land),
globe = {type: "Sphere"};
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
context = canvas.node().getContext("2d");
context.clearRect(0, 0, diameter, diameter);
context.strokeStyle = '#766951';
context.fillStyle = '#d8ffff';
context.beginPath(), path.context(context)(globe), context.fill();
context.beginPath(), path.context(context)(globe), context.stroke();
context.fillStyle = '#d7c7ad';
context.beginPath(), path.context(context)(land), context.fill();
context.beginPath(), path.context(context)(land), context.stroke();
});
});
- After loading the land zones, the timer is set.
- In each step, the angle is calculated like in the SVG, but then, all the Canvas is cleared with the method clearRect.
- The map is re-drawn again like in the static example.
