Leaflet JS ( website ) adalah modul pemetaan/webgis berbasis javascript yang opensource.
Contoh :
Untuk membuat tampilan web seperti di atas perlu memahami bagaimana menggunakannya.
- menyiapkan halaman HTML
- menyertakan file library Leaflet JS
- membuat tag untuk map, yang terdiri :
- menyiapkan fungsi map
- menyiapkan basemap
- menyiapkan objek di peta
- menambahkan fungsi lain.
Menyiapkan halaman HTML
<html><head></head><body></body></html>
Menyertakan file library Leaflet JS :
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
Membuat tag dalam untuk isi map :
<div id="mapid" style="width: 600px; height: 400px;"></div>Membuat fungsi untuk mengisi tag map :
<script>var mymap = L.map('mapid').setView([51.505, -0.09], 13);L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {maxZoom: 18,attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1}).addTo(mymap);L.marker([51.5, -0.09]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
Menambahkan fungsi lain :
var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);}mymap.on('click', onMapClick);
</script>
Script diatas melengkapi pembuatan webgis dengan Leaflet JS.
Sehingga untuk membuat halaman webgis dengan Leaflet JS yang dasar sekali harus memahami langkah sebagai berikut :
- menyiapkan html baru atau menggunakan yang sudah ada
- menyertakan libraray Leaflet JS file css dan js
- menyiap div untuk menampilkan peta
- membuat fungsi untuk mengisi peta pada div peta
- mendefenisikan object map termasuk koordinat pusat peta dan skala zoom
- mendefinisikan basemap yang digunakan
- mendefinisikan objek marker, line atau poligon
- menambah fungsi lain, event dari objek-objek peta
Kalau sudah memahami konsep di atas akan mudah membuat WebGIS dengan Leaflet JS.
#sekian
Tidak ada komentar:
Posting Komentar