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:

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.