Décimo ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .
Dibuja el mismo mapa simple usado en el ejemplo de mapa simple usando Canvas, añadiendo la esfera que hace de fondo del mapan de forma correcta.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| /*var projection = d3.geo.orthographic() | |
| .scale(250) | |
| .translate([width / 2, height / 2]) | |
| .clipAngle(90);*/ | |
| /* | |
| var projection = d3.geo.stereographic() | |
| .scale(245) | |
| .translate([width / 2, height / 2]) | |
| .rotate([-20, 0]) | |
| .clipAngle(180 - 1e-4) | |
| .clipExtent([[0, 0], [width, height]]) | |
| .precision(.1); | |
| */ | |
| var projection = d3.geo.august() | |
| .scale(50) | |
| .translate([width / 2, height / 2]) | |
| .precision(0.1); | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var context = canvas.node().getContext("2d"); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .context(context); | |
| d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) { | |
| var land = topojson.object(data, data.objects.land); | |
| var globe = {type: "Sphere"}; | |
| context.fillStyle = '#d8ffff'; | |
| context.beginPath(); | |
| path(globe); | |
| context.fill(); | |
| context.strokeStyle = '#aaa'; | |
| context.fillStyle = '#ccc'; | |
| context.beginPath(); | |
| path(land); | |
| context.fill(); | |
| context.beginPath(); | |
| path(land); | |
| context.stroke(); | |
| }); | |
| </script> | |
