Belajar LeafletJS #1 Pengenalan LeafletJS dan Menampilkan Peta

Leaflet.js merupakan library atau perpustakaan kode javascript open source yang berguna untuk membangun aplikasi peta berbasis web (webgis) yang sederhana, interaktif dan ringan. Leaflet.js support dengan platform mobile dan platform desktop, HTML5 dan CSS3 serta OpenLayer dan Google Maps API yang merupakan library javascript untuk membangun aplikasi peta yang sangat popular saat ini.

Dengan memanfaatkan leaflet, developer yang tidak memiliki latar belakang GIS pun dapat dengan mudah menampilkan peta interaktif berbasis web pada server. Leaflet mampu menampilkan layer dari file geojson, memberi style dan membuat layer yang interaktif seperti menampilkan marker yang menampilkan popup informasi ketika di klik.

Berikut ini yang dapat kalian lakukan dengan LeafletJS:

  • Leaflet JavaScript library memungkinkan kita menggunakan lapisan/layer seperti Tile layers, WMS, Markers, Popups, Vector layers (polylines, polygons, circles, dll.), Image overlays dan GeoJSON.
  • Kalian juga dapat berinteraksi dengan peta Leaflet dengan menyeret peta, memperbesar (zoom) (dengan mengklik dua kali atau, menggulir mouse), menggunakan keyboard, menggunakan event handling, dan dengan menyeret marker (penanda).
  • Leaflet.js mendukung browser seperti Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 di desktop dan, browser seperti Safari, Android, Chrome, Firefox untuk ponsel.

Menampilkan Peta dengan LeafletJS

Untuk lebih memahami tentang LeafletJS, pada tutorial ini kita akan mencoba menampilkan peta menggunakan Library Leaflet.js. Kalian bisa mengikuti langkah-langkah berikut ini:

Langkah 1 – Gunakan Web Editor seperti Notepad++ atau Sublime Text, dan buat struktur dasar HTML lalu simpan dengan nama latihan_leafletjs.html.

Langkah 2 – Indluce File Leaflet CSS pada bagian head.

Langkah 3 – Include File Leaflet JS setelah Leaflet CSS

Langkah 4 – Buat sebuah div elemen untuk menmpatkan peta dengan id yang diinginkan.

Langkah 5 – Atur tinggi dan lebar dari area peta dengan CSS (diantara tag head, di bawah include Javascript).

Langkah 6 – Membuat Map Options untuk menentukan titik tengah peta dan nilai zoom.

Langkah 7 – Membuat Objek Peta dan menampilkannya pada area <div> yang telah disiapkan.

Langkah 8 – Membuat Layer Peta.

Dari langkah 1 sampai langkah 8 dalam menampilkan peta dengan leaflet.js, menghasilkan script lengkap seperti ini:

Jika kalian menjalankan file latihan_leafletjs.html di browser (seperti Chrome atau Firefox) dan komputer kalian terkoneksi ke internet, maka akan menampilkan peta seperti gambar berikut ini.

Selamat Belajar LeafletJS #1 – Pengenalan LeafletJS dan Menampilkan Peta, semoga ada manfaatnya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *