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

Membuat Webgis sederhana dengan Leaflet

Leaflet adalah library JavaScript opensource yang digunakan untuk membangun aplikasi webgis. Sejak dirilis pertama kali pada tahun 2011, ...


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

COMMENTS

Nama

Data,56,Geospasial,185,GIS,134,Pustaka,20,RS,134,Software,36,Tutorial,74,
ltr
item
RSGIS INDONESIA: Membuat Webgis sederhana dengan Leaflet
Membuat Webgis sederhana dengan Leaflet
https://4.bp.blogspot.com/-XEqYJyvYe6A/XJxV3hn046I/AAAAAAABwfE/ARNGoCjXUnAont3LHjnNDYTGvWpZZiUUACLcBGAs/s640/CREATE-INTERACTIVE-MAP-WITH-LEAFLET-JS.jpg
https://4.bp.blogspot.com/-XEqYJyvYe6A/XJxV3hn046I/AAAAAAABwfE/ARNGoCjXUnAont3LHjnNDYTGvWpZZiUUACLcBGAs/s72-c/CREATE-INTERACTIVE-MAP-WITH-LEAFLET-JS.jpg
RSGIS INDONESIA
https://www.rsgis.info/2019/03/membuat-webgis-sederhana-dengan-leaflet.html
https://www.rsgis.info/
https://www.rsgis.info/
https://www.rsgis.info/2019/03/membuat-webgis-sederhana-dengan-leaflet.html
true
3008467515520484700
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy