Pages

Blog remote sensing, penginderaan jauh, rsgis, gis, sig, arcgis, qgis, geographic information system, data spasial, geospasial Indonesia

About

Blog Archive

Gambar tema oleh mariusFM77. Diberdayakan oleh Blogger.

Popular Posts

RECENT$type=list-tab$date=0$au=0$c=4

REPLIES$type=list-tab$com=0$c=4$src=recent-comments

RANDOM$type=list-tab$date=0$au=0$c=4$src=random-posts

Search

$type=slider$snippet=hide$cate=0

Footer Logo

Footer Logo

$type=ticker$count=10$cols=4$cate=0

LATEST POSTS$type=blogging$count=13$page=true$va=0

You are here: Home / , , Membuat Webgis sederhana dengan Leaflet

Membuat Webgis sederhana dengan Leaflet

| No comment

Leaflet adalah library JavaScript opensource yang digunakan untuk membangun aplikasi webgis. Sejak dirilis pertama kali pada tahun 2011, Leaflet telah mendukung platform mobile dan desktop.

Tulisan ini membahas pembuatan webgis sederhana dengan leaflet. Referensi Leaflet untuk membuat peta sederhana dapat dengan mudah ditemukan pada https://leafletjs.com/examples/quick-start/. Untuk mengembangkan webgis dengan leaflet, pengguna dapat menggunakan PLUNKER. Namun perlu diingat, PLUNKER hanya lah salah satu alternatif saja selain dengan melakukan editing langsung pada server lokal ataupun server online.

1. Menyiapkan File

Dengan PLUNKER (atau pada server/lokal) buat file-file yang diperlukan. Jumlah file tergantung kebutuhan. Sebenarnya seluruh file dapat saja dijadikan dalam 1 file HTML, tetapi untuk pengembangan akan menyulitkan sehingga dibuat file-file terpisah untuk tujuan tertentu. Misal untuk CSS dibuat 1 file, untuk Script dibuat 1 file. File-file tersebut harus dirujuk oleh file HTML



Jika mengugnakan PLUNKER seperti pada gambar di atas, akan diberikan file-file bawaan yaitu HTML, MD, JS, dan CSS. Untuk penggunaan pembuatan webgis sangat sederhana cukup tersedia file HTML, JS dan CSS saja.

Contoh kode untuk HTML, JS dan CSS dapat dilihat pada https://leafletjs.com/examples/quick-start/ yang dapat dijelaskan seperti pada bahasan berikut.

2. File HTML


File HTML adalah file utama sebagai entry sebuah webgis. File-file lain yang diperlukan oleh file HTML harus dirujuk, yaitu
  • Leaflet CSS
  • Leaflet JavaScript
  • File stylesheet (CSS)
  • Map dengan elemen DIV
  • File JavaScript pada file JS yang berisi layer/peta (Point 4)

Contoh https://plnkr.co/edit/FmL3lmrvp3iUWIslFUFC

3. File Cascade Style Sheet (CSS)

Style CSS berfungsi menyimpan pengaturan terkait posisi, ukuran, dan letak dari DIV. Perlu diperhatkan bahwa id DIV pada file HTML harus bersesuaian dengan di file CSS.

4. File JS

Pengguna dapat mengisi data webgis pada file JS, misalnya dari Openstreet, mapbox, geojson, dan sebagainya.

Kita mencoba mengisi background dari OpenStreetMap. Yang diperlukan adalah parameter titik pusat X, Y dan zoomlevel. Pengguna dapat mengunjungi web OpenStreetmap dan melakukan zoom/pan pada areal yang menjadi interset. Pada permalink akan tampil koordinat (X, Y) dan zoom. Sebagai contoh pada Gambar berikut memiliki X = 122.5618, Y = -3.9920, dan zoom level 13.



Untuk mengisi map dari OpenStreetMap di atas pada file JS dapat diisikan seperti berikut.

var map = L.map("map").setView([-3.9920, 122.5618], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

Lihat pada Contoh https://plnkr.co/edit/FmL3lmrvp3iUWIslFUFC

5. Test Pada Server

Pengetesan pada server dapat dilakukan pada server online ataupun server lokal (misal dengan WAMP, XAMPP atau webserver lain sepanjang komputer tetap online).

Test pada server dilakukan dengan memindah file HTML, JS dan CSS yang sudah dibuat menggunakan PLUNKER ke webserver. Cara yang paling mudah dapat dilakukan dengan COPY-PASTE isi file ke file yang sama pada webserver.


Gambar di atas dapat dilihat pada laman http://www.rsgis.org/plunkr/webgis01-kdi/

Sampai tahap ini kita telah membuat webgis menggunakan Leaflet. Selanjutnya tentu kita dapat menambahkan data/layer baik dari penyedia seperti mapbox ataupun file json sendiri.

Jika ingin berlari duluan, silakan kunjungi referensi berikut

/Have fun