Draft - Spweb - Acara V - 2021

ACARA V
PEMBUATAN WEBGIS MENGGUNAKAN LEAFLET JS – CUSTOMIZE AND PLUGINS

(3 SKS, 1 Sesi Pertemuan)
I. TUJUAN
1) Mahasiswa mampu membuat customize pada tampilan user interface dan
memperkaya fitur menggunakan plugin pada library Leaflet JS
II. ALAT DAN BAHAN

1) Software Xampp
2) Software Geoserver
3) Software Visual Studio Code (VS Code)
4) Software web browser
5) Data shapefile (.shp)
III. DASAR TEORI

3.1. WebGIS
Web GIS adalah pola, atau pendekatan arsitektural, untuk mengimplementasikan
GIS modern. Didukung oleh layanan standar Web yang memberikan data dan
kemampuan, serta menghubungkan komponen-komponen di dalamnya (ESRI, 2020).
Lebih lanjut, Prahasta (2007) menjelaskan bahwa WebGIS merupakan bentuk lain dari
GIS dalam bentuk platform berbasis Web akibat pertumbuhan yang pesat pada teknologi
jaringan dan telekomunikasi. WebGIS mampu menyajikan data geospasial secara online
yang dapat diakses dimanapun tanpa adanya batasan geografis user.
3.2. Leaflet JS
Leaflet adalah pustaka JavaScript sumber terbuka terkemuka untuk peta interaktif
ramah seluler. Dengan bobot hanya sekitar 39 KB, ia memiliki semua fitur pemetaan yang
paling dibutuhkan oleh sebagian besar pengembang (Leaflet, 2020)
Gambar 3.1 Leaflet JS

(sumber : https://leafletjs.com/)
Leaflet dirancang dengan mempertimbangkan kesederhanaan, kinerja, dan

kegunaan. Platform ini bekerja secara efisien di semua platform desktop dan seluler
utama, dapat diperluas dengan banyak plugin, memiliki API yang indah, mudah
digunakan, dan terdokumentasi dengan baik serta kode sumber yang sederhana dan
dapat dibaca yang menyenangkan untuk disumbangkan.
3.3. GeoJSON
GeoJSON adalah format untuk menyandikan berbagai struktur data geografis.
Objek GeoJSON dapat mewakili wilayah ruang (Geometri), entitas yang dibatasi secara
spasial (Fitur), atau daftar Fitur (FiturCollection). GeoJSON mendukung jenis geometri
berikut: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, dan
GeometryCollection. Fitur di GeoJSON berisi objek Geometri dan properti tambahan, dan
FeatureCollection berisi daftar Fitur (Leaflet, 2020)
3.4. LANGKAH KERJA

i. Persiapkan data shapefile, baik yang sudah Anda upload pada Postgre dan
Geoserver, maupun yang ada di dalam localdisk drive.
ii. Aktifkan Xampp dan Geoserver
iii. Buka VS Code, buat file baru dengan format .html
iv. Lakukan penilisan script dan simpan file
v. Buka file .html menggunakan web browser, aktifkan localhost
vi. Amati tampian pada webGIS Anda, modifikasi script jika diperlukan
Gambar 3.2 Struktur Operasional WebGIS dalam Praktikum
IV. HASIL PRAKTIKUM

1) Screencapture tampilan WebGIS (script dan interface)
2) File .html berisikan script WebGIS (1 package)
V. DAFTAR PUSTAKA
ESRI. 2020. Web GIS, Simply. https://www.esri.com/about/newsroom/insider/web-gis-

simply/ (Diakses 1 September 2020)
Leaflet. 2020. About GeoJSON. https://leafletjs.com/examples/geojson/ (Diakses 1
September 2020)
______. 2020. Overview Leaflet. https://leafletjs.com/ (Diakses 1 September 2020)
Prahasta, E. 2007. Membangun Aplikasi Web-based GIS dengan MapServer. Informatika
: Bandung.
VI. LAMPIRAN
MODUL TEKNIS ACARA V.C

5.1. Persiapan Data
Kopi 1 paket folder spatialprogramming_web_gsl2020 di dalam folder C:\xampp\htdocs
5.2. Mengaktifkan Xampp dan Geoserver

Sebelum memulai project webGIS Anda, maka dibutuhkan hosting berupa localhost yang
dijalankan secara offline pada komputer Anda. Pertama, jalankan Xampp > start pada Apache
Jakankan geoserver (start Geoserver) untuk mendukung integrasi Geoserver – Leaflet JS

