LEAFLET 3: MENAMBAHKAN DATA EKSTERNAL

Selain peta dasar yang ingin kita tampilkan, kita juga menginginkan untuk menampilkan atau menyajikan data yang lebih spesifik terkait keperluan kita. Oleh sebab itu, kali ini kita akan membahas cara menampilkan data kita melalui leaflet sehingga dapat menjadi informasi yang dapat dijangkau masyarakat luas. Data spasial yang dapat ditampilkan pada leaflet dapat berupa:

  1. Titik (contohnya: titik – titik biomassa hasil lapangan)
  2. Garis (contohnya: hasil tracking rute sepeda)
  3. Poligon (contohnya: batas adminitrasi)

Kali ini kita akan menampilkan data hasil lapangan skripsi pegukuran biomassa di sekitar Gunung Lawu dengan leaflet. Berikut adalah hasil sebaran sampel biomassa di sekitar Gunung Lawu. Klik di sini.

leaf-0305

Data diambil melalui kegiatan lapangan skripsi melalui GPS yang kemuadian dijadikan Shp file. Untuk menampilkan data kita ke web GIS kita perlu mengubah file Shp ke dalam bentuk GeoJSON menggunakan  QGISOGREShape Escapemapshapergeojson.io. Tutorial ini menngunakan QGIS untuk mengubah Shp  file menjadi GeoJSON. GeoJSON adalah sebuah format standard yang bersifat open source untuk merepresentasikan bentuk kenampakan geografi secara sederhana yang disertai dengan attributnya, dimana menggunakan JavaScript Object Notation. Penjelasan singkat GeoJSON di Artikel Wikipedia . Berikut adalah struktur HTML-nya.

leaf-0302

dalam file HTML tersebut kita akan menambahkan dua file baru yaitu jQuery ( JavaScript library yang umum digunakan dan sangat berguna) dan juga file GeoJSON (biom.geojson). Download keduanya dan tempatkan pada forlder HTML yang telah kita buat.

Pertama kita tempatkan file jQuery pada HTML bagian atas setelah <tittle> seperti di bawah

leaf-0303

Kita dapat mendownload dan menaruh file jQuery atau dapat juga melalui halaman web tempat jQuery berada. Pelajari jQuery selengkapnya pada jQuery.com.

Selanjutnya untuk memunculkan file biom.geojson ke dalam web, kita menggunakan jQuery metode getJSON(). Seperti struktur di bawah:

leaf-0304

Jika file kita berada pada folder HTML yang telah kita buat kita hanya butuh menuliskan nama file beserta ekstensinya, tetapi jika file kita berada pada web server (di internet) maka tuliskan halaman web dimana kita menyimpan file tersebut. Kemudian code tersebut akan mengeluarkan data tersebut pada web. Argument data pada fungsi di atas mempresntasikan data JSON dimana jQuery membaca file tersebut dari luar atau external file.

Kita telah belajar mengerti sedikit cara untuk memasukkan data dari luar, selain metode jQuery untuk mengeluarkan data dapat juga menggunakan metode lain seperti  Leaflet Omnivore oleh Tom MacWright yaitu plugin yang memudahkan kita untuk mengeluarkan berbagai data dengan mudah.

Sumber:

http://maptimeboston.github.io/leaflet-intro/

*** SEMOGA BERMANFAAT ***

 

5 Comments

  1. dear all mawar lovers,

    mohon maaf sebelumnya, senang sekali dengan tulisan ini, tetapi, kenapa web di GitHub Mawarlaboratorium tidak dibuatkan Github Page nya?
    https://Mawarlaboratorium.github.io/

    kan bakalan lebih cantik kalau pakai Github Page, tidak di host di

    http://roselabs-wixsite-com.usrfiles.com/html/4d19dd_8534a39e1d57c92efd70fcf9cc050bdf.html

    dan sedikit masukan lagi, kalau mau diterima, GitHub nya dibuatkan Organisasi saja, jangan pribadi seperti sekarang, sehingga dapat join orang lain 😀

    salam dari Kampar, Riau

    Like

    1. Terimakasih pak Kampar atas masukkannya yang sangat berharga, kami akan perbaiki ke depan, karena kami juga sedang berproses. GitHub akan mempelajarinya, masih asing bagi kami

      Hormat Kami,
      RoseGIS Labs

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s