Bagus GIS: Cara Menulis Program WebGIS Menggunakan Leaflet

Sublime text

Menulis program WebGIS menggunakan Leaflet tidaklah susah karena sudah disediakan bahasa dan contoh penulisan oleh leaflet.org

Pengenalan
Membuat WebGIS menggunakan Leflet bagian 1
(Sebelumnya baca mengenai WebGIS klik)
Leaflet sendiri adalah bahasa pemrograman JavaScrip open-source yang digunakan untuk peta interaktif pada mobile dan dekstop

1. Mulai
Langkah awal, siapkan software untuk menulis bahasa pemrograman, saya menggunakan sublime text
Tampilan Sublime text

Sublime text

Memulai dengan membuka Sublime text, simpan (Save As) dengan format .html, lalu menulis sesuai langkah-langkah di bawah ini:
(Kelengkapan penulisan berada paling bawah)

Tuliskan Leaflet CSS pada bagian head dokumen html:
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwf
LMHloNu6KEQCAWi6HcDUbeOfBIptF7
tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

<!-- Pastikan letakkan seteleh Leflet CSS --!!>
<script src="https://unpkg.com/leaflet@1.6.0/
dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/
0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTt
C0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

Letakkan id map untuk menempatkan peta anda akan berada, serta ukuran peta:
<div id="mapid" style="width: 600px; height: 400px;"></div>

2. Contoh Peta
Pulau Jawa

Gambaran peta WebGIS, terlihat pada bagian atas.

Memanggil peta
var mymap = L.map('mapid').setView([-7.022,109.425], 6);

penulisan setView digunakan sebagai titik tengah peta serta zoom/perbesaran daerah.

Menambahkan base map

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?
access_token={accessToken}', { 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>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'your.mapbox.access.token' }).addTo(mymap);

Hal yang terpenting adalah penambahan base map, untuk mendapatkan access token, bisa melakukan permintaan pada laman berikut (https://account.mapbox.com/access-tokens/).

Menambahkan titik lokasi
var marker = L.marker([-7.022,109.425]).addTo(mymap);

Selain itu kamu bisa menambahkan titik lokasi dengan addTo(mymap) yang berarti data dipanggil pada mymap, penulisan mymap bisa diubah sesuai kebutuhan.

Menambahkan lingkaran dan segitiga polygon
var circle = L.circle([-7.260, 109.198], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 30000
}).addTo(mymap);

var polygon = L.polygon([

[-7.261, 109.371],

[-7.261, 109.392],

[-7.270, 109.385]

]).addTo(mymap);

Selain itu kamu bisa menambahkan linkaran dan segitiga polygon, style pada lingkaran dapat dirubah dengan ketentuan warna, luasan lingkaran dan lainnya.

Menambahkan keterangan
marker.bindPopup("<b>Jawa tengah</b><br>I am a popup.")
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

Membuat keterangan attribute pada titik, lingkarang dan polygon segitiga.

Menambahkan informasi koordinat
var popup = L.popup();

function onMapClick(e) {

popup

.setLatLng(e.latlng)

.setContent("Koordinat " + e.latlng.toString())

.openOn(mymap);

}

mymap.on('click', onMapClick);

Informasi latitude & longitude dapat dilihat pada peta dengan cara klik pada salah satu lokasi.

Menambahkan Skala
L.control.scale().addTo(mymap);

Informasi Penambahan skala bar bisa dimunculkan pada bagian bawah pojok kiri.

3. Penulisan Program
Sumber penulisan yang dapat disalin pada sublime text

<!DOCTYPE html>

<html>

<head>

<title>Pulau Jawa</title>

integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQ
CAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin=""/>

integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZp
VkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="

crossorigin=""></script>

</head>

<body>

var mymap = L.map('mapid').setView([-7.022,109.425], 6);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}
/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXV
ycTA2emYy
cXBndHRqcmZ3N3gifQ.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);

var marker = L.marker([-7.022,109.425]).addTo(mymap);

var circle = L.circle([-7.260, 109.198], {

color: 'red',

fillColor: '#f03',

fillOpacity: 0.5,

radius: 30000

}).addTo(mymap);

var polygon = L.polygon([

[-7.261, 109.371],

[-7.261, 109.392],

[-7.270, 109.385]

]).addTo(mymap);

marker.bindPopup("<b>Jawa tengah</b><br>I am a popup.")

circle.bindPopup("I am a circle.");

polygon.bindPopup("I am a polygon.");

var popup = L.popup();

function onMapClick(e) {

popup

.setLatLng(e.latlng)

.setContent("Koordinat " + e.latlng.toString())

.openOn(mymap);

}

mymap.on('click', onMapClick);

L.control.scale().addTo(mymap);

</script>

</body>

</html>

4. Video Tutorial
Berikut video tutorial membuat Webgis menggunakan Leaflet:

Referensi penulisan:
https://leafletjs.com/

Pages

29 Apr 2020

Cara Menulis Program WebGIS Menggunakan Leaflet

Tidak ada komentar:

Posting Komentar

Kontak