5.3. Scripting Leaflet Js – Customize
a) Menambahkan Judul
Buka file .html pada Acara IV kemudian tuliskan script berikut ini pada bagian <head>
! (note : perhatikan format penulisan, besar/kecil, titik/koma dll.)
1. /* Background pada Judul */
2. *.info {
3. padding: 6px 8px;
4. font: 14px/16px Arial, Helvetica, sans-serif;
5. background: white;
6. background: rgba(255,255,255,0.8);
7. box-shadow: 0 0 15px rgba(0,0,0,0.2);
8. border-radius: 5px;
9. text-align: center;
10. }
11. .info h2 {
12. margin: 0 0 5px;
13. color: #777;
14. }
Tambahkan pada <body>

1. /* Judul dan Subjudul */
2. var title = new L.Control();
3. title.onAdd = function (map) {
4. this._div = L.DomUtil.create('div', 'info');
5. this.update();
6. return this._div;
7. };
8. title.update = function () {
9. this._div.innerHTML = '<h2>LATIHAN WEBGIS | COVID-19 KABUPATEN SLEMAN</h2>MATAKULIAH
PEMROGRAMAN SPASIAL : WEB'
10. };
11. title.addTo(map);
b) Menambahkan Legenda
Legenda dapat ditambahkan melalui script atau melalui file .jpg/.png yang sudah
disiapkan sebelumnya. Kali ini, penambahan legenda menggunakan skema file .png
Buat desain legenda, menggunakan aplikasi editor grafis (bebas). Simpan dalam
C:\xampp\htdocs\spatialprogramming_web_gsl2021\assets\img\legend . Pemanggilan
file dapat dilakukan dengan menambahkan script berikut pada bagian <body>
1. /* Image Legend */
2. L.Control.Legend = L.Control.extend({
3. onAdd: function(map) {
4. var img = L.DomUtil.create('img');
5. img.src = 'assets/img/legend/legend.png';
6. img.style.width = '300px';
7. return img;
8. }
9. });
10.
11. L.control.Legend = function(opts) {
12. return new L.Control.Legend(opts);
13. }
14.
15. L.control.Legend({ position: 'bottomleft' }).addTo(map);
c) Menambahkan Watermark
Siapkan file watermark dengan format .png (bebas). Simpan dalam

C:\xampp\htdocs\spatialprogramming_web_gsl2021\assets\img\logo . Pemanggilan
file dapat dilakukan dengan menambahkan script berikut pada bagian <body>
1. /* Image Watermark */
2. L.Control.Watermark = L.Control.extend({
3. onAdd: function(map) {
4. var img = L.DomUtil.create('img');
5. img.src = 'assets/img/logo/LOGO_SIG_BLUE.png';
6. img.style.width = '300px';
7. return img;
8. }
9. });
10.
11. L.control.watermark = function(opts) {
12. return new L.Control.Watermark(opts);
13. }
14.
15. L.control.watermark({ position: 'bottomleft' }).addTo(map);
Latihan 1
Lakukan modifikasi pada elemen berikut ini :
i. Lakukan penyesuaian tampilan pada judul (sesuai tema)
ii. Khusus pada legend buat file berformat .jpeg/.png secara custom menggunakan
simbolosi yang ada pada QGIS dan/ atau membuat baru menggunakan aplikasi
image-editor (bebas). Letakkan file tersebut pada folder Latihan.
iii. Lakukan penyesuaian tampilan peta sesuai keinginan Anda dengan cara
mengubah warna, tata letak, kalimat dll.
5.4. Scripting Leaflet Js – Plugin

a) Menambahkan Plugin Search
Tuliskan script berikut ini pada bagian <head> !

1. 
2. <link rel="stylesheet" href="assets/plugins/leaflet-search/leaflet-search.css">
Tuliskan script berikut ini pada bagian <body> !

1. 
2. <script src="assets/plugins/leaflet-search/leaflet-search.js"></script>

1. /*Plugin Search */
2. var searchControl = new L.Control.Search({
3. position:"topleft",
4. layer: sleman_cov19, //Nama variabel layer
5. propertyName: 'KECAMATAN', //Field untuk pencarian
6. marker: false,
7. moveToLocation: function(latlng, title, map) {
8. var zoom = map.getBoundsZoom(latlng.layer.getBounds());
9. map.setView(latlng, zoom);
10. }
11. });
12. searchControl.on('search:locationfound', function(e) {
13. e.layer.setStyle({
14. fillColor: '#ffff00',
15. color: '#0000ff'
16. });
17. }).on('search:collapse', function(e) {
18. featuresLayer.eachLayer(function(layer) {
19. featuresLayer.resetStyle(layer);
20. });
21. });
22. map.addControl(searchControl);
b) Menambahkan Plugin Geolocation

1. 
2. <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-
locatecontrol/v0.43.0/L.Control.Locate.css">

1. 
2. <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-
locatecontrol/v0.43.0/L.Control.Locate.min.js"></script>

