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

MENGAMBIL KOORDINAT SEBUAH TITIK DARI SEBUAH GAMBAR

Jika pada Posting lalu http://bimosaurus.com/2013/03/16/berkreasi-dengan-peta-html-dan-tag-map-area-bagian-1/ telah dipaparkan bagaimana cara menyajikan sebuah gabungan antara gambar peta dan data koordinat dalam source HTML, maka di bagian ini akan dijelaskan bagaimana cara mengambil koordinat sebuah gambar. Untuk mengambil value koordinat yang diperlukan oleh MAP AREA, kita akan menggunakan bantuan Javascript untuk menentukannya.

Format koordinat MAP AREA untuk kategori POLYGON adalah sebagai berikut :

x1,y1,x2,y2,x3,y3,x4,y4………xn,yn

Tentunya membuat koordinat tersebut satu persatu dengan cara mengira dan mencoba akan sangat menyulitkan kita. Oleh karena itu kita perlu satu aplikasi yang dapat menentukan koordinat tersebut. Bisa? Bisa. Pertamakali kita butuh pointer javascript, dengan bantuannya apa yang kita klik dapat langsung dibaca oleh javascript dan dimunculkan value koordinat pertitiknya. Kedua, kita akan mengklik seluruh titik batas luar sebuah peta, dan akan diinput ke dalam database.

Untuk keperluan pointer pertitik koordinat, berikut script bagiannya :

1. Script bagian gambar yang akan ditentukan value koordinatnya

Perlu diketahui bahwa event javascript point_it(event) berfungsi untuk memanggil fungsi yang ada pada script di bawah ini.

2. Script bagian control javascriptnya


3. Langkah lanjutnya adalah, membuat sebuah Form yang digunakan untuk menempatkan koordinat-koordinat hasil, dan nama daerahnya. Saat peta salah satu wilayah berhasil diinput, dapat disubmit. Sementara saya belum membuat script lengkap untuk tujuan submitnya. Namun seperti ini gambarannya. Perhatikan, seluruh id, termasuk form diharapkan ada, karena kita akan melanjutkannya dengan menggunakan Javascript yang agak kental dengan getElementById.

4. Untuk sementara script input saya buat dalam file JQuery seperti berikut

Script post ini selanjutnya boleh diarahkan ke suatu Database. Salah satu bentuknya adalah :

Dengan file submit.php berisi sebagai berikut:

