MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 1

Leave a Comment
Assalamualaikum Wr.Wb

Artikel ini akan membahas tutorial membuat Website berbasis GIS (Geographic Information System), atau yang lebih dikenal dengan sebutan WebGIS. Dalam proses pembuatannya akan digunakan aplikasi GeoServer, PostgreSQL dan library Leaflet JavaScript. Untuk pengertian serta fungsi dari setiap tools yang digunakan sudah pernah di jelaskan di artikel berikut :
Dalam tahap pertama ini, akan digunakan contoh vektor untuk daerah Provinsi Bali yang bisa di unduh di link berikut :
Atau dapat juga menggunakan data lain yang dapat di unduh di link artikel berikut :
Pada proses pembuatan WebGIS ini, data vektor akan disimpan di database di PostgreSQL yang tujuannya agar penyimpanan data lebih rapih dan terstruktur, kemudian proses memasukan data vektor ke database akan dilakukan dengan cara import dengan menggunakan software Quantum GIS. Data yang sudah ada di dalam database akan dikoneksikan ke GeoServer dan dari GeoServer tersebut akan di panggil link dalam format GeoJson ke dalam script penyusun WebGIS.
Jadi intinya maksud dari tahapan-tahapan ini agar proses pertukaran serta alur data menjadi dinamis, serta efisien. Ketika akan memperbaharui atau menambah data, cukup dilakukan satu kali di software Quantum GIS yang terkoneksi ke PostgreSQL, nanti ketika halaman WebGIS di tampilkan maka data vektor akan otomatis sudah diperbaharui sesuai dengan yang ada di database.
Proses Alur Data
Proses Alur Data
Pertama jalankan Quantum GIS dan PostgreSQL kemudian import data SHP ke dalam database di PostgreSQL, caranya sudah pernah dibahas di artikel berikut :
Kemudian koneksikan database tersebut ke GeoServer, dan cara koneksi database di PostgreSQL ke GeoServer juga sudah pernah dibahas di artikel berikut :
Cara untuk koneksi ke GeoServer akan sedikit saya ulangi, setelah Program PgAdminIII (PostgreSQL) di jalankan kemudian jalankan juga program GeoServer kemudian akses dan login ke dalamnya.
Buat workspace baru, di sini workspace di beri nama "info-geospasial" kemudian masuk ke menu stores > add new store > PostGIS. Kemudian isikan settingan untuk koneksi ke database di PostgreSQL seperti berikut :
Koneksi ke database di PostgreSQL
Koneksi ke database di PostgreSQL
Setelah berhasil maka akan muncul daftar layer yang ada di dalam database tersebut, seperti berikut :
Daftar Layer dari database
Daftar Layer dari database
Berikutnya lakukan publikasi pada layer tersebut, dengan mengklik pilihan Publish. Lakukan settingan untuk publikasi kurang lebih seperti gambar berikut :
Settingan untuk publikasi Layer di GeoServer
Settingan untuk publikasi Layer di GeoServer
Untuk penjelasan setiap form isian dapat di baca dan di pahami di artikel Koneksi PostgreSQL ke GeoServer
Setelah tahapan di atas di lakukan, sekarang masuk ke menu Layer Preview kemudian coba tampilkan layer yang barusan di Publish (Layer Bali) ke dalam tampilan OpenLayer.
Layer Preview
Layer Preview
Layer Bali di dalam tampilan OpenLayer
Layer Bali di dalam tampilan OpenLayer
Pada gambar di atas terlihat objek pulau Bali yang muncul dalam tampilan OpenLayer di GeoServer, berarti proses koneksi database ke GeoServer berjalan dengan benar. Selanjutnya kembali ke Layer Preview lalu tampilkan Layer Bali ke dalam tampilan GeoJSON.
GeoJSON Layer Bali
GeoJSON Layer Bali
Sekarang masuk ke tahap pembuatan WebGIS. Tahap sebelumnya merupakan tahap untuk mempersiapkan data yang dibutuhkan. Sebelumnya pastikan di laptop/PC yang digunakan sudah terinstal program XAMPP yang berfungsi agar dapat menjalankan website berbasis PHP. Karena WebGIS yang akan kita buat akan dibangun dengan beberapa bahasa pemrograman.
Softwarenya sendiri dapat di unduh dengan bebas di web resminya, untuk cara instalasi tidak akan dijelaskan di artikel ini, silahkan cari sendiri caranya di internet.
Admin asumsikan bahwa program XAMPP sudah berhasil terinstal di laptop/PC yang digunakan, sekarang buat folder di directory instalasi XAMPP, yaitu di XAMPP > htdocs. Buat folder WebGIS kemudian di dalamnya buat lagi folder untuk nama dari web yang dibuat (bebas) sebagai contoh di sini nama foldernya adalah "info-geospasial".
Di dalam folder "info-geospasial" buat lagi beberapa folder diantaranya :
css, js, img, layer, leaflet
Susunan folder di dalam folder "info-geospasial"
Susunan folder di dalam folder "info-geospasial"
Sekarang jalankan program XAMPP kemudian run pada server Apache. Buka text editor bisa pakai notepad, notepad ++, sublime, ataupun text editor lainnya.
Copy link address pada halaman Layer Bali yang ditampilkan ke dalam format GeoJSON (perhatihan gambar tampilan halaman GeoJSON, khususnya di bagian link address. Copy link tersebut). Di dalam text editor buat file baru dengan nama request_bali.php dan di dalamnya isi dengan syntax seperti berikut :

<?php
$url=file_get_contents("http://localhost:3615/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:BALI_ADM&outputFormat=application%2Fjson");  
	# url yang ada di dalam ("") itu link address dari halaman GeoJSON.. jangan luap hapus bagian &maxFeatures=50
echo($url);
?>
save file tesebut di dalam folder layer di dalam folder info-geospasial. Tahap selanjutnya membuat halaman utama WebGIS. Buat file index.php kemudian isi dengan strukut dasar html 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 info-geospasial.com menyajikan berbagai konten spasial ke dalam bentuk Website'/>
<meta name='keywords' content='WebGIS, WebGIS info-geospasial, WebGIS Indoensia'/>
<meta name='Author' content='Egi Septiana'/> 
<title>WebGIS Info-Geospasial</title> <!-- title bisa di sesuaikan dengan nama judul WebGIS yang di inginkan -->
</head>
<body>
<!-- bagian ini akan di isi konten utama -->
</body>
</html>
Simpan file index.php tersebut di bagian luar di folder info-geospasial. Selanjutnya tambahakan file plugin leaflet JavaScript berikut di folder leaflet.
Silahkan unduh terlebih dahulu kemudian ekstrak dan simpan di folder leaflet. Unduh juga file jQuery di link berikut :
Untuk plugin leafletJS unduh yang legacy atau stable version. dan untuk jQuery unduh yang versi compressed. Simpan file jQuery di folder js. Di dalam file index.php tepat di atas tag head
tambahakan link pemanggil CSS, dan JS seperti berikut :

<link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- memanggil css di folder leaflet -->
<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-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js di folder leaflet provider -->
Selanjutnya di dalam tag body buat sebuat syntax id="map" dan di dalamnya isi dengan JavaScript untuk memanggil peta ke dalam halaman Web. Berikut syntax nya :

<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 ----------------------------
// REQUEST BALI ADMINISTRASI
$.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
    }
});
</script>
</div> 
Kemudian buat file style.css dan simpan di folder css, isi file tersebut dengan syntax berikut :
 html {
  height: 100% 
 }
 body { 
  height: 100%; 
  margin: 0; 
  padding: 0;
 }
 #map {
  height:100%; 
} 
Terakhir tambahkan link pemanggil file style.css tersebut ke file index.php, tempatkan di bawah syntax pemanggil CSS leaflet.
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
Setelah semua tahapan di atas diikuti, maka berikut hasil akhir setelah di gabungkan semuanya :

<!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 info-geospasial.com menyajikan berbagai konten spasial ke dalam bentuk Website'/>
<meta name='keywords' content='WebGIS, WebGIS info-geospasial, 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="stylesheet" href="leaflet/leaflet.css" /> <!-- memanggil css di folder leaflet -->
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
<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-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js di folder leaflet provider -->
</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 ----------------------------
// REQUEST BALI ADMINISTRASI
$.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
    }
});
</script>
</div> 
</body>
</html>
</body>
</html>
Save dan coba jalankan di browser dengan mengetik link berikut di link address pada browser :
localhost/webgis/info-geospasial/ atau localhost/webgis/info-geospasial/index.php
Jika tahapan di atas diikuti dengan benar, maka hasilnya akan seperti gambar berikut :
Tampilan WebGIS dengan basemap 1
Tampilan WebGIS dengan basemap 1
Tampilan WebGIS dengan basemap 2
Tampilan WebGIS dengan basemap 2
Demikian tutorial cara Membuat WebGIS dengan Leaflet JavaScript part 1. Di part selanjutnya kita akan me Thematic vektor nya sehingga setiap kabupaten memiliki warna yang berbeda, serta akan ditambahkan beberapa vektor tambahan. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

0 komentar:

Post a Comment