Simple zoomable map made with Spam.js.
Filling the polygon on hover and setting a higher zoomScale
value.
border: none | |
height: 615 | |
license: mit |
<!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> |