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.6/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>