Skip to content

Instantly share code, notes, and snippets.

@martgnz
Last active October 28, 2017 15:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save martgnz/fa8187c716c8a6d788eab7d51095b419 to your computer and use it in GitHub Desktop.
Swiss cantons
border: none
height: 615
license: mit

Simple zoomable map made with Spam.js.

Filling the polygon on hover and setting a higher zoomScale value.

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></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/spamjs@1.1.0/spam.min.js"></script>
<script type='text/javascript'>
var hover = null;
d3.json("switzerland.json", function(error, d) {
topojson.presimplify(d);
var map = new ZoomableCanvasMap({
element: "body",
zoomScale: 0.8,
data: [
{
features: topojson.feature(d, d.objects["switzerland"]),
static: {
paintfeature: function(parameters, d) {
parameters.context.lineWidth = 1 / parameters.scale;
parameters.context.stroke();
}
},
dynamic: {
postpaint: function(parameters) {
if (!hover) return;
parameters.context.beginPath();
parameters.context.lineWidth = 2 / parameters.scale;
parameters.context.fillStyle = "rgb(241, 205, 151)";
parameters.path(hover);
parameters.context.stroke();
parameters.context.fill();
}
},
events: {
hover: function(parameters, d) {
hover = d;
parameters.map.paint();
},
click: function(parameters, d) {
parameters.map.zoom(d);
}
}
}
]
});
map.init();
});
</script>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment