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://unpkg.com/[email protected]/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.text(message);
}

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.fill();
shape.fill(f == 'red' ? null : 'red');
}
},
false
);

messageLayer.add(text);
stage.add(planetsLayer);
stage.add(circlesLayer);
stage.add(messageLayer);

// draw planets
var planetsImage = new Konva.Image({
image: imageObj,
});
planetsLayer.add(planetsImage);
};
imageObj.src = '/assets/planets.png';
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.