Berkreasi dengan Peta HTML dan tag Map Area [Bagian 1]

HTML, telah menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar. Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>. Tag MAP, terdiri dari beberapa pilihan, antara lain adalah untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) dan penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source. Sintaks map dan area adalah sebagai berikut.

Some Alt


  Suatu Alt
  Suatu Alt
  Suatu Alt

 

Secara khusus saya ingin membahas tentang peta. Peta dengan bentuk yang tidak teratur seperti bujursangkar (rectangular) ataupun lingkaran (circle) diatur dengan pola polygon, dimana setiap titik akan menghubungkan satu garis dengan garis yang lain. Pada contoh disini saya akan menggunakan sebuah peta Provinsi Daerah Istimewa Yogyakarta.
petadiy

Selanjutnya saya telah memiliki data koordinat untuk gambar tersebut seperti berikut :

‘KulonProgo’ ‘26,206,146,265,167,232,173,229,176,232,181,230,180,223,182,219,182,214,179,205,152,177,156,174,160,166,157,158,160,156,152,143,151,136,151,130,150,123,150,121,150,119,154,112,156,110,164,104,179,100,174,88,178,81,177,75,177,68,176,66,170,62,164,67,149,63,140,68,132,61,110,64,105,63,89,81,101,89,97,104,97,110,96,123,86,135,74,147,58,162,54,174,46,191,45,201,41,208,37,207,26,207’
‘KotaJogja’ ‘227,137,226,146,224,157,224,161,227,169,235,169,241,171,247,172,249,168,253,174,258,173,258,165,254,149,228,137’
‘Sleman’ ‘158,170,156,158,160,155,151,143,149,125,150,118,153,113,156,108,160,104,178,98,210,64,256,25,268,16,277,9,282,6,300,71,308,112,310,136,321,134,324,142,340,152,340,164,322,170,276,173,269,164,265,146,255,146,228,135,221,151,206,159,191,173,189,142,174,158,161,170,158,171’
‘Bantul’ ‘148,264,166,232,178,226,175,195,152,176,169,168,177,161,180,154,188,147,187,163,189,174,196,175,205,168,208,160,217,155,222,152,226,145,223,160,227,168,236,171,248,172,249,169,258,172,259,164,254,151,267,150,268,167,276,175,286,170,304,170,324,173,308,177,296,193,302,207,310,211,311,225,309,240,300,240,299,254,295,253,293,246,289,250,286,243,280,250,267,256,256,254,256,260,238,256,229,260,216,273,220,286,148,264’
‘Gunungkidul’ ‘221,286,215,272,224,267,228,261,237,259,254,260,254,255,264,257,277,252,283,245,285,242,288,251,298,245,307,238,310,232,311,226,312,220,311,213,310,211,300,202,296,195,298,189,302,182,309,179,323,177,326,173,340,165,339,160,340,154,342,148,345,152,346,146,361,148,361,155,362,156,371,155,402,151,405,156,411,150,414,146,415,154,439,155,436,146,452,156,463,168,469,161,479,163,481,188,470,221,463,287,477,321,482,349,483,365,493,366,497,360,505,352,498,368,501,380,509,372,511,389,488,386,442,390,436,389,438,383,433,382,420,379,375,358,263,320,223,289’

Jangan tanya lebih dulu darimana saya mendapat koordinat ini. Saya membuatnya :). Bagaimana membuatnya? Tentu ada postingan yang membahas JQuery dan Javascript lengkap dengan source codenya. Selanjutnya, mari kita buat peta sebagai demikian:

Peta Gambar DIY


  Kulonprogo
  Sleman
  Bantul
  Kota Jogja
  Gunungkidul


Hasilnya dapat dilihat pada halaman demo.

Kelamahan dari peta HTML ini adalah : belum support dengan zoom, dan dia bukan peta berbasis VEKTOR. Dengan beberapa tambahan fungsi khusus, fungsi zoom bisa digunakan. Untuk sementara kita belum menggunakan tooltip pointer untuk menunjukkan kota. Tapi setidaknya dari alt dan title telah dapat diketahui mouse kita sudah masuk area mana. Saya juga menggunakan event javascript ONCLICK untuk menunjukkan apakah yang diclick itu kota yang bersangkutan. Untuk posting selanjutnya akan saya posting tentang TOOL TIP, setelah itu barulah akan diposting bagaimana cara membuat koordinat peta. Tentu dengan Javascript dan JQuery…

13 thoughts on “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 1]

  1. Roaming sih, meski ngerti dikit2. Dikiit banget. Aku masih suka takjub dengan bahasa HTML yang bisa jadi bentuk berbeda begitu tampil di layar lapie. Ajaib (saking gateknya).

  2. gan cara menentukan data koordinat itu dari mana ya kok bisa pas, apa ada tools tambahannya atau bagaimana ya

    thxx

    good idea

    1. oh ya, terimakasih mas/mbak atas masukannya. Mungkin untuk hal itu ditambahkan informasi ya pada gambarnya atau yang diberikan tooltip tersebut. Dan memang lebih mudah menggonakan mouseover 🙂

      1. oke terima kasih mas
        lagi cari cari bikin tooltip banyak di satu gambar mas
        kaya peta kalau di klik di area tertentu bisa muncul tooltip dan di area lainnya di dalam satu gambar

Leave a Reply

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