[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:

Kulonprogo 146,266,24,207,31,209,34,207,40,212,41,206,45,205,45,194,51,183,59,161,73,152,82,140,86,141,84,138,94,123,97,123,97,114,100,107,97,104,101,88,88,79,93,73,103,65,108,64,114,65,122,64,127,63,133,64,141,65,146,64,150,64,156,66,161,66,163,66,169,62,174,63,177,68,176,79,175,87,179,101,173,98,155,105,152,112,150,122,151,137,156,150,160,154,154,159,159,172,149,177,160,183,170,193,174,196,179,206,181,229,169,228,163,239,146,264

Sleman
157,171,156,160,160,156,151,141,150,126,150,117,155,109,156,107,161,106,169,99,175,99,177,99,199,68,258,21,281,5,287,10,288,22,294,41,300,79,311,136,317,136,326,145,335,154,340,153,339,167,322,173,320,168,313,168,294,169,283,169,274,175,268,166,269,148,264,144,252,147,227,135,225,146,215,155,207,159,205,163,208,168,203,165,191,176,190,167,188,164,189,151,187,143,178,155,176,158,175,165,172,161,168,165,169,168,166,172,165,168,160,173

Kota Jogja
226,136,224,150,221,159,225,163,226,168,231,171,237,170,239,171,247,172,247,167,251,174,256,172,257,168,255,156,252,153,253,147,250,147,250,144,246,145,226,137

Bantul
220,288,146,266,167,234,172,228,178,232,180,229,183,211,174,196,150,178,162,169,163,173,167,168,166,166,171,161,172,164,174,164,174,159,187,145,189,151,187,157,186,164,190,166,189,174,191,174,195,171,198,170,203,166,207,168,206,162,215,156,217,154,227,137,225,152,223,161,226,163,227,167,235,169,241,170,246,171,247,169,257,173,258,164,254,148,260,147,267,145,268,163,271,169,274,175,279,169,285,168,293,169,298,169,307,169,310,170,315,169,321,170,326,173,307,176,295,193,299,199,302,209,310,214,310,228,309,236,299,238,299,253,294,253,296,249,293,243,288,246,287,251,287,246,282,242,280,251,266,257,252,253,255,260,240,260,237,255,234,260,225,259,227,264,215,271,218,286

Gunungkidul
220,287,214,273,220,268,226,266,227,259,236,255,243,261,255,259,253,253,259,256,271,255,276,252,280,251,282,242,286,243,282,251,287,254,290,246,293,246,293,255,301,253,301,246,300,240,305,239,312,209,301,207,296,194,306,179,316,178,323,177,327,173,337,169,341,152,342,149,344,153,349,145,354,145,361,147,360,155,364,156,370,158,375,153,386,155,394,153,402,148,407,155,415,146,418,156,425,159,434,157,438,148,442,151,446,152,453,157,457,163,463,167,465,170,469,160,481,165,480,196,471,216,471,255,463,287,476,314,482,337,480,358,482,368,489,365,498,355,505,351,507,358,500,363,499,369,500,379,505,373,511,375,509,389,507,392,489,393,366,388,236,338,223,289

Lho dapat darimana? Silakan melihat pada posting di https://blogit.bimosaurus.com/2013/03/16/berkreasi-dengan-peta-html-dan-tag-map-area-bagian-2/ dengan demonya yang ada pada URL : https://blogit.bimosaurus.com/demo/petajogja2/. Data lainnya adalah sebuah gambar peta kota jogja yang ada pada URL https://blogit.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:

index.html
images/
js/
   /HelpBallon/

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:


Teman saya di Kulonprogo antara lain:<br><ul><li>anu</li><li>anu</li></ul>

Memasang Script Control:

  

Kira-kira script HTML lengkapnya adalah sebagai berikut:


Petaku

      
		
		




Teman saya di Kulonprogo antara lain:<br><ul><li>anu</li><li>anu</li></ul>

Teman saya di mBantul antara lain:<br><ul><li>anu</li><li>anu</li></ul>

Teman saya di Kota Jogja antara lain:<br><ul><li>anu</li><li>anu</li></ul>





  


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 *