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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
1 2 3 4 |
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:
|
1 2 3 |
<script type="text/javascript" src="./js/HelpBalloon/lib/prototype/prototype.js"></script> <script type="text/javascript" src="./js/HelpBalloon/lib/scriptaculous/scriptaculous.js"></script> <script type="text/javascript" src="./js/HelpBalloon/src/HelpBalloon.js"></script> |
Meload image dan memberi properti usemap:
|
1 |
<image src="https://blogit.bimosaurus.com/wp-content/uploads/2013/03/petadiy.jpeg" usemap="#petaku"> |
Memasang tag Map Area dengan type poligon, dengan id Map sama seperti yang digunakan di usemap:
|
1 2 3 |
<map name="petaku" id="petaku"> <area shape="poly" coords="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" id="Kulonprogo" alt="Teman saya di Kulonprogo antara lain:<br><ul><li>anu</li><li>anu</li></ul>" href="#" onclick="return false"> </map> |
Memasang Script Control:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script type="text/javascript"> <!-- Event.observe(window, 'load', function(e){ // Bulk create the icons for all <areas> $A(document.getElementsByTagName('area')).each(function(obj){ new HelpBalloon({ title: obj.id, content: obj.alt, icon: obj }); }); }); //--> </script> |
Kira-kira script HTML lengkapnya adalah sebagai berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<html> <head><title>Petaku</title></head> <script type="text/javascript" src="./js/HelpBalloon/lib/prototype/prototype.js"></script> <script type="text/javascript" src="./js/HelpBalloon/lib/scriptaculous/scriptaculous.js"></script> <script type="text/javascript" src="./js/HelpBalloon/src/HelpBalloon.js"></script> <body> <image src="https://blogit.bimosaurus.com/wp-content/uploads/2013/03/petadiy.jpeg" usemap="#petaku"> <map name="petaku" id="petaku"> <area shape="poly" coords="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" id="Kulonprogo" alt="Teman saya di Kulonprogo antara lain:<br><ul><li>anu</li><li>anu</li></ul>" href="#" onclick="return false"> <area shape="poly" coords="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" id="mBantul" alt="Teman saya di mBantul antara lain:<br><ul><li>anu</li><li>anu</li></ul>" href="#" onclick="return false"> <area shape="poly" coords="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 id="Kota Jogja" alt="Teman saya di Kota Jogja antara lain:<br><ul><li>anu</li><li>anu</li></ul>" href="#" onclick="return false"> </map> <script type="text/javascript"> <!-- Event.observe(window, 'load', function(e){ // Bulk create the icons for all <areas> $A(document.getElementsByTagName('area')).each(function(obj){ new HelpBalloon({ title: obj.id, content: obj.alt, icon: obj }); }); }); //--> </script> </body> </html> |
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”