Membuat Peta Geografis HTML dengan SVG

lampung map SVG

Scalable Vector Graphics (SVG) adalah sebuah file gambar yang berformat vektor, baik berupa bentuk sebuah garis, stroke, diagram, peta, atau gambar-gambar ilustrasi lainnya. Dalam penulisannya SVG menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. Berikut adalah jenis tag yang digunakan untuk membuat SVG.

<svg>: Memulai gambar SVG di HTML
<text>: Mendefinisikan sebuah teks
<rect>: Mendefinisikan sebuah persegi
<path>: Mendefinisikan sebuah path
<filter>: Mendefinisikan filter atau bahkan kombinasinya
<g>: Membuat sebuah grup yang terdiri dari elemen-elemen
<a>: Mendefinisikan sebuah hyperlink
<line>: Mendefinisikan sebuah garis
<circle>: Membuat gambar lingkaran
<ellipse>: Membuat gambar elips
<polyline>:Membuat gambar garis banyak
<polygone>: Membuat gambar poligon

Dalam tutorial ini kita akan membuat SVG dengan bentuk Map interaktif. Gambar peta bisa anda buat sesuai dengan selera anda, yang harus diingat adalah file extensi penyimpanan harus berupa .svg

Buat desain vector peta
Langkah awal adalah membuat desain vector peta dan untuk dapat membuat desain peta anda bisa menggunakan Coreldraw atau Adobe llustrator namun jika anda ingin mendesain secara online dan gratis anda bisa menggunakan vectr.

Convert SVG ke HTML code
Untuk mempermudah pekerjaan dalam pembuatan project ini saya menggunakan SVGOMG sebagai converter gambar SVG ke HTML.
Ini adalah pilihan optional, anda juga bisa langsung mendesain SVG di HTML tanpa perlu menggunakan converter.
Berikut adalah beberapa baris code hasil convert SVG milik saya

<path d="M577.38 243.94c3.44-5.7 5.35-8.87 5.74-9.51-3.52-11.99-2.19-19.28 1.89-30.62-3.87-1.56-1.45-1.53-5.74 0-.95-.95-8.59-8.55-9.55-9.51.92-2.15 1.22-3 1.9-5.29" id="g"/>

Buat Halaman HTML
Setelah mendapatkan code SVG tadi kita buat halaman HTML dengan sedikit penambahan pada code hasil convert. Saya akan menambahkan informasi untuk setiap daerah yang aktif (diklik) dimana didalamnya terdapat gambar tujuan pariwisata dan deskripsi wilayah. Berikut adalah potongan code HTML milik saya.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="lampung-map">
<g id="Bandar_Lampung" style='fill: #203c63'>
      <title>Kota Bandar Lampung</title>
      <desc>
        <image xlink:href="puncak_mas.jpg" alt=""></image>
        <p>Adalah ibu kota dari Provinsi Lampung dan merupakan kota tebesar di Provinsi Lampung. Pariwisata yang tengah ramai diminati saat ini adalah Puncak Mas Sukadanaham dari sini kita bisa melihat pemandangan alam.</p>
      </desc>
      <path d="M489.9 422.2c.15-.4.25-.65.29-.75.24-.63.76-1.12 1.41-1.32.13-.05.47-.16 1.02-.33h1.16c.43 2.16.16h1.91c.72 0 1.45-.05 2.16-.16.65-.1.81-.12 1.28-.2 1.3-.19 2.61-.17.2.56z" />
</g>
<div id="provinceInfo"></div>
</svg>

Disini saya membuat group <g>dan memberikan inisial id untuk masing-masing daerah.
mmenyatakan move m489.9 berarti path dimulai dari titik x=489 dan y=9
hmenyatakan horizontal, atau menggambar garis horizontal
zmenyatakan kembali ke titik awal.

Buat style CSS
Dihalaman css kita buat style sesuai denganidpada tag <svg>

#lampung-map {
   padding-top: 15px;
   margin-left: -25px;
}
#provinceInfo {
  position: absolute;
  top: 3%;
  right: 4%;
  width: 42%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}

Buat halaman javascript untuk interaksi pada svg
Untuk dapat membuat desain peta geografis yang interaktif kita membutuhkan sedikit bantuan dari javascript. Berikut code javascriptnya

var lampungmap = document.getElementById("lampung-map"),
    provinceInfo = document.getElementById("provinceInfo"),
    allProvinces = lampungmap.querySelectorAll("g");
    lampungmap.addEventListener("click", function(e){ 
     var province = e.target.parentNode;
     if(e.target.nodeName == "path") {
      for (var i=0; i < allProvinces.length; i++) {
       allProvinces[i].classList.remove("active");
      }
      province.classList.add("active");
      var provinceName = province.querySelector("title").innerHTML,
      provinceSelect = province.querySelector("desc p");
      sourceImg = province.querySelector("img"),
      imgPath = "./images/";
      provinceInfo.innerHTML = "";
      provinceInfo.insertAdjacentHTML("afterbegin", "<img src="+    
      imgPath + sourceImg.getAttribute('xlink:href')+"
      alt='"+sourceImg.getAttribute('alt')+"'><h1>"+
      provinceName+"</h1><p>"+provinceSelect.innerHTML+"</p>");
      provinceInfo.classList.add("show");
    }
   })

Karena SVG tidak mendukung :fokusmaka dapat menggunakan clasList("active”) yang digunakan untuk menunjukkan provinsi / wilayah yang sedang aktif (diklik). Untuk dapat menampilkan gambar menggunakan imgPath. Kemudian untuk menampilkan semua informasi secara bersamaan menggunakan insertAdjacentHTML dan penambahan elemen HTML didalamnya.

Kesimpulan
Untuk dapat menggunakanclasList("active)" kita perlu mendeklarasikan tag <g> yang didalamnya terdapat id untuk masing-masing daerah.
Sampai saat ini SVG mendukung hampir disemua browser namun masih bermasalah pada IE versi 8 kebawah.

Hasil project diatas dapat anda download di Bitbucket dan hasil dilihat dibawah ini.