Planets Image Map

Instructions: Mouse over the planets to see their names and use the check box to show and hide the map overlay.

Konva Planets Image Mapview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Planets Image Map Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
#controls {
position: absolute;
left: 10px;
top: 10px;
z-index: 99999;
}
label {
color: white;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="controls">
<input type="checkbox" id="checkbox">
<label> Show map overlay </label>
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function writeMessage(message) {
text.setText(message);
messageLayer.draw();
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'white'
});
var planetsLayer = new Konva.Layer();
var circlesLayer = new Konva.Layer();
var messageLayer = new Konva.Layer();
var planets = {
Mercury: {
x: 46,
y: 126,
radius: 32
},
Venus: {
x: 179,
y: 126,
radius: 79
},
Earth: {
x: 366,
y: 127,
radius: 85
},
Mars: {
x: 515,
y: 127,
radius: 45
}
};
var imageObj = new Image();
imageObj.onload = function() {
// draw shape overlays
for(var pubKey in planets) {( function() {
var key = pubKey;
var planet = planets[key];
var planetOverlay = new Konva.Circle({
x: planet.x,
y: planet.y,
radius: planet.radius
});
planetOverlay.on('mouseover', function() {
writeMessage(key);
});
planetOverlay.on('mouseout', function() {
writeMessage('');
});
circlesLayer.add(planetOverlay);
}());
}
var checkbox = document.getElementById('checkbox');
checkbox.addEventListener('click', function() {
var shapes = circlesLayer.getChildren();
// flip show property
for(var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
var f = shape.getFill();
shape.setFill(f == 'red' ? null : 'red');
}
circlesLayer.draw();
}, false);
messageLayer.add(text);
stage.add(planetsLayer);
stage.add(circlesLayer);
stage.add(messageLayer);
// draw planets
var planetsContext = planetsLayer.getContext();
planetsContext.drawImage(imageObj, 0, 0);
};
imageObj.src = '/assets/planets.png';
</script>
</body>
</html>