27 thoughts on “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 2]

  1. kerennnnnnn . . . .
    mas, kalau data koordinat untuk gambar tersebut di ambil dari mysql bisa ya? trus kalau dikembangkan ada ZOOM, PAN, SCALE, bisa juga ya ???

    1. Untuk peta HTML akan sangat susah diterapkan zoom, pan, scale. Bisa, namun akan sangat ribet, karena otomatis kita juga harus membuat formula tentang pen-skala-an koordinat yang dibangun. Untuk itu, saya sedang menyiapkan tulisan tentang web peta yang berhubungan dengan Geospatial, atau peta nyata, dimana peta itu bisa didapat dari Bakosurtanal, ataupun global map seperti google.. Tunggu saja :)

  2. okk mas, di tunggu tulisan web petanya . . . . .
    mas, mo tanya lagi, kalau bikin file SHP, dengan PHP yg datanya dari MYSQL caranya gimana ya ???

    ma’kasih . . . .

  3. bang admin, yang tutorial peta html ini, bisa digunakan buat ngambil koordinat dari gambar juga gak???
    trus buat nampilin gambar setengah dari ukuran aslinya, caranya gimana ya bang???

    terima kasih
    semoga komen saya ini diterima dan dibalas hehe

    1. Pasti saya balas mas. Ini buktinya hehehe, meski dari mobile.

      Peta yang ada disini adalah gambar biasa. Maka untuk gambar lainnya pasti juga bisa, misal seperti di facebook, nampilkan orang yang ditag misal, tentu saja bisa

      Untuk setengah ukuran ada perhitungan tersendiri tergantung skala gambarnya, sepertinya kelak bisa saya posting. Kalau tidak pake perhitungan seperti ini akan repot karena harus buat pointing lagi.

      Semoga berguna

  4. maaf pak sy masih awam….capek cari sm mbah,setelah 2 hari baru jumpa yang benar2 sesuai

    pak itu script no 2 nya g ada ya? kalau coords dalam tag area seperti di bagian I sudah ada dan ingin mengambil title/id dalam tag area sebagai value utk dijadiin parameter select query gimana caranya pak?? sudah coba getElementByTagName dan sejenisnya tp tdk berhasil semua…. tolongin pak…. T_T

  5. dengan senang hati pak, dah mau dibantu juga…. ^^ tolong ya pak,kalo bisa disertakan contoh karena sy betul2 g sanggup mikir lagi… T_T

    soalnya dah lama banget sy g begerak2 dr sana….

  6. oya sy dah cb2 juga yang Bapak bilang, tp g da yang berhasil,salah satunya :

    ...

    $(".class").click(function () { /*udah coba #Map g berhasil jg...*/
    var Kecamatan=$(".class").val();
    $("#d").text(Kecamatan); /*mau coba tampilkan dulu apa keluar,ternyata nggak...*/
    });

    maafkan kalau ancur2an… krn sy betul2 awam… :)

    1. maaf, maksud saya adalah
      $(“.class”) adalah mengambil variabel dari class yang memuatnya. Classnya disesuaikan dengan nama class yang ada di situ. Oh ya gunakan Google Chrome, dan pada peta Klik kanan, inspect element dan perhatikan error yang ada.. dari situlah kita dapat mentrace apa masalahnya :)

      Tetap kontak.. jangan takut hancur-hancuran atau salah.. kita jadi jauh lebih tahu karena itu

  7. waduh ky nya perlu tidur dulu ni pak udah seharian cm baca2 forum sebelah tp g da yg nyangkut,yg Bapak bilang aja g paham lagi selain “maaf” krn sy yg salah memahami petunjuk bapak…hehehe

    oke pak sy akan terus coba-coba………………….tanyakan ke forum lain juga…lho!!!?? ^^

    trims pak… :)

  8. pak dah sy coba,trace pake chrome,tp g da yang error… T_T

    gmn ya pak, dapetin value class/id nya dan meneruskannya ke db… trims pak….

  9. Bagus sekali informasinya mas.

    kebetulan saya ada tugas kuliah data spacial buat peta interaktif.
    Ide sy begini, ada gambar kerangka manusia dan disampingnya list nama-nama kerangka itu,
    klu diklik list salah satu nama kerangka itu maka ada notification dititik koordinat muncul mengenai keterangan nama kerangka tersebut. itu kode javaScriptnya atau html bagaimana ya?

    terima kasih.

    1. Mas Ilham, maaf saya terlambat menjawab. Untuk gambar kerangka manusia, bisa sangat mungkin sekali dibuat semacam ini. Ada contoh menarik justru jika dikombinasikan dengan Javascript Library : AngularJS yang telah mensupport data mapping.

  10. mas mau tanya..
    kalau cara menampilkan maps menggunakan php dan itu agar langsung ke lokasi yang di inginkan gmna ya?
    saya sudah bikin tapi lau mau lihat lokasi harus geser2 petanya untuk lihat lokasi..
    terima kasih .. mohon mantuannya

  11. Artikel yang sangat bagus dan membantu mas,
    mohon izin untuk melengkapi script nomor 2, mungkin spy bisa membantu
    kalo ada yg salah mohon dikoreksi, trims

    function point_it(event){
    var xx = document.getElementById(“koordinat”);
    koordinat = xx.value;
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(“gambar”).offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(“gambar”).offsetTop;
    document.getElementById(“titik”).style.left = (pos_x+10) ;
    document.getElementById(“titik”).style.top = (pos_y-30) ;
    document.getElementById(“titik”).style.visibility = “visible” ;
    koordinat = koordinat + ‘,’ + pos_x + ‘,’ + pos_y ;
    xx.value = koordinat;

    var xy = document.getElementById(“titik”);
    xy.innerHTML = ‘click ‘ + pos_x +’ ‘ + pos_y;
    }

  12. mau tanya nih mas, kalo disini ketika kita gambar garis kordinatnya nya kan ga keliatan,
    bisa gak ketika kita desain garis koordinat, bisa langsung tampil garis yang sudah kita bikin?
    mohon dibantu mas

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="">