Skip to content

Instantly share code, notes, and snippets.

@martgnz
Last active January 22, 2017 10:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martgnz/42a335b8b01f5f7e8dc35f0eef9365a6 to your computer and use it in GitHub Desktop.
Save martgnz/42a335b8b01f5f7e8dc35f0eef9365a6 to your computer and use it in GitHub Desktop.
Spanish Provinces
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:

  • Easy access to the projection settings via 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment