M11 - Dendy Elvian Darmansyah

PRAKTIKUM SIG WEB
WEB GIS dengan Leaflet dan Geoserver
16 Mei 2023
Dibuat oleh:
Dendy Elvian Darmansyah
21/472948/SV/18786
Program Sarjana Terapan

Teknologi Survei dan Pemetaan Dasar
SEKOLAH VOKASI
UNIVERSITAS GADJAH MADA
2023
Judul
WEB GIS dengan Leaflet dan Geoserver
Alat dan Bahan
Alat
1. Laptop ASUS X441

2. XAMPP
3. Visual Studio Code
4. QGIS
5. Geoserver
6. Leaflet
7. Notepad
8. Notepad ++
9. Microsoft Word
Bahan
1. Modul Praktikum Minggu 11

2. Data SHP Sleman (Batas desa,fasilitas umum, Ja
Langkah Kerja
A. Membuat Geoserver menjadi satu dengan Web Server

1. Melakukan pengaturan Apache (XAMPP), Config →
Apache(http:conf)
2. Melakukan pengubahan skripdengan menghilangkan tanda tagar (#)
pada bagian mod_proxy.so dan mod_proxy_http.so → Simpan (CTRL
+ S)
3. Masuk ke penyimpanan C → xampp → apache → conf → extra →

httpd-proxy.conf → tambahkan skrip seperti bagian di bawah ini →
Simpan
4. Restart
XAMPP →
Windows → Start Geoserver → buka Browser → Ketik
localhost/geoserver
B. Setting Geoserver
1. Buka penyimpanan C → Program files → Geoserver → webapps →
geoserver → Web-INF → web.xml → Lakukan pengubahan skrip
menggunakan Notepad ++
C. Leaflet dan OpenStreetMap
1. Download leaflet di browser
2. Buat folder gis kemudian didalamnya buat folder lagi yaitu css,js dan
libs.
3. Buat folder baru didalam folder libs dengan nama leaflet
4. Ekstrak hasil download yang masih dalam format *zip ke folder

htdocs/gis/libs/leaflet
5. Buka Visual Studio Code → Open folder htdocs/gis → tambahkan file
map01.html dan mymap.css → lakukan pembuatan skrip untuk
menampilkan basemap.
Skrip mymap01.html :
Skrip mymap.css :
Tampilan basemap :
D. Menambahkan data dari Geoserver
1. Salin file map01.html menjadi map02.html kemudian tambahkan skrip
untuk menampilkan data dari Geoserver
<!DOCTYPE html>
<html>
<head>
<title>Webgis 2: Geoserver Layer</title>
<link rel="stylesheet" href="libs/leaflet/leaflet.css" />
<link rel="stylesheet" href="css/mymap.css" />
<script src="libs/leaflet/leaflet.js"></script>
</head>
<body>
<div id="mapdiv"></div>
<script>
var mymap = L.map("mapdiv").setView([-7.66, 110.399], 11);
var osm =
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a
href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ["a", "b", "c"],
});
osm.addTo(mymap);
var yogya_desa = L.tileLayer.wms("http://localhost/geoserver/wms", {

layers: "sigweb:Batas_Desa",
format: "image/png",
transparent: true
});
yogya_desa.addTo(mymap);
var yogya_jalan = L.tileLayer.wms("http://localhost/geoserver/wms", {

layers: "sigweb:Jaringan_jalan",
transparent: true
});
yogya_jalan.addTo(mymap);
var yogya_fasum = L.tileLayer.wms("http://localhost/geoserver/wms", {

layers: "sigweb:Fasilitas_Umum",
transparent: true
});
yogya_fasum.addTo(mymap);
var overlaymap = {
"Yogya Desa": yogya_desa,
"Yogya Jalan": yogya_jalan,
"Yogya Fasilitas Umum": yogya_fasum
};
var basemap = {
"OpenStreetMap": osm
};
L.control.layers(basemap, overlaymap).addTo(mymap);
</script>
</body>
</html>
Tampilan layer :
E. Mengubah tampilan layer dari QGIS
1. Hubungkan Geoserver dengan QGIS melalui WFS, pastikan file SHP
telah diupload ke Geoserver
2. Add shapefile batas desa, jaringan jalan dan fasilitas umum ke

