Web GIS dengan Codeigniter 3 dan Leaflet

Penyusun Fathurrahmani

Last Edited : 17/5/2020

Materi:

1. Instalasi Codeigniter dan Leaflet

2. Bekerja dengan Marker
3. Bekerja dengan GeoJSON
4. Multi Bidang GeoJSON
5. Polygon GeoJSON dan MySQL
Bab 1 Instalasi Codeigniter dan Leaflet
Persiapan
Alat dan Bahan:
1. PC/Notebook
2. Visual Studio Code (Code Editor)
3. XAMPP
4. Codeigniter versi 3
5. Leaflet versi terbaru
6. Sliding Menu jquery

Instalasi Codeigniter
1. Aktifkan webserver apache dan database mysql melalui XAMPP.

2. Download codeigniter versi 3 dari https://codeigniter.com/download.

3. Ekstrak hasil download dan pindahkan foldernya ke xampp -> htdocs, beri nama “webgis”.
4. Buka browser kemudian akses http://localhost/webgis. Jika tampilannya muncul seperti gambar
dibawah, maka instalasi codeigniter sudah berhasil.
 5. Penjelasan detil mengenai codeigniter bisa dipelajari dimata kuliah permrograman web 2.

Pengaturan Codeigniter
1. Buka folder “webgis” menggunakan visual studio code

2. Buat controller Home (home.php) dan view Home (v_home.php) dengan cara mengganti
welcome.php -> home.php dan welcome_message.php -> v_home.php

home.php

v_home.php
 3. Ubah pengaturan di config.php untuk mengubah base_url dan index_page (menghilangkan
index.php di url)

Tambahkan pada kode berikut pada .htaccess root folder

4. Ubah pengaturan di autoload.php untuk menambahkan helper url

5. Ubah pengaturan di routes.php untuk mengganti default controller

6. Hasil setelah pengaturan codeigniter dilakukan

Instalasi sliding menu jquery

1. Download sliding menu jquery dari https://www.jqueryscript.net/menu/Sliding-Side-Menu-
Panel-with-jQuery-Bootstrap-BootSideMenu.html
2. Buat folder assets di root folder, kemudian buat folder vendor didalam folder assets
3. Pindahkan folder hasil ekstraksi sliding menu jquery ke dalam folder vendor.
4. Salin kode dari url berikut ke v_home.php:
 https://www.jqueryscript.net/demo/Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-
BootSideMenu/
5. Sesuaikan path css dan js

6. Hapus slide sebelah kanan

7. Hasil akhirnya bisa disesuaikan dengan tampilan yang ingin dimunculkan.

Instalasi Leaflet
1. Download leaflet terbaru dari https://leafletjs.com/download.html
2. Ekstrak hasil download dan pindah ke folder webgis->assets->vendor
3. Lakukan pengaturan terhadap css dan javasript leaflet

4. Tambahkan style berikut:

5. Buat frame peta

6. Tambahkan script (javascript) berikut

7. Hasil akhir
Bab 2 Bekerja dengan Marker

Persiapan
Alat dan bahan:

1. Seperti bab 1
2. MariaDB/MySQL 10

Panduan detil bisa dilihat di https://leafletjs.com/examples/quick-start/

Cara menambahkan marker:

1. Tambah kode berikut pada script:

2. Tampilan pada browser jika marker berhasil ditambahkan

Multimarker menggunakan database

Database yang digunakan adalah MariaDB/MySQL 10

