HTML5 Canvas World Map

Share kali ini saya tidak memberikan tutorial lengkap. HTML5 canvas peta dunia (world map) hanya untuk menghiasi blog saja.

berikut HTML,CSS dan javascript yang di gunakan.

DEMO

HTML Markup yang di gunakan pakai id="container" .

<div id="container"></div>

rubah tampilan jika anda kurang menyukai warna dan CSS nya.

canvas {
        border: 1px solid #9C9898;
      }
      #tango {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
      }
      #container {
        background-image: url('https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/map-background.png');
        display: inline-block;
        overflow: hidden;
        height: 262px;
        width: 580px;
        background-position: 1px 1px;
      }

gunakan semua javascript di bawah ini tanpa mengurangi satu code pun .

<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/kinetic-v3.10.4.js"></script>
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/worldMap.js"></script>

Atur lebar dan tinggi pada script sesuai keinginan. jika pada template ada id="container" yang sama maka anda bisa ganti pada script di bawah ini.

<script type='text/javascript'>
//<![CDATA[
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 260
        });
        var mapLayer = new Kinetic.Layer({
          y: 20,
          scale: 0.6
        });
        for(var key in worldMap.shapes) {
          var path = new Kinetic.Path({
            data: worldMap.shapes[key],
            fill: '#ccc',
            stroke: '#555',
            strokeWidth: 1
          });
          path.on('mouseover', function() {
            this.setFill('red');
            mapLayer.draw();
          });
          path.on('mouseout', function() {
            this.setFill('#ccc');
            mapLayer.draw();
          });
          mapLayer.add(path);
        }
        stage.add(mapLayer);
      };
//]]>
</script>

---

Post By : denzdii

Reference : HTML5 Canvas