HTML5 Canvas Interactive Building Map

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

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: black;
        background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
        background-position: 1px 0px;
        background-repeat: no-repeat;
        width: 580px;
        height: 327px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      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, y);
        tooltip.show();
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 325
      });
      var shapesLayer = new Kinetic.Layer();
      var tooltipLayer = new Kinetic.Layer();
      
      var tooltip = new Kinetic.Label({
        opacity: 0.75,
        visible: false,
        listening: false,
        text: {
          text: '',
          fontFamily: 'Calibri',
          fontSize: 18,
          padding: 5,
          fill: 'white'
        },
        rect: {
          fill: 'black',
          pointerDirection: 'down',
          pointerWidth: 10,
          pointerHeight: 10,
          lineJoin: 'round',
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffset: 10,
          shadowOpacity: 0.5
        }
      });
      
      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 Kinetic.Polygon({
          points: points,
          fill: area.color,
          opacity: 0,
          // custom attr
          key: key
        });

shapesLayer.add(shape);

}

stage.add(shapesLayer);
      stage.add(tooltipLayer);

stage.on('mouseover', function(evt) {
        var shape = evt.targetNode;
        shape.setOpacity(0.5);
        shapesLayer.draw();
      });
      stage.on('mouseout', function(evt) {
        var shape = evt.targetNode;
        shape.setOpacity(0);
        shapesLayer.draw();
        tooltip.hide();
        tooltipLayer.draw();
      });
      stage.on('mousemove', function(evt) {
        var shape = evt.targetNode;
        var mousePos = stage.getMousePosition();
        var x = mousePos.x;
        var y = mousePos.y - 5;
        updateTooltip(tooltip, x, y, shape.attrs.key);
        tooltipLayer.batchDraw();
      }); 
      
    </script>
  </body>
</html>

< Multi-Touch Stage Interactive Flower >

More Examples

Modified on November 7th, 2012 by Eric Rowell