HTML5 Canvas World Map SVG Path with KineticJS

This lab demonstrates the SVG Path capabilities of KineticJS by generating an interactive map from an SVG data source.

Instructions: Hover over the countries

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #tango {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
      }
      #container {
        background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
        display: inline-block;
        overflow: hidden;
        height: 262px;
        width: 580px;
        background-position: 1px 1px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 260
      });
      var mapLayer = new Kinetic.Layer({
        y: 20,
        scale: 0.6
      });
      var topLayer = new Kinetic.Layer({
        y: 20,
        scale: 0.6
      });

/*
       * loop through country data stroed in the worldMap
       * variable defined in the worldMap.js asset
       */
      for(var key in worldMap.shapes) {
        var path = new Kinetic.Path({
          data: worldMap.shapes[key],
          fill: '#eee',
          stroke: '#555',
          strokeWidth: 1
        });

path.on('mouseover', function() {
          this.setFill('#111');
          this.moveTo(topLayer);
          topLayer.drawScene();
        });

path.on('mouseout', function() {
          this.setFill('#eee');
          this.moveTo(mapLayer);
          topLayer.draw();
        });

mapLayer.add(path);
      }

stage.add(mapLayer);
      stage.add(topLayer);

</script>
  </body>
</html>

< Scatter Plot Elastic Stars >

More Examples

Modified on November 7th, 2012 by Eric Rowell