Interactive Building Map

Instructions: hover over sections of the building to see its description

Konva Interactive Building Map Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Interactive Building Map Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
#container {
background: black url("/assets/line-building.png") no-repeat 1px 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function getData() {
return {
'1st Floor': {
color: 'blue',
points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274]
},
'2nd Floor': {
color: 'red',
points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171]
},
'3rd Floor': {
color: 'yellow',
points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]
},
'Gym': {
color: 'green',
points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283]
}
};
}
function updateTooltip(tooltip, x, y, text) {
tooltip.getText().setText(text);
tooltip.setPosition({
x : x,
y : y
});
tooltip.show();
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var shapesLayer = new Konva.Layer();
var tooltipLayer = new Konva.Layer();
var tooltip = new Konva.Label({
opacity: 0.75,
visible: false,
listening: false
});
tooltip.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltip.add(new Konva.Text({
text: '',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
tooltipLayer.add(tooltip);
// get areas data
var areas = getData();
// draw areas
for(var key in areas) {
var area = areas[key];
var points = area.points;
var shape = new Konva.Line({
points: points,
fill: area.color,
opacity: 0,
closed : true,
// custom attr
key: key
});
shapesLayer.add(shape);
}
stage.add(shapesLayer);
stage.add(tooltipLayer);
stage.on('mouseover', function(evt) {
var shape = evt.target;
if (shape) {
shape.setOpacity(0.5);
shapesLayer.draw();
}
});
stage.on('mouseout', function(evt) {
var shape = evt.target;
if (shape) {
shape.setOpacity(0);
shapesLayer.draw();
tooltip.hide();
tooltipLayer.draw();
}
});
stage.on('mousemove', function(evt) {
var shape = evt.target;
if (shape) {
var mousePos = stage.getPointerPosition();
var x = mousePos.x;
var y = mousePos.y - 5;
updateTooltip(tooltip, x, y, shape.attrs.key);
tooltipLayer.batchDraw();
}
});
</script>
</body>
</html>