Persiapan database
1. Buatlah database dengan nama “webgis”
2. Buat tabel dengan nama “faskes”
id_faskes: autoincreament, kat_faskes: enum
Menambah data Faskes
1. Buka google maps (https://www.google.com/maps/)
2. Cari lokasi RSUD H. Boejasin Pelaihari, temukan koordinatnya dengan cara klik kanan peta
kemudian pilih “What’s here?”, maka koordinatnya akan muncul seperti gambar berikut:

3. Tambahkan titik koordinatnya ke database

Pengaturan database di Codeigniter

Pengaturan database dilakukan untuk menghubung leaflet dengan database.

1. Buka folder webgis->application->config, buka dan ubah file database.php seperti gambar
berikut:

2. Ubah file autoload.php seperti gambar berikut:

Membuat Model Faskes
Buat file baru dengan nama Home_model.php didalam folder models

Membuat Controller Faskes

Modifikasi Home.php yang berada didalam folder controller

1. Tambahkan kontruktor

2. Tambahkan fungsi faskes

3. Akses url http://localhost/webgis/home/faskes dibrowser, sehingga menampilkan data JSON

seperti berikut:

Menampilkan data JSON di Peta

Referensi berasal dari https://www.w3schools.com/jquery/ajax_getjson.asp

1. Modifikasi script pada file v_home.php di folder views. Script ini akan mengambil data JSON dari
url http://localhost/webgis/home/faskes kemudian menampilkannya di console.log
 Hasilnya:

2. Data yang ditampilkan tidak cukup hanya dilihat di console log. Data harus ditampilkan di peta.
Modifikasi kembali v_home.php

Hasilnya:

Mengganti Ikon Marker

Referensi lengkap bisa diakses di: https://leafletjs.com/reference-1.6.0.html#marker

Ikon marker bisa didownload di https://mapicons.mapsmarker.com/

1. Buat folder baru “images” dan didalamnya buat lagi folder “marker”
 2. Salin gambar marker ke folder marker

3. Buat variabel baru pada script

a. Variabel base_url

b. Variabel iconFaskes

c. Variabel markerFaskes

4. Daftarkan marker di L.marker

Membuat Event Handling (onClick)

Setiap marker yang muncul dipeta menyimpan detil informasi. Informasi ini akan muncul jika di klik oleh
pengguna.

1. Buat grup layer

2. Daftarkan marker kedalam grup dan buat variabel markerFaskes.id untuk menyimpan id faskes

3. Buat fungsi groupClick

4. Hasilnya
Bab 3 Bekerja dengan GeoJSON

Persiapan
Alat dan bahan:

1. Seperti bab 2
2. Geojson.io

Membuat polygon menggunakan geojson

Menggunakan geojson.io kita dapat membuat titik (point), garis (line) dan/atau polygon. Titik koordinat
yang dikumpulkan akan disimpan didalam sebuah file dengan ekstensi .geojson

1. Buka geojson melalui url berikut: http://geojson.io/. Polygon yang dibuat pada modul ini adalah
pemukiman

2. Cari “pelaihari” pada kotak pencarian dengan cara klik gambar kaca pembesar

3. Hasil pencarian “pelaihari”

4. Zoom in peta menggunakan tombol + atau menggunakan scroll mouse untuk mendapatkan
penampang pemukiman

5. Ubah tema peta menjadi satellite, terletak pada kiri bawah

6. Cari pemukiman yang ingin di digitasi, berikut contoh pemukiman yang ingin didigitasi

7. Gunakan tools ini untuk mendigitasi

8. Lakukan digitasi
 9. Klik kiri pada bidang hasil digitasi untuk melakukan perubahan property. Bisa merubah warna
dll.

10. Tambahkan custom row pada property, dengan mengklik “add row”. Penambahan custom row
ini bermanfaat untuk melakukan filtering dan grouping layer nantinya

11. Klik save kemudian pilih geoJSON.

12. Simpan file hasil download tersebut

13. Satu file geojson bisa menyimpan 3 jenis bidang data vektor (point, line dan polygon).

Menampilkan data dari file geoJSON

1. Salin file map.geojson yang sudah dibuat dan didownload sebelumnya ke folder project
webgis->assets->geojson. Jika foldernya tidak ada maka buatlah foldernya.

2. Saatnya ngoding
3. Tulis kode berikut pada v_home.php, berada pada blok script yang sudah dibuat sebelumnya
 $.getJSON(base_url+"assets/geojson/map.geojson", function(result){
geoLayer = L.geoJson(result, {
style: function(feature) {
return {
fillOpacity: 0.8,
weight: 1,
opacity: 1,
color: "#ff0000"
}
},
onEachFeature: function(feature, layer){
var lat = parseFloat(feature.properties.latitude);
}
}).addTo(map);
});

4. Anda bisa mengubah style dari polygon yang ditampilkan pada peta di blok kode berikut:

style: function(feature) {
return {
fillOpacity: 0.8,
weight: 1,
opacity: 1,
color: "#ff0000"
}
}

5. Hasil akhirnya
Bab 4 Multi Bidang GeoJSON

Persiapan
Alat dan bahan:

1. Seperti bab 3
2. Geojson.io

Membuat Multi Bidang pada GeoJSON

1. Buka http://geojson.io/ pada browser.
2. Pilih menu open->file, kemudian pilih file geojson sebelumnya yang berada pada folder assets-
>geojson.

3. Hasilnya akan seperti gambar berikut (hasilnya mungkin berbeda-beda tergantung dari polygon
yang kalian buat di materi sebelumnya). Gambar yang ditampilkan adalah pemukiman.
4. Tambahkan data polygon baru yaitu lahan kosong. Tahapannya sama seperti materi ketiga.

5. Untuk menampilkan base map seperti gambar diatas kalian bisa mengubah base mapnya
menjadi Mapbox. Basemap berada pada pojok kiri bawah.

6. Tambahkan kembali data polygon yakni perkantoran

7. Tambahkan detil property untuk data polygon lahan kosong. Detil yang ditambahkan adalah id,
kode, kategori, lat dan long. Lat adalah latitude dan long adalah longitude, kedua property ini
nanti akan digunakan untuk membuat center dari data polygon yang dibuat. Cara
menambahkannya adalah dengan cara klik bidang polygon maka akan muncul pop up seperti
gambar dibawah, kemudian klik add row.

8. Tambahkan juga property untuk data polygon perkantoran. Langkahnya sama seperti poin 7

9. Jangan lupa simpan setiap kali melakukan perubahan pada detil property dengan cara mengklik
Save.
10. Selanjutnya simpan GeoJSON yang sudah dibuat. Caranya pilih menu Save->GeoJSON.
 11. Browser akan mendownload file GeoJSON kalian. Kemudian salin file tersebut kedalam folder
xampp->htdocs->webgis->assets->geojson. File geojson terdahulu ditimpa saja dengan file
geojson yang baru.
12. Lihat hasil perubahannya dengan cara mengakses http://localhost/webgis/.

13. Lakukan langkah dari poin 1 – 11 jika kalian ingin melakukan perubahan terhadap GeoJSON.

Mengubah Style dari GeoJSON

Tiga bidang polygon yang dibuat sebelumnya mempunyai kategori yang berbeda, namun tampilan yang
muncul mempunyai warna yang sama. Hal ini, bisa dibedakan dengan menggunakan style.

1. Buka project webgis kalian menggunakan kode editor. Saatnya ngoding.

2. Ada 3 kategori yang sudah dibuat, 1 adalah pemukiman, 2 adalah lahan kosong, 3 adalah
perkantoran. Sekarang kita gunakan 3 kategori ini untuk membedakan stylenya.
3. Cari kode berikut pada file v_home.php kemudian modifikasi

$.getJSON(base_url+"assets/geojson/map.geojson", function(result){
geoLayer = L.geoJson(result, {
style: function(feature) {
var kategori = feature.properties.kategori;
if (kategori == 1) {
return {
fillOpacity: 0.8,
weight: 1,
opacity: 1,
color: "#ff0000"
};
} else if (kategori == 2) {
return {
fillOpacity: 0.8,
 weight: 1,
opacity: 1,
color: "#3dfc03"
};
} else {
return {
fillOpacity: 0.8,
weight: 1,
opacity: 1,
color: "#1403fc"
};
}
},
onEachFeature: function(feature, layer){
var lat = parseFloat(feature.properties.latitude);
}
}).addTo(map);
});

4. Hasilnya akan seperti gambar berikut. Merah untuk pemukiman, hijau untuk lahan kosong dan
biru untuk perkantoran.

Membuat Detil Setiap Bidang

Setiap bidang polygon bisa kita tambah detil berupa gambar. Gambar akan muncul apabila bidang diklik.

1. Siapkan gambar yang akan digunakan untuk setiap bidang

2. Gambar bisa didapatkan dari URL berikut
https://cdn.pixabay.com/photo/2017/11/02/13/41/athens-2911212_1280.jpg
3. Cari kode berikut pada file v_home.php kemudian modifikasi

onEachFeature: function(feature, layer){

var kode = feature.properties.kode;
var info_bidang = "<h4 style='text-align:center'>Info
Bidang</h4>";
info_bidang += "<a href='<?= base_url()?>home/detilbidang
/"+kode+"'><img src='https://cdn.pixabay.com/photo/2017/11/02/13/41/athens-
2911212_1280.jpg' width=100%></a>";
info_bidang += "<h5 style='text-
align:center'><a href='<?= base_url()?>home/detilbidang/"+kode+"'>Detil</a></
h5>";

layer.bindPopup(info_bidang, {
maxWidth: 230,
closeButton: true,
offset: L.point(0, 20)
});

layer.on('click', function(){
layer.openPopup();
});
}

4. Hasil dari kode tersebut adalah pop up dari setiap bidang dan menampilkan gambar serta link
detil yang di munculkan berdasarkan kode polygon dari geojson.
Bab 5 Polygon GeoJSON dan MySQl

Persiapan
Alat dan bahan:

1. Seperti bab 4
2. Geojson.io
3. MySQL

Materi di bab 4 kita sudah berhasil menampilkan gambar dan pop up dari bidang polygon yang dibuat
menggunakan GeoJSON, namun gambarnya masih statis dan detil dari bidang belum ada. Materi dibab 5
ini kita akan membuat gambarnya ditampilkan berdasarkan data yang terdapat di database dan
menampilkan detil dari setiap bidang yang datanya juga berasal dari database MySQL.

Membuat Tabel Bidang

1. Buat tabel baru dengan nama “bidang”
2. Buat struktur tabelnya seperti gambar berikut

3. Isi tabel bidang dengan data berikut

Membuat Tabel Dokumentasi

1. Buat tabel baru dengan nama “dokumentasi”. Tabel ini nantinya akan berelasi dengan tabel
bidang, karena satu bidang nantinya akan bisa mempunyai banyak dokumentasi (foto).
 2. Buat struktur tabelnya seperti gambar berikut

3. Isi tabel dokumentasi dengan data berikut

Mempersiapkan Direktori Foto

1. Buat folder baru dengan nama “uploads” didalam folder xampp->htdocs->webgis->assets
2. Tambahkan foto yang sesuai dengan penamaan gambar ditabel bidang dan dokumentasi

3. Kalian bisa menggunakan foto masing-masing tapi dengan penamaan yang sama dengan gambar
diatas.

Membuat fungsi foto()

Fungsi foto() adalah fungsi yang bertugas untuk mengambil data nama file gambar dari database
berdasarkan kode bidang. Caranya mudah tinggal kalian modifikasi controller home.php dengan
menambahkan fungsi foto(), seperti kode dibawah

public function foto($kode=null)

{
$data = $this->db->limit(1)->get_where('bidang', array('kode'=>$kode))-
>row()->gambar;
echo json_encode($data);
}
Implementasi fungsi foto()
Untuk mengimplementasikan fungsi foto() kalian bisa memodifikasi file v_home.php dengan mengubah
sumber foto yang asalnya statis menjadi dinamis mengambil dari database. Berikut kodenya

onEachFeature: function(feature, layer){

var kode = feature.properties.kode;
$.getJSON(base_url+"home/foto/"+kode, function(result){
// alert(result);
var info_bidang = "<h4 style='text-
align:center'>Info Bidang</h4>";
info_bidang += "<a href='<?= base_url()?>home/detilbidang
/"+kode+"'><img src='<?= base_url() ?>assets/uploads/"+result+"' width=100%></a>"
;
info_bidang += "<h5 style='text-
align:center'><a href='<?= base_url()?>home/detilbidang/"+kode+"'>Detil</a></h5>"
;

layer.bindPopup(info_bidang, {
maxWidth: 230,
closeButton: true,
offset: L.point(0, 20)
});

layer.on('click', function(){
layer.openPopup();
});
});
}

$getJSON() adalah fungsi dari AJAX untuk mengambil data JSON dari URL dan menyimpannya kedalam
variabel result. Berikut hasilnya.

Foto dengan kategori perkantoran.

Foto dengan kategori lahan kosong.

Foto dengan kategori Pemukiman.

Membuat fungsi detilbidang()

Buat fungsi detilbidang() seperti kode berikut:

public function detilbidang($kode=null)

{
$data['kode'] = $kode;
$data['bidang'] = $this->db->get_where('bidang',array('kode'=>$kode))-
>row_array();
$data['dok'] = $this->db-
>get_where('dokumentasi', array('kode_bidang'=>$kode))->result_array();
$this->load-view(v_detil, $data);
}
Membuat view v_detil.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web GIS</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="styles
heet" type="text/css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/
css/bootstrap.min.css">
<link href="<?= base_url()?>assets/vendor/leaflet/leaflet.css" rel="styleshee
t">
<!-- HTML5 shim e Respond.js per rendere compatibile l'HTML 5 in IE8 -->
<!-
- ATTENZIONE: Respond.js non funziona se la pagina viene visualizzata in locale f
ile:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!-- Owl Carousel -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-
carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-
carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-
carousel/1.3.3/owl.transitions.min.css">

<style type="text/css">
.user {
padding: 5px;
margin-bottom: 5px;
}

#mapid {
 height: 380px;
}

.peta {
float: left;
width: 50%;
}

.foto {
float: right;
width: 50%;
height: 380px;
}

.foto img {
height: 380px;
width: 100%;
}

.detilpeta {
width: 100%;
padding-top: 20px;
}

</style>
</head>

<body>
<div class="peta">
<div id="mapid"></div>
</div>
<div class="foto owl-carousel">
<?php foreach($dok as $data) { ?>
<img src="<?= base_url()?>assets/uploads/<?= $data['gambar'] ?>">
<?php } ?>
</div>
<div class="detilpeta">
<h3>Informasi Detil Peta</h3>
<h5>Nama Bidang : <?= $bidang['nama']; ?></h5>
<h5>Keterangan : <?= $bidang['ket']; ?></h5>
</div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min
.js"></script>
 <script src="<?= base_url()?>assets/vendor/leaflet/leaflet.js"></script>

<!-- Owl Carousel -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-
carousel/1.3.3/owl.carousel.min.js"></script>

<script type="text/javascript">
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});

</script>

<script type="text/javascript">
var map = L.map('mapid').setView([-3.842695, 114.6620476], 13);
var base_url = "<?= base_url() ?>";
var v_kode = "<?= $kode ?>";
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright
">OpenStreetMap</a> contributors'
}).addTo(map);

$.getJSON(base_url + "assets/geojson/map.geojson", function (result) {

geoLayer = L.geoJson(result, {
style: function (feature) {
var kode = feature.properties.kode;
if (kode == v_kode) {
return {
fillOpacity: 0.8,
fillColor: "#3dfc03",
weight: 1,
opacity: 1,
color: "#ff0000 "
};
} else {
return {
fillOpacity: 0.0,
weight: 1,
opacity: 1,
 color: "#ff0000"
};
}
},
onEachFeature: function (feature, layer) {
var kode = feature.properties.kode;
var center = getCentroid(feature.geometry.coordinates[0]);
if (kode == v_kode) {
map.flyTo([center[1], center[0]], 18, {
animate: true,
duration: 1
});
L.marker([center[1], center[0]]).addTo(map);
}
}
}).addTo(map);
});

var getCentroid = function (coord) {

var center = coord.reduce(function (x, y) {
return [x[0] + y[0] / coord.length, x[1] + y[1] / coord.length]
}, [0, 0])
return center;
}

</script>
</body>

</html>

Hasil akhir detil informasi peta