1. /*Plugin Geolocation */
2. var locateControl = L.control.locate({
3. position: "topleft",
4. drawCircle: true,
5. follow: true,
6. setView: true,
7. keepCurrentZoomLevel: false,
8. markerStyle: {
9. weight: 1,
10. opacity: 0.8,
11. fillOpacity: 0.8,
12. },
13. circleStyle: {
14. weight: 1,
15. clickable: false,
16. },
17. icon: "fas fa-crosshairs",
18. metric: true,
19. strings: {
20. title: "Click for Your Location",
21. popup: "You're here. Accuracy {distance} {unit}",
22. outsideMapBoundsMsg: "Not available"
23. },
24. locateOptions: {
25. maxZoom: 16,
26. watch: true,
27. enableHighAccuracy: true,
28. maximumAge: 10000,
29. timeout: 10000
30. },
31. }).addTo(map);
c) Menambahkan Plugin Mouse Location Coordinate

1. 
2. <link rel="stylesheet" href="assets/plugins/leaflet-mouseposition/L.Control.MousePosition.css">
1. 
2. <script src="assets/plugins/leaflet-mouseposition/L.Control.MousePosition.js"></script>

1. /*Plugin Mouse Position Coordinate */
2. L.control.mousePosition({position:'bottomright',
3. separator: ',',
4. prefix: 'Koordinat : '
5. }).addTo(map);
d) Menambahkan Plugin Measurement Tool

1. 
2. <link rel="stylesheet" href="assets/plugins/leaflet-measure/leaflet-measure.css">

1. 
2. <script src="assets/plugins/leaflet-measure/leaflet-measure.js"></script>

1. /*Plugin Measurement Tool */
2. var measureControl = new L.Control.Measure({
3. position:'topright',
4. primaryLengthUnit: 'meters',
5. secondaryLengthUnit: 'kilometers',
6. primaryAreaUnit: 'hectares',
7. secondaryAreaUnit: 'sqmeters',
8. activeColor: '#FF0000',
9. completedColor: '#00FF00'
10. });
11. measureControl.addTo(map);
e) Menambahkan Plugin Easy Print

1. 
2. <link rel="stylesheet" href="assets/plugins/leaflet-easyprint/easyPrint.css">

1. 
2. <script src="assets/plugins/leaflet-easyprint/leaflet.easyPrint.js"></script>

1. /*Plugin EasyPrint */
2. L.easyPrint({
3. title: 'Print'
4. }).addTo(map);
Latihan 2
Lakukan modifikasi pada elemen berikut ini :
i. Ubah tata letak dan teks popup pada plugin sesuai kebutuhan

Draft - Spweb - Acara V - 2021

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Draft - Spweb - Acara V - 2021

Diunggah oleh

Hak Cipta:

Format Tersedia

ACARA V

PEMBUATAN WEBGIS MENGGUNAKAN LEAFLET JS – CUSTOMIZE AND PLUGINS

II. ALAT DAN BAHAN

III. DASAR TEORI

Gambar 3.1 Leaflet JS

Leaflet dirancang dengan mempertimbangkan kesederhanaan, kinerja, dan

3.4. LANGKAH KERJA

Gambar 3.2 Struktur Operasional WebGIS dalam Praktikum

IV. HASIL PRAKTIKUM

ESRI. 2020. Web GIS, Simply. https://www.esri.com/about/newsroom/insider/web-gis-

MODUL TEKNIS ACARA V.C

5.2. Mengaktifkan Xampp dan Geoserver

Jakankan geoserver (start Geoserver) untuk mendukung integrasi Geoserver – Leaflet JS

Tambahkan pada <body>

Siapkan file watermark dengan format .png (bebas). Simpan dalam

5.4. Scripting Leaflet Js – Plugin

Tuliskan script berikut ini pada bagian <head> !

Tuliskan script berikut ini pada bagian <body> !

Tuliskan script berikut ini pada bagian <body> !

b) Menambahkan Plugin Geolocation

Tuliskan script berikut ini pada bagian <head> !

Tuliskan script berikut ini pada bagian <body> !

Tuliskan script berikut ini pada bagian <body> !

c) Menambahkan Plugin Mouse Location Coordinate

Tuliskan script berikut ini pada bagian <head> !

Tuliskan script berikut ini pada bagian <body> !

d) Menambahkan Plugin Measurement Tool

Tuliskan script berikut ini pada bagian <head> !

Tuliskan script berikut ini pada bagian <body> !

Tuliskan script berikut ini pada bagian <body> !

e) Menambahkan Plugin Easy Print

Tuliskan script berikut ini pada bagian <head> !

Tuliskan script berikut ini pada bagian <body> !

Tuliskan script berikut ini pada bagian <body> !

Anda mungkin juga menyukai