LAPORAN PRAKTIKUM

SISTEM INFORMASI GEOGRAFIS

JUDUL :
IMPLEMENTASI WEBGIS MENGGUNAKAN
DATA GEOJSON DAN LEAFLETJS

Disusun oleh:
Vina Afrilia Kurniawan (19102218)

TEKNIK INFORMATIKA
INSTITUT TEKNOLOGI TELKOM PURWOKERTO
BANYUMAS, JAWA TENGAH
2022
Pembahasan
Pembahasan pada praktikum matakuliah SIG (Sistem Informasi
Geografis) yaitu implementasi WebGIS leafletjs menggunakan data geojson.
WebGIS merupakan pengembangan dari aplikasi SIG berbasis web yang
terintegrasi satu sama lain. WebGIS memiliki berbagai fitur yang bisa
mendukung dalam menampilkan dan menganalisis data untuk bisa diakses
secara bebas melalui laman internet. Leaflet merupakan library javascript open
source yang berguna untuk membangun aplikasi peta interaktif berbasis web.
Leaflet mampu menampilkan layer dari file geojson, memberi style dan membuat
layer yang interaktif seperti menampilkan marker yang menampilkan popup
informasi ketika di klik.
Pada praktikum tujuh mahasiswa diharapkan dapat mengimplementasikan
WebGIS leafletjs menggunakan data geojson yang sudah diproses sebelumnya
menggunakan QGIS. Kemudian data geojson pada Kabupaten Banyumas dan
setiap kabupaten yang berada pada daerah Kabupaten Banyumas akan di
proses dan ditampilkan pada WebGIS. Dengan mengubah latitude dan longitude
pada var map dan diletakan pada setView. Dalam penggunaan leafletjs
dibuatlah popup pada peta dengan mendeklarasikan function popup.

Langkah-Langkah Praktikum

Langkah Praktikum Pembahasan

Langkah pertama untuk
mengincludekan data geojson dengan
cara buka leafletjs dan text editor.
Kemudian masukkan data geojson yang
sudah diproses sebelumnya pada QGIS.

SIG-19102218-07
Langkah berikutnya sertakan file Leaflet
CSS di bagian kepala dokumen setelah
itu sertakan juga file JavaScript Leaflet
setelah CSS Leaflet. Selanjutnya
inputkan file leaflet.ajax.min.js

Selanjutnya tambahkan id mapsku pada

body file html fungsinya untuk meletakan
file id mapnya. Kemudian tambahkan
script mapsku.js diluar dari file htmlnya.
Setelah itu beri style dari cssnya.

Setelah itu buat file baru bernama

mapsku.js untuk memasukan peta.
Variable var map = L.map berfungsi
untuk mengincludekan variable map
dimana map pertamakali akan terlihat
pada titik yang ada pada gambar
disamping. Kemudian untuk
L.tilelayernya menggunakan
OpenStreetMap.
Var marker berfungsi untuk
menambahkan satu titik pada peta,
selanjutnya var circle untuk
menambahkan lingkaran, dan var
polygon untuk menambahkan polygon
pada peta. Dapat menggunakan
perintah seperti pada gambar disamping
atau bisa diakses melalui website
leafletjs.com

SIG-19102218-07
Setelah itu kita coba ubah
L.tilesLayernya menggunakan mapbox
dengan memasukan alamat API
disamping. Maka akan mucul tampilan
peta seperti pada gambar disamping.

Langkah berikutnya ubah var map pada

setView(latitude dan longitude)
sesuaikan dengan data geojson yaitu
pada daerah Kabupaten Banyumas.
Maka akan muncul peta pada daerah
Kabupaten Banyumas.

Langkah terakhir pastikan file geojson

berada satu folder dengan file html dan
file js sebelumnya. Kemudian
tambahkan script untuk
mendeklarasikan file geojson dengan
memasukan var geoJsonLayer seperti
pada langkah nomer 1 gambar
disamping kiri. Selanjutnya jika ingin
menampilkan popup tambahkan script
untuk mendeklarasikan function popup
seperti pada langkah nomer 2 gambar
disamping kiri. Kemudian panggil
SIG-19102218-07
function popup pada var geoJsonLayer.
Setelah itu akan muncul tampilan peta
daerah Kabupaten Banyumas dan
tampilan popup keterangan daerah yang
tertera.

SIG-19102218-07