GeoSIS ID

2016-12-25 12:48:00

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 1

Tutorial membuat Website berbasis GIS (Geographic Information System), atau yang lebih dikenal dengan sebutan WebGIS. Dalam proses pembuatannya akan menggunakan 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 :

SHP Administrasi Provinsi Bali

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.

Gambar 1 - 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 :

IMPORT DATA SHP DARI QGIS KE POSTGRESQL

Kemudian koneksikan database tersebut ke GeoServer, dan cara koneksi database di PostgreSQL ke GeoServer juga sudah pernah dibahas di artikel berikut :

KONEKSI POSTGRESQL KE GEOSERVER

Cara untuk koneksi ke GeoServer akan sedikit kami 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 "geos" kemudian masuk ke menu stores > add new store > PostGIS. Kemudian isikan settingan untuk koneksi ke database di PostgreSQL seperti berikut :

Gambar 2 - Koneksi ke database di PostgreSQL

Setelah berhasil maka akan muncul daftar layer yang ada di dalam database tersebut, seperti berikut :

Gambar 3 - Daftar Layer dari database

Berikutnya lakukan publikasi pada layer tersebut, dengan mengklik pilihan Publish. Lakukan settingan untuk publikasi kurang lebih seperti gambar berikut :

Gambar 4 - 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.

Gambar 5 - Layer Preview

Gambar 6 - 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.

Gambar 7 - 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 "geos".

Di dalam folder "geos" buat lagi beberapa folder diantaranya :

css, js, img, layer, leaflet

Gambar 8 - Susunan folder di dalam folder "geos"

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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos: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 geos. 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 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 -->
</head>
<body>
<!-- bagian ini akan di isi konten utama -->
</body>
</html>

Simpan file index.php tersebut di bagian luar di folder geos. 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 :

jQuery

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 A
DMINISTRASI
$.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 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="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/geos/ atau localhost/webgis/geos/index.php
Jika tahapan di atas diikuti dengan benar, maka hasilnya akan seperti gambar berikut :

Gambar 9 - Tampilan WebGIS dengan basemap 1

Gambar 10 - Tampilan WebGIS dengan basemap 2

Demikian tutorial cara Membuat WebGIS dengan Leaflet JavaScript part 1. Di part selanjutnya kita akan mengkategorikan vektor yang tertampil berdasarkan kabupaten, serta akan ditambahkan beberapa vektor lainnya.

Artikel Terkait :

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 1

Share This Post

Join our newsletter!