Simple map of Spanish provinces.
This time getting the Canary Islands composite-projections boundary.
New in Spam 1.1.0:
- Easy access to the projection settings via
parameters.projection
.
license: mit | |
height: 650 | |
border: none |
Simple map of Spanish provinces.
This time getting the Canary Islands composite-projections boundary.
New in Spam 1.1.0:
parameters.projection
.<!DOCTYPE html> | |
<meta charset="utf-8" /> | |
<body> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script src="https://unpkg.com/rbush@1.4.3/rbush.js"></script> | |
<script src="https://unpkg.com/d3-composite-projections@0.4.0"></script> | |
<script src="https://unpkg.com/spamjs@1.1.0/spam.min.js"></script> | |
<script type='text/javascript'> | |
var width = 960, | |
height = 650 | |
d3.json("https://martingonzalez.net/es-provinces.v1.json", function(error, d) { | |
if (error) throw error | |
topojson.presimplify(d) | |
var map = new StaticCanvasMap({ | |
element: "body", | |
width: width, | |
height: height, | |
projection: d3.geo.conicConformalSpain() | |
.translate([width / 2 + 300, height / 2 + 110]) | |
.scale(960 * 4.3), | |
data: [{ | |
features: topojson.feature(d, d.objects["provinces"]), | |
static: { | |
paintfeature: function(parameters, d) { | |
parameters.context.lineWidth = 1.5 | |
parameters.context.strokeStyle = "rgb(255,255,255)" | |
parameters.context.stroke() | |
parameters.context.fillStyle = "rgb(225, 220, 220)"; | |
parameters.context.fill() | |
}, | |
postpaint: function(parameters) { | |
var p = new Path2D(parameters.projection.getCompositionBorders()) | |
parameters.context.lineWidth = 0.5 | |
parameters.context.strokeStyle = "#555" | |
parameters.context.stroke(p) | |
} | |
} | |
}] | |
}) | |
map.init() | |
}) | |
</script> |