workspace QGIS
Tampilan workspace
3. Lakukan setting simbologi pada setiap layer dengan klik kanan layer →
properties → symbology → Ubah menjadi Categorized → Value
sesuaikan dengan informasi yang ingin ditampilkan → Save Style
4. Ubah format style menjadi sld → Simpan file → OK

5. Buka geoserver, Data → Style → Add a new style
6. Atur konfigurasi penyimpanan → pilih layer SLD yang telah disimpan

→ Upload → Validation → Save
7. Tampilkan style dengan layer, Data → Layers → pilih file →
Publishing → atur WMS setting sesuaikan default stylenya → save
8. Buka file map02.html di VS Code kemudian tampilkan hasil run

Hasil Pembahasan
I. Akses Geoserver
Pengubahan geoserver menjadi satu dengan web server bertujuan untuk

mempermudah dalam akses di browser dan dapat dikelola menjadi satu dengan
web server pada localhost serta tidak perlu menggunakan tambahan port pada
saat akses ke geoserver.
II. Tampilan Basemap dengan Leaflet
Tampilan basemap di atas disimpan ke dalam XAMPP untuk dapat
menampilkan hasil dari basemap ke browser serta hanya perlu menambahkan leaflet
yang telah didownload sebelumnnya.
III. Menambahkan Features dari Geoserver pada HTML
Tampilan di atas merupakan hasil dari skrip menambahkan data shapefile

melalui geoserver. Layer yang dipakai untuk peta digunakan hanya dalam format view
tidak bisa dilakukan editing atau proses analisis spasial. Hal ini dikarenakan
menggunakan WMS sebagai penghubung shapefile ke web server.
IV. Proses Styling pada web map
Hasil di atas merupakan tampilan peta setelah dilakukan styling melalui QGIS
yang kemudian disimpan dalam format *sld dan di upload ke Geoserver. Setelah
berada di Geoserver, HTML akan langsung menerima layer dalam bentuk yang telah
di update sehingga tampilan akan sedikit berubah pada simbologi.

M11 - Dendy Elvian Darmansyah

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

M11 - Dendy Elvian Darmansyah

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM SIG WEB

WEB GIS dengan Leaflet dan Geoserver

Dendy Elvian Darmansyah

Program Sarjana Terapan

WEB GIS dengan Leaflet dan Geoserver

Alat dan Bahan

1. Laptop ASUS X441

1. Modul Praktikum Minggu 11

A. Membuat Geoserver menjadi satu dengan Web Server

3. Masuk ke penyimpanan C → xampp → apache → conf → extra →

3. Buat folder baru didalam folder libs dengan nama leaflet

4. Ekstrak hasil download yang masih dalam format *zip ke folder

var yogya_desa = L.tileLayer.wms("http://localhost/geoserver/wms", {

var yogya_jalan = L.tileLayer.wms("http://localhost/geoserver/wms", {

var yogya_fasum = L.tileLayer.wms("http://localhost/geoserver/wms", {

2. Add shapefile batas desa, jaringan jalan dan fasilitas umum ke

4. Ubah format style menjadi sld → Simpan file → OK

6. Atur konfigurasi penyimpanan → pilih layer SLD yang telah disimpan

8. Buka file map02.html di VS Code kemudian tampilkan hasil run

Pengubahan geoserver menjadi satu dengan web server bertujuan untuk

III. Menambahkan Features dari Geoserver pada HTML

Tampilan di atas merupakan hasil dari skrip menambahkan data shapefile

Anda mungkin juga menyukai