[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips

Jika pada beberapa posting lalu, telah dapat dipelajari bagaimana cara menyusun koordinat HTML dengan menggunakan Javascript, Ajax dan PHP, maka kali ini akan dicoba memanfaatkan peta tersebut dan membubuhkan keterangan dengan bentuk popup. Asyik bukan?
Misal saya memiliki data koordinat peta HTML untuk Provinsi DI Yogyakarta sebagai berikut:

Lho dapat darimana? Silakan melihat pada posting di http://bimosaurus.com/2013/03/16/berkreasi-dengan-peta-html-dan-tag-map-area-bagian-2/ dengan demonya yang ada pada URL : http://bimosaurus.com/demo/petajogja2/. Data lainnya adalah sebuah gambar peta kota jogja yang ada pada URL http://bimosaurus.com/wp-content/uploads/2013/03/petadiy.jpeg.



Selanjutnya saya memanfaatkan sebuah cara pembuatan popup dengan menggunakan gabungan scriptaculous, prototype dll yang tergabung dalam sebuah library : HelpBalloon. Segala macam dokumentasi dan API dapat dilihat di : http://www.beauscott.com/examples/help_balloons/doc/examples.php. Downloadlah source HelpBallon. Letakkan dalam direktori js. Sehingga struktur yang terbentuk adalah sebagai berikut:

Karena kita akan memanfaatkan beberapa fitur gambar dari helpbaloon sebagai latar belakang, Copy lah semua gambar yang ada pada direktori images HelpBalloon, dikopikan ke images kita sendiri (naik satu direktori).

– - – -

Langkah selanjutnya adalah :

  • Meload script yang diperlukan
  • Meload css
  • Meload image dan memberi properti usemap
  • Memasang tag MAP AREA dengan type poligon
  • Memasang script control

Meload script:

Meload image dan memberi properti usemap:

Memasang tag Map Area dengan type poligon, dengan id Map sama seperti yang digunakan di usemap:

Memasang Script Control:

Kira-kira script HTML lengkapnya adalah sebagai berikut:

Cobalah melakukan klik pada Kabupaten Kulonprogo, Bantul dan Kota Jogja. Setelah itu, lanjutkan untuk Kabupaten Sleman dan Gunungkidul. Asyik bukan? Selamat mencoba.

One thought on “[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">