Pembuatan WebGIS dengan menggunakan Leaflet JavaScript part 2. Sebelumnya sudah pernah di jelaskan bahan-bahan yang dibutuhkan serta proses pembuatan Web GIS tahap pertama di artikel berikut :
Di tahap ini, kita masih menggunakan bahan vektor yang sama dengan tutorial di part 1 (SHP Provinsi Bali). Namun ada tambahan plugin baru yang akan digunakan. Silahkan unduh plugin nya di link berikut :
Simpan hasil unduhan tersebut di folder leaflet (lihat pada tahap pembuatan WebGIS yang pertama), kemudian extract.
Sisipkan link css dan js dari setiap folder tersebut kedalam file index.php. Berikut link yang dipanggil :
<link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css"/> <link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" /> <script src="leaflet/leaflet-ajax/dist/leaflet.ajax.js"></script> <script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script> <script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
Sisipkan link tersebut di dalam tag head. Sebelumnya untuk memanggil link geojson dari GeoServer ke dalam Web, digunakan perintah berikut :
$.ajax({ // ini perintah syntax ajax untuk memanggil vektor
type: 'POST',
url: 'layer/request_bali.php', // INI memanggil link request_bali yang sebelumnya telah di buat
dataType: "json",
success: function(response){
var data=response;
L.geoJson(data,{
style: function(feature){
var Style1
return { color: "#cc3f39", weight: 1, opacity: 1 }; // ini adalah style yang akan digunakan
},
// MENAMPILKAN POPUP DENGAN ISI BERDASARKAN ATRIBUT KAB_KOTA
onEachFeature: function( feature, layer ){
layer.bindPopup( "<center>" + feature.properties.kab_kot + "</center>")
}
}).addTo(map); // di akhir selalu di akhiri dengan perintah ini karena objek akan ditambahkan ke map
}
});Karena objek poligon masih ditampilkan dalam satu warna dan masih transparan, maka atur agar objek poligon ditampilkan dengan perbedaan warna berdasarkan kabupaten, serta tambahkan juga efek hover ketika kursor berada di atas objek poligon. Maka ganti perintah untuk memanggil objek geojson dengan perintah berikut ini :
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ // sekarang perintahnya diawali dengan variabel
style: function(feature){
var fillColor, // ini style yang akan digunakan
kode = feature.properties.kode_kab; // pewarnaan objek polygon berdasarkan kode kabupaten di dalam file geojson
if ( kode > 5171 ) fillColor = "#ffd700";
else if ( kode > 5108 ) fillColor = "#4ba754";
else if ( kode > 5107 ) fillColor = "#9b3339";
else if ( kode > 5106 ) fillColor = "#dd38e0";
else if ( kode > 5105 ) fillColor = "#908965";
else if ( kode > 5104 ) fillColor = "#3ab7e9";
else if ( kode > 5103 ) fillColor = "#c8cf06";
else if ( kode > 5102 ) fillColor = "#2f838c";
else if ( kode > 5101 ) fillColor = "#fede36";
else fillColor = "#ff4040"; // no data
return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
},
onEachFeature: function(feature, layer){
layer.bindPopup("<center>" + feature.properties.kab_kot + "</center>"), // popup yang akan ditampilkan diambil dari filed kab_kot
that = this; // perintah agar menghasilkan efek hover pada objek layer
layer.on('mouseover', function (e) {
this.setStyle({
weight: 2,
color: '#72152b',
dashArray: '',
fillOpacity: 0.8
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
});
layer.on('mouseout', function (e) {
layer_ADMINISTRASI.resetStyle(e.target); // isi dengan nama variabel dari layer
info.update();
});
}
}).addTo(map);ketika dijalankan di browser hasilnya akan seperti gambar berikut :
 |
| Gambar 1 – WebGIS Provinsi Bali |
Selanjutnya tambahkan tool search dan dafaultextent ke dalam tampilan Web. Sisipkan script berikut ke dalam file index :
// MENAMBAHKAN TOOL PENCARIAN
var searchControl = new L.Control.Search({
layer: layer_ADMINISTRASI, // ISI DENGAN NANA VARIABEL LAYER
propertyName: 'kab_kot', // isi dengan nama field dari file geojson bali yang akan dijadiakn acuan ketiak melakukan pencarian
HidecircleLocation: false,
moveToLocation: function(latlng, title, map) {
//map.fitBounds( latlng.layer.getBounds() );
var zoom = map.getBoundsZoom(latlng.layer.getBounds());
map.setView(latlng, zoom); // access the zoom
}
});
searchControl.on('search:locationfound', function(e) {
e.layer.setStyle({});
if(e.layer._popup)
e.layer.openPopup();
}).on('search:collapsed', function(e) {
featuresLayer.eachLayer(function(layer) {
featuresLayer.resetStyle(layer);
});
});
map.addControl( searchControl ); //menambahakn tool pencarian ke tampilan map
// menambahkan tools defautl extent
L.control.defaultExtent().addTo(map);
Ganti icon XAMPP pada bagian header dengan icon/logo web sendiri, caranya tambahkan link berikut di dalam tag head :
<link rel="shortcut icon" href="img/lco.png"/> <!-- memanggil logo web di dalam foder img -->
Gabungan dari semua script di atas akan seperti berikut :
<!DOCTYPE html>
<html>
<head> <!-- untuk meta description,
keywords, dan author bisa gantu dan di sesuaikan tapi yang meta charset sama viewport jangan di ganti -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='description' content='WebGIS geosis.id menyajikan berbagai konten spasial ke dalam bentuk Website'/>
<meta name='keywords' content='WebGIS, WebGIS geos, WebGIS Indoensia'/>
<meta name='Author' content='Egi Septiana'/>
<title>WebGIS Info-Geospasial</title> <!-- title bisa di sesuaikan dengan nama judul WebGIS yang di inginkan -->
<link rel="shortcut icon" href="img/ICO.png"/>
<link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- memanggil css di folder leaflet -->
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
<link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css"/>
<link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" />
<script src="leaflet/leaflet.js"></script> <!-- memanggil leaflet.js di folder leaflet -->
<script src="js/jquery-3.1.0.min.js"></script> <!-- memanggil jquery di folder js -->
<script src="leaflet/leaflet-ajax/dist/leaflet.ajax.js"></script>
<script src="leaflet/leaflet-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js-->
<script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
<script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
</head>
<body>
<div id="map"> <!-- ini id="map" bisa di ganti dengan nama yang di inginkan -->
<script>
// MENGATUR TITIK KOORDINAT TITIK TENGAN & LEVEL ZOOM PADA BASEMAP
var map = L.map('map').setView([-8.4521135,115.0599022], 10);
// PILIHAN BASEMAP YANG AKAN DITAMPILKAN
var baseLayers = {
'Esri.WorldTopoMap': L.tileLayer.provider('Esri.WorldTopoMap').addTo(map),
'Esri WorldImagery': L.tileLayer.provider('Esri.WorldImagery')
};
// MENAMPILKAN TOOLS UNTUK MEMILIH BASEMAP
L.control.layers(baseLayers,{}).addTo(map);
// MENAMPILKAN SKALA
L.control.scale({imperial: false}).addTo(map);
// ------------------- VECTOR ----------------------------
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ // sekarang perintahnya diawali dengan variabel
style: function(feature){
var fillColor, // ini style yang akan digunakan
kode = feature.properties.kode_kab; // perwarnaan objek polygon berdasarkan kode kabupaten di dalam file geojson
if ( kode > 5171 ) fillColor = "#ffd700";
else if ( kode > 5108 ) fillColor = "#4ba754";
else if ( kode > 5107 ) fillColor = "#9b3339";
else if ( kode > 5106 ) fillColor = "#dd38e0";
else if ( kode > 5105 ) fillColor = "#908965";
else if ( kode > 5104 ) fillColor = "#3ab7e9";
else if ( kode > 5103 ) fillColor = "#c8cf06";
else if ( kode > 5102 ) fillColor = "#2f838c";
else if ( kode > 5101 ) fillColor = "#fede36";
else fillColor = "#ff4040"; // no data
return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
},
onEachFeature: function(feature, layer){
layer.bindPopup("<center>" + feature.properties.kab_kot + "</center>"), // popup yang akan ditampilkan diambil dari filed kab_kot
that = this; // perintah agar menghasilkan efek hover pada objek layer
layer.on('mouseover', function (e) {
this.setStyle({
weight: 2,
color: '#72152b',
dashArray: '',
fillOpacity: 0.8
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
});
layer.on('mouseout', function (e) {
layer_ADMINISTRASI.resetStyle(e.target); // isi dengan nama variabel dari layer
info.update();
});
}
}).addTo(map);
// MENAMBAHKAN TOOL PENCARIAN
var searchControl = new L.Control.Search({
layer: layer_ADMINISTRASI, // ISI DENGAN ANAM VARIABEL LAYER
propertyName: 'kab_kot', // isi dengan nama field dari file geojson bali yang akan dijadiakn acuan ketiak melakukan pencarian
HidecircleLocation: false,
moveToLocation: function(latlng, title, map) {
//map.fitBounds( latlng.layer.getBounds() );
var zoom = map.getBoundsZoom(latlng.layer.getBounds());
map.setView(latlng, zoom); // access the zoom
}
});
searchControl.on('search:locationfound', function(e) {
e.layer.setStyle({});
if(e.layer._popup)
e.layer.openPopup();
}).on('search:collapsed', function(e) {
featuresLayer.eachLayer(function(layer) {
featuresLayer.resetStyle(layer);
});
});
map.addControl( searchControl ); //menambahakn tool pencarian ke tampilan map
// menambahkan tools defautl extent
L.control.defaultExtent().addTo(map);
</script>
</div>
</body>
</html>
</body>
</html>
Simpan dan coba jalankan kembali di browser, maka hasilnya akan seperti gambar berikut :
 |
| Gambar 2 – Hasil Pencarian |
Di part selanjutnya kita akan coba menambahkan layer lain ke dalam tampilan web, serta akan menambahkan beberapa fitur tambahan.
Artikel Terkait :
- MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 3
- MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 1
- IMPORT DATA SHP DARI QUANTUM GIS KE POSTGRESQL
- KONEKSI POSTGRESQL KE GEOSERVER