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.