MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 5

Assalamualaikum Wr.Wb 

Melanjutkan artikel tentang proses pembuatan WebGIS dengan Leaflet Javascript, pada artikel ini akan dijelaskan bagaimana cara mengaktifkan beberapa menu yang tersedia seperti info, legenda, dan download. Setiap isi menu akan ditampilakan dalam bentuk popup, pertama pastikan pada setiap tag "a href" di setiap menu tepat didalam tanda koma atas (") isi dengan tulisan #info (sesuaikan untuk masing masing menu, misal untuk menu download isi dengan #download). Isi pada menu info hanya berupa teks sambutan selamat datang dan/atau teks yang menjelaskan fungsi dari WebGIS itu sendiri. Copy script dan tulisan berikut dan simpan tepat di atas tag pembuka footer pada file index.php :
<!-- ISI MENU INFO-->
<div id="info">
            <div class="window1">
            <a href='#' class='close-button' title='Close'>Close</a>
            <h1>SELAMAT DATANG</h1>
<p>WebGIS (geographic information system) INFO-GEOSPASIAL, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi pembaca perihal hasil dari proses pembelajaran/pembuatan WebGIS yang di jalani. Beberapa artikel terkait proses pembuatan WebGIS ini sudah dibaca dan di perlajari oleh banyak orang dan banyak apresiasi serta tanggapan yang cukup positif dari para pembaca.</p><br>
<p>Hal tersebut mendorong admin untuk terus berusaha membagi ilmu serta pengetahun terkait Geospasial, khususnya Pembuatan WebGIS kepada para pembaca serta pengikut blog INFO-GEOSPASIAL.</p><br>
<p>Terimkasih saya ucapkan kepada para pembaca, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di blog INFO-GEOSPASIAL dapat bermanfaat, dan tidak lupa diharapkan adanya tanggapan berupa kritik maupun saran bilamana ada hal-hal yang dirasa salah atau kurang tepat terkait konten artikel yang di bagian.</p><br>
<center><strong>EGI SEPTIANA</strong></center>
     </div>
   </div>
 <!--  MENU INFO END -->
Selanjutkan agar isi dari menu tersebut dapat di tampilkan dalam bentuk popup, maka buat file popup-menu.css simpan di dalam folder css, kemudian isi file tersebut dengan script berikut :
/*STYLE MENU INFO*/
#info h1{
line-height:20px;
margin-top:30px;
padding: 0;
font-family: "Andale Mono", "Monotype.com", monospace;
}
#info p{
text-align: justify;
}
#info {
font-family: "Andale Mono", "Monotype.com", monospace;
}
#info {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
#info:target {
visibility: visible;
}

.window1 {
width: 60%;
height: 65%;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 8% auto;
}

.window1 table {font-style:italic;
}
/*STYLE MENU INFO END*/

/*STYLE CLOSE BUTTON*/
.close-button {
width: 70px;
height: 25px;
background: #333333;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: 10px;
right: 10px;
}
.close-button a:link{
              color: #fff;
              text-decoration: none;
}
.close-button a:visited{
                  color: #fff; 
                  text-decoration: none;
}
.close-button a:hover{
                color:#fff;
 }   
/*STYLE CLOSE BUTTON END*/
Agar semua fungsi di atas berjalan, jangan lupa tambahkan link untuk memanggil file css tersebut seperti berikut :
<link rel="stylesheet" href="css/popup-menu.css" />
menu info
Tampilan menu INFO dari hasil proses tahapan di atas
Selanjunya membuat isi dari menu legenda, pada tutorial part sebelumnya, ada bagian dimana objek polygon di beri kode warna hexadecimal ke dalam tabel. Tabel warna tersebut dibuat dengan tujuan untuk pemberian warna pada objek polygon yang ditampilkan di peta agar lebih mudah serta untuk memberi warna pada objek di menu legenda yang mendeskripsikan objek di peta. 
Pertama kita coba aktifkan menu legenda dengan cara membuat koneksi terlebih dahulu ke database di PostgreSQL.
Di dalam folder XAMPP > htdocs > WebGIS > info-geospasial, buat folder baru dengan nama inc dan buat file php dengan nama koneksi_DB.php di dalam folder tersebut. Tambahkan script berikut pada file tersebut :
<?php
pg_connect("host=localhost port=5432 dbname=info-geospasial user='postgres' 
password='egiseptiana'") or die ("koneksi gagal");
?>
Sebelumnya buka terlebih dahulu file php.ini di dalam folder XAMPP > php, kemudian edit pada bagian berikut :
;extension=php_pdo_pgsql.dll dan ;extension=php_pgsql.dll
Hapus tanda titik koma (;) pada kedua teks di atas, save lalu matikan server apache di XAMPP Control Panel kemudian start lagi. Fungsi di atas dilakukan agar web bisa melakukan koneksi langsung ke database di PostgreSQL.
Cek koneksi dengan cara membuka alamat localhost/webgis/info-geospasial/inc/koneksi_DB.php di browser (aktifkan server apache), jika koneksi berhasil maka halaman tidak akan menampilkan teks apapun, tapi jika gagal maka akan muncul teks pemberitahuan bahwa koneksi terdapat kesalahan.
Sebelum memulai pastikan nama tabel yang akan di koneksikan di PostgreSQL ditulis tidak dalam huruf kapital, hal ini pernah dijelaskan pada tutorial part 4, karna jika ditulis dalam huruf kapital proses koneksi akan gagal.
Isi menu legenda akan ditampilkan dalam bentuk tabel, dengan memanfaatkan tabel yang tersedia di bootstrap. Copy script berikut dan simpan tepat di bawah script menu INFO pada file index.php atau tepat di atas tag pembukan footer :
<div id="legenda">
            <div class="window2">
            <a href='#' class='close-button' title='Close'>Close</a>
            <h1>LEGENDA/KETERANGAN</h1>
            <hr>
   <p style="text-align:center;"><strong>ADMINISTRASI</strong></p>
            <div class="table-responsive">
                        <?php
include "inc/koneksi_DB.php";
?>
              <table class="table table-bordered table-hover tablesorter" align="center">
                <thead>
                  <tr>
                    <th style="text-align:center;">Simbol</th>
                    <th style="text-align:center;">Kabupaten</th>
                    <th style="text-align:center;">Kode Kabupaten</th>
                    <th style="text-align:center;">Provinsi</th>
                  </tr>
                </thead>
                <tbody>
                <?php 
  $queri = pg_query("Select * From bali_adm order by id") or die ();
while ($data = pg_fetch_array ($queri)) {
?>
<tr>
<td align=center><div class="area" style="background-color:<?php echo $data['color']; ?>"></div></td>
   <td width=35% align=center><?php echo $data['nama']; ?></td>
   <td width=20% align=center><?php echo $data['kode_kab']; ?></td>
   <td width=30% align=center><?php echo $data['provinsi']; ?></td>
   </tr>
   <?php
   }
   ?>
                </tbody>
              </table>
              </div>
              <hr>
              <p style="text-align:center;"><strong>GEOLOGI</strong></p>
            <div class="table-responsive">
              <table class="table table-bordered table-hover tablesorter" align="center">
                <thead>
                  <tr>
                    <th style="text-align:center;">Simbol</th>
                    <th style="text-align:center;">Nama</th>
                    <th style="text-align:center;">Keterangan</th>
                  </tr>
                </thead>
                <tbody>
                <?php 
  $queri = pg_query("Select distinct nama, keterangan, color, kode From bali_geologi order by kode") or die (); 
while ($data = pg_fetch_array ($queri)) {
?>
<tr>
<td align=center><div class="area" style="background-color:<?php echo $data['color']; ?>"></div></td>
   <td width=20% align=center><?php echo $data['nama']; ?></td>
   <td width=65% align=center><?php echo $data['keterangan']; ?></td>
   </tr>
   <?php
   }
   ?>
                </tbody>
              </table>
              </div>

     </div>
   </div>
Tambahkan style berikut agar menu dapat ditampilkan jadi popup, copy di file popup-menu.css :
/*STYLE MENU LEGENDA*/
#legenda h1{
line-height:20px;
margin-top:30px;
padding: 0;
font-family: "Andale Mono", "Monotype.com", monospace;
}
#legenda p{
text-align: justify;
}
#legenda {
font-family: "Andale Mono", "Monotype.com", monospace;
}
#legenda {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
#legenda:target {
visibility: visible;
}

.window2 {
width: 60%;
overflow: scroll;
overflow-x: scroll;
height: 500px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 5% auto;
}
/*STYLE MENU LEGENDA END*/
Karna objek legenda masih belum muncul, dan sroll bar masih yang standar/kurang pas dengan pewarnaan design web maka tambahkan lagi style berikut :
/*STYLE SIMBOL LEGENDA*/
.area {
  width:35px;
  height:25px;
  border:1px solid #999;
  border-radius:3px;
  display:block;
  opacity: 0.5;
  margin-top:5px;
  margin-bottom:5px;
}
/*STYLE SIMBOL LEGENDA END*/

  /* STYLE SCROLL BAR */
::-webkit-scrollbar {
    width: 7px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #333333;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.4); 
}
/*STYLE SCROLL BAR END*/
menu legenda
Hasil dari proses pembuatan menu LEGENDA
Terakhir membuat menu download, prosesnya hampir sama dengan pembuatan menu INFO dan LEGENDA, namun pada menu ini ada bagian di mana harus menambahkan link unduh yang di ambil dari geoserver. Buat design menu terlebih dengan bentuk tampilan tabel, copy script berikut :
<div id="download">
          <div class="window3">
               <a href="#" class="close-button" title="Close">Close</a>
               <h1>DOWNLOAD</h1>
              <table class="table table-hover" align=center>
              <tr>
              <td>Administrasi</td>
              <td><a href="">SHP</a></td>
              <td><a href="">KML</a></td>
              </tr>
              <tr>
              <td>Geologi</td>
              <td><a href="">SHP</a></td>
              <td><a href="">KML</a></td>
              </tr>
              </table>
           </div>
</div>
Copy script di atas dan simpan di bawah script menu LEGENDA atau tepat di atas tag pembuka footer pada file index.php. Tambahkan style agar menu bisa dimunculkan menjadi popup, copy style berikut ke dalam file popup-menu.css :
/*STYLE MENU DOWNLOAD*/
#download h1{
line-height:20px;
margin-top:30px;
padding: 0;
}
#download ol{
text-align: left;
}
#download ol li a{
  color:#2B3E54;
}
#download {
font-family: "Andale Mono", "Monotype.com", monospace;
}
#download {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
#download:target {
visibility: visible;
}

.window3 {
width: 40%;
height: 25%;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}
Menu download sudah berhasil di buat, namun link unduh masih belum ada, tambahkan link unduh  dengan cara buka geoserver, pada menu LAYER PREVIEW di layer bali_adm dan bali_geologi, untuk setiap layer pilih tampilkan ke dalam bentuk SHP dan KML.
Layer Preview di Geoserver
Layer Preview di Geoserver
Otomatis sistem akan mengunduh layer ke dalam bentuk SHP dan KML tersebut, kemudian copy link pada file yang sudah terunduh lalu copykan ke dalam tag a href di script download. Sehingga script download akan menjadi seperti ini :
<div id="download">
          <div class="window3">
               <a href="#" class="close-button" title="Close">Close</a>
               <h1>DOWNLOAD</h1>
              <table class="table table-hover" align=center>
              <tr>
              <td>Administrasi</td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              <tr>
              <td>Geologi</td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              </table>
           </div>
</div>
Hasil proses pembuatan menu DOWNLOAD
Hasil proses pembuatan menu DOWNLOAD
Link unduh yang di ambil dari geoserver lebih praktis dan tentu file yang di unduh akan tetap sama seperti file yang ada di database (meskipun file sudah di update pada database, file di geoserver juga akan ikut terupdate).
<!DOCTYPE html>
<html>
<head> <!-- untuk meta description, keywords, dan author bisa ganti 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 informasi spasial di indonesia'/>
<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="shortcut icon" href="img/ICO.png"/>
<link rel="stylesheet" href="leaflet/leaflet.css" /> 
<link rel="stylesheet" href="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css"/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/popup-menu.css" />
<link rel="stylesheet" href="css/font-awesome-4.6.2/css/font-awesome.min.css"/> <!-- sesuaikan versi font awesome yang di gunakan -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" />
<script src="leaflet/leaflet-src.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="leaflet/leaflet-ajax/dist/leaflet.ajax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js"></script>
<script src="leaflet/leaflet-providers-master/leaflet-providers.js"></script>
<script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
</head>
<body>
<!-- INI HEADER -->
<header id="header">
<h2><a href="http://info-geospasial.com">INFO-GEOSPASIAL</a></h2>
<nav class="menu-header">
<ul>
<li><i class="fa fa-info" style="font-size:12px; color:#fff;"></i><a href="#info">INFO</a></li>
<li><i class="fa fa-map" style="font-size:12px; color:#fff;"></i><a href="#legenda">LEGENDA</a></li>
<li><i class="fa fa-download" style="font-size:12px; color:#fff;"></i><a href="#download">DOWNLOAD</a></li>
<li class="right"><i class="fa fa-lock" style="font-size:12px; color:#fff;"></i><a href="#">LOGIN</a></li>
</ul>
</nav>
</header>
<div id="map"> 
<script>
// MENGATUR TITIK KOORDINAT TITIK TENGAN & LEVEL ZOOM PADA BASEMAP
var map = L.map('map').setView([-8.4521135,115.0599022], 10);

var peta = new L.LayerGroup();
var items = [];
// MENAMPILKAN SKALA
L.control.scale({imperial: false}).addTo(map);

// ------------------- VECTOR ----------------------------
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ 
    style: function(feature){
    var fillColor = feature.properties.color; // PEWARNAAN OBJEK POLYGON DIAMBIL DARI FIELD "color" PADA FILE GEOJSON geojson
        return {color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 0.5 }; // Berikan efek trasparan pada bagian "fillOpacity" agar basemap dapat terlihat
      },
      onEachFeature: function(feature, layer){
        items.push(layer); // ini dibuat untuk menghubungkan variabel items ke dalam layer, ini berfungsi untuk menjalankan tool pencarian
      layer.bindPopup("<center>" + feature.properties.nama + "</center>"), // popup yang akan ditampilkan diambil dari filed nama
      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(peta); // layer peta administrasi ini ditmbahkan ke dalam variabel 'peta'
var layer_GEOLOGI = new L.GeoJSON.AJAX("layer/request_geologi.php",{
    style: function(feature){
      var fillColor = feature.properties.color; // PEWARNAAN OBJEK POLYGON DIAMBIL DARI FIELD "color" PADA FILE GEOJSON geojson
        return {color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 0.5 }; // Berikan efek trasparan pada bagian "fillOpacity" agar basemap dapat terlihat
      },
      onEachFeature: function(feature, layer){
        items.push(layer);
      layer.bindPopup("<center>" + "<strong>" + feature.properties.nama + "</strong>" + "<br/>" + feature.properties.keterangan + "</center>"), // popup yang akan ditampilkan diambil dari field nama dan keterangan
      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_GEOLOGI.resetStyle(e.target); // isi dengan nama variabel dari layer
                info.update();
            });
    }
    }).addTo(peta); // layer peta geologi ini ditmbahkan ke dalam variabel 'peta'
// MENAMBAHKAN TOOL PENCARIAN
function sortNama(a, b) {
  var _a = a.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian
  var _b = b.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian
  if (_a < _b) {
    return -1;
  }
  if (_a > _b) {
    return 1;
  }
  return 0;
}

L.Control.Search = L.Control.extend({
  options: {
    // topright, topleft, bottomleft, bottomright
    position: 'topleft',
    placeholder: ' Search...'
  },
  initialize: function (options /*{ data: {...}  }*/) {
    // constructor
    L.Util.setOptions(this, options);
  },
  onAdd: function (map) {
    // happens after added to map
    var container = L.DomUtil.create('div', 'search-container');
    this.form = L.DomUtil.create('form', 'form', container);
    var group = L.DomUtil.create('div', 'form-group', this.form);
    this.input = L.DomUtil.create('input', 'form-control input-sm', group);
    this.input.type = 'text';
    this.input.placeholder = this.options.placeholder;
    this.results = L.DomUtil.create('div', 'list-group', group);
    L.DomEvent.addListener(this.input, 'keyup', _.debounce(this.keyup, 300), this);
    L.DomEvent.addListener(this.form, 'submit', this.submit, this);
    L.DomEvent.disableClickPropagation(container);
    return container;
  },
  onRemove: function (map) {
    // when removed
    L.DomEvent.removeListener(this._input, 'keyup', this.keyup, this);
    L.DomEvent.removeListener(form, 'submit', this.submit, this);
  },
  keyup: function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
      // do nothing
    } else {
      this.results.innerHTML = '';
      if (this.input.value.length > 2) {
        var value = this.input.value;
        var results = _.take(_.filter(this.options.data, function(x) {
          return x.feature.properties.nama.toUpperCase().indexOf(value.toUpperCase()) > -1;
        }).sort(sortNama), 10);
        _.map(results, function(x) {
          var a = L.DomUtil.create('a', 'list-group-item');
          a.href = '';
          a.setAttribute('data-result-name', x.feature.properties.nama); // nama field yang akan dijadikan acuan di dalam tool pencarian
          a.innerHTML = x.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian
          this.results.appendChild(a);
          L.DomEvent.addListener(a, 'click', this.itemSelected, this);
          return a;
        }, this);
      }
    }
  },
  itemSelected: function(e) {
    L.DomEvent.preventDefault(e);
    var elem = e.target;
    var value = elem.innerHTML;
    this.input.value = elem.getAttribute('data-result-name');
    var feature = _.find(this.options.data, function(x) {
      return x.feature.properties.nama === this.input.value; // nama field yang akan dijadikan acuan di dalam tool pencarian
    }, this);
    if (feature) {
      this._map.fitBounds(feature.getBounds());
    }
    this.results.innerHTML = '';
  },
  submit: function(e) {
    L.DomEvent.preventDefault(e);
  }
});

L.control.search = function(id, options) {
  return new L.Control.Search(id, options);
}
L.control.search({
  data: items 
}).addTo(map);


  // menambahkan tools defautl extent
  L.control.defaultExtent().addTo(map);
  // PILIHAN BASEMAP YANG AKAN DITAMPILKAN
var baseLayers = {  
  'Esri.WorldTopoMap': L.tileLayer.provider('Esri.WorldTopoMap').addTo(map),
  'Esri WorldImagery': L.tileLayer.provider('Esri.WorldImagery')
};
// membuat pilihan untuk menampilkan layer
var overlays = {
      "PROVINSI BALI": {
        "Administrasi": layer_ADMINISTRASI,
        "Geologi": layer_GEOLOGI
      }
      };
  var options = {
  exclusiveGroups: ["PROVINSI BALI"]
};
// MENAMPILKAN TOOLS UNTUK MEMILIH BASEMAP
L.control.groupedLayers(baseLayers, overlays, options).addTo(map);
</script>
</div> 
<!-- ISI MENU INFO-->
<div id="info">
            <div class="window1">
            <a href='#' class='close-button' title='Close'>Close</a>
            <h1>SELAMAT DATANG</h1>
<p>WebGIS (geographic information system) INFO-GEOSPASIAL, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi pembaca perihal hasil dari proses pembelajaran/pembuatan WebGIS yang di jalani. Beberapa artikel terkait proses pembuatan WebGIS ini sudah dibaca dan di perlajari oleh banyak orang dan banyak apresiasi serta tanggapan yang cukup positif dari para pembaca.</p><br>
<p>Hal tersebut mendorong admin untuk terus berusaha membagi ilmu serta pengetahun terkait Geospasial, khususnya Pembuatan WebGIS kepada para pembaca serta pengikut blog INFO-GEOSPASIAL.</p><br>
<p>Terimkasih saya ucapkan kepada para pembaca, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di blog INFO-GEOSPASIAL dapat bermanfaat, dan tidak lupa diharapkan adanya tanggapan berupa kritik maupun saran bilamana ada hal-hal yang dirasa salah atau kurang tepat terkait konten artikel yang di bagian.</p><br>
<center><strong>EGI SEPTIANA</strong></center>
     </div>
   </div>
 <!--  MENU INFO END -->

<div id="legenda">
            <div class="window2">
            <a href='#' class='close-button' title='Close'>Close</a>
            <h1>LEGENDA/KETERANGAN</h1>
            <hr>
   <p style="text-align:center;"><strong>ADMINISTRASI</strong></p>
            <div class="table-responsive">
                        <?php
include "inc/koneksi_DB.php";
?>
              <table class="table table-bordered table-hover tablesorter" align="center">
                <thead>
                  <tr>
                    <th style="text-align:center;">Simbol</th>
                    <th style="text-align:center;">Kabupaten</th>
                    <th style="text-align:center;">Kode Kabupaten</th>
                    <th style="text-align:center;">Provinsi</th>
                  </tr>
                </thead>
                <tbody>
                <?php 
  $queri = pg_query("Select * From bali_adm order by id") or die ();
while ($data = pg_fetch_array ($queri)) {
?>
<tr>
<td align=center><div class="area" style="background-color:<?php echo $data['color']; ?>"></div></td>
   <td width=35% align=center><?php echo $data['nama']; ?></td>
   <td width=20% align=center><?php echo $data['kode_kab']; ?></td>
   <td width=30% align=center><?php echo $data['provinsi']; ?></td>
   </tr>
   <?php
   }
   ?>
                </tbody>
              </table>
              </div>
              <hr>
              <p style="text-align:center;"><strong>GEOLOGI</strong></p>
            <div class="table-responsive">
              <table class="table table-bordered table-hover tablesorter" align="center">
                <thead>
                  <tr>
                    <th style="text-align:center;">Simbol</th>
                    <th style="text-align:center;">Nama</th>
                    <th style="text-align:center;">Keterangan</th>
                  </tr>
                </thead>
                <tbody>
                <?php 
  $queri = pg_query("Select distinct nama, keterangan, color, kode From bali_geologi order by kode") or die (); 
while ($data = pg_fetch_array ($queri)) {
?>
<tr>
<td align=center><div class="area" style="background-color:<?php echo $data['color']; ?>"></div></td>
   <td width=20% align=center><?php echo $data['nama']; ?></td>
   <td width=65% align=center><?php echo $data['keterangan']; ?></td>
   </tr>
   <?php
   }
   ?>
                </tbody>
              </table>
              </div>

     </div>
   </div>

   <div id="download">
          <div class="window3">
               <a href="#" class="close-button" title="Close">Close</a>
               <h1>DOWNLOAD</h1>
              <table class="table table-hover" align=center>
              <tr>
              <td>Administrasi</td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              <tr>
              <td>Geologi</td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              </table>
           </div>
</div>
<!-- INI FOOTER -->
<footer id="footer">
<p>Copyright © 2017 <a href="http://info-geospasial.com">INFO-GEOSPASIAL</a></p>
<nav class="menu-footer">
<ul>
<li><a href="http://www.info-geospasial.com/p/blog-page_4.html">TOS</a></li>
<li><a href="http://www.info-geospasial.com/p/privacy-policy.html">PRIVACY POLICY</a></li>
<li><a href="http://www.info-geospasial.com/p/contact.html">CONTACT</a></li>
</ul>
</nav>
</footer>
</body>
</html>
</body>
</html>
Tutorial ini mungkin menjadi tutorial terakhir dari proses pembuatan WebGIS dengan Leaflet Javascript, meskipun masih banyak fitur-fitur yang belum ditambahkan seperti menu grafik serta menu login admin area yang juga belum di buat. Namun sejauh ini rasanya sudah cukup untuk bisa di pahami dasar-dasar dari proses pembuatan WebGIS ini, selebihnya bisa dikembangkan sesuai dengan kebutuhan masing-masing.
Nanti akan admin share dalam bentuk video beberapa WebGIS yang admin buat, dan mungkin bisa di tiru atau menjadi inspirasi dari segi design, fitur dan fungsinya sendiri.
Terimakasih, semoga bermanfaat . . .

Waalaikumsalam Wr.Wb

PEMBUATAN PETA KESESUAIAN PERMUKIMAN BERBASIS GEOLOGI DI ARCGIS

Assalamualaikum Wr.Wb


Pertambahan penduduk mengakibatkan permintaan akan tempat tinggal sangat tinggi. Permintaan tempat tinggal (permukiman) di berbagai daerah khususnya perkotaan tergolong banyak karena terus meningkatnya jumlah penduduk dari tahun ke tahun dan diiringi oleh terus meningkatnya sarana dan fasilitas transportasi. Pemilihan tempat tinggal (permukiman) yang tepat mempunyai arti penting dalam aspek keruangan, karena ini akan menentukan keawetan bangunan, nilai ekonomis dan dampak permukiman terhadap lingkungan di sekitarnya (Sutikno,1982). Dalam penentuan lokasi permukiman perlu adanya evaluasi medan, guna mengetahui apakah parameter-parameter untuk lokasi permukiman yang aman dan layak digunakan bagi suatu lahan.
Dalam menentukan suatu lahan untuk permukiman, masyarakat pada umumnya karena keterbatasan ilmu pengetahuan sering tidak mempertimbangkan parameter-parameter fisik dasar yang mempengaruhi kelayakan untuk permukiman dalam jangka panjang. Parameter-parameter yang berpengaruh dalam jangka panjang untuk permukiman diantaranya adalah parameter geologi, seperti kondisi morfologi, jenis tanah, hidrogeologi, litologi, kawasan rawan gerakan tanah dan kawasan rawan gempabumi.
Karena semua parameter-parameter geologi tersebut sangat berpengaruh terhadap kelayakan permukiman sebagai tempat hunian yang nyaman, aman dan sehat dalam jangka panjang bagi kelangsungan hidup para penghuninya.
Atas dasar alasan di atas maka di sini blog INFO-GEOSPASIAL akan coba membuat peta tingkat kesesuaian lahan untuk permukiman berbasis geologi, dengan maksud dan tujuan yaitu sebagai berikut : 
  1. Untuk mendapatkan informasi kondisi umum daerah penyelidikan yang mencakup tataguna lahan dan geologi  
  2. Untuk mendeskripsikan kondisi geologi daerah penyelidikan dan mendapatkan nilai tingkat kesesuaian lahan untuk lokasi permukiman dengan melakukan klasifikasi / penggolongan dengan memberikan skor dan bobot berdasarkan faktor pendukung dan pembatas untuk permukiman.
  3. Untuk mengetahui penyebaran tingkat kesesuaian lahan untuk permukiman berbasis geologi di daerah penyelidikan.
Adapun lokasi yang menjadi penelitian pada tulisan ini adalah Kecamatan Ciamis yang masuk ke dalam wilayah administrasi Kabupaten Ciamis, Provinsi Jawa Barat, Indonesia. Secara geografis berada pada 7°21’35” LS - 7°17’37” LS dan 108°17’24” BT - 108°22’50” BT. Dengan Luas wilayah ± 3385 Ha.
Proses pembuatan peta akan menggunakan metode analisis deskriptif kuantitatif yang mana proses pengerjaannya yaitu dengan cara menguraikan dan memberikan gambaran mengenai parameter-parameter objek penyelidikan serta memberikan harkat (skor) pada setiap parameter dan memberikan bobot penimbangan pada masing-masing parameter yang besarnya sesuai dengan pengaruhnya terhadap kesesuaian lahan untuk permukiman.
Parameter yang digunakan dalam metode ini terdiri dari parameter-parameter yang memiliki subkelas sehingga masing-masing memiliki pengaruh dalam analisis tumpang tindih (overlay) dalam tahapan penyusunan peta tingkat kesesuaian lahan untuk permukiman berbasis geologi. Terdapat 5 parameter yang akan digunakan yaitu :
  1. Peta Morfologi
  2. Peta Morfologi Kecamatan Ciamis
    Peta Morfologi Kecamatan Ciamis
    Peta morfologi dibuat dari hasil pengamatan morfologi yang dilakukan dengan mengelompokan daerah penyelidikan berdasarkan kemiringan lereng, yaitu dengan mengelompokan garis kontur yang berpola relatif sama pada peta topografi, kemudian ditarik garis tegak lurus kontur dan dihitung kemiringan lerengnya dengan menggunakan persamaan sebagai berikut :
     Rumus Hitung Kemiringan Lereng
    Keterangan :
    S  =  kemiringan lereng (%)
    n  =  jumlah kontur yang terpotong
    Ic =  interval kontur (meter)
    d  =  jarak sebenarnya (meter)
    Berdasarkan besarnya kemiringan lereng pada suatu daerah, maka kemiringan lereng diklasifikasikan oleh para ahli, salah satunya klasifikasi Kemiringan Lereng menurut Van Zuidam, 1983. yaitu sebagai berikut :
    Tabel Klasifikasi Kemiringan Lereng (Van Zuidam, 1983)
    Klasifikasi Kemiringan Lereng (Van Zuidam, 1983)
    Dari hasil pengamatan di lapangan dan interpretasi peta topografi dari kerapatan gari kontur dan ketinggian, maka klasifikasi kemiringan lereng di daerah penyelidikan dibagi menjadi 4 kelas satuan morfologi seperti yang tergambar pada peta di atas.
    Pemberian skor dan bobot pada parameter Morfologi digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter morfologi di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Morfologi di daerah penyelidikan. 
  3. Peta Jenis Tanah
  4. Peta Jenis Tanah Kecamatan Ciamis
    Peta Jenis Tanah Kecamatan Ciamis
    Peta Jenis Tanah dibuat berdasarkan hasil interpolasi dari data survey lapangan terhadap jenis tanah yang ditemukan di setiap Kelurahan dan Desa di daerah penyelidikan, maka jenis tanah di daerah penyelidikan dibagi menjadi 5 jenis tanah yang diukur berdasarkan tingkat kekuatan tanah geologi teknik, jenis tanah dari paling kuat sampai kurang kuat untuk pondasi bangunan di daerah penyelidikan terdiri dari pasir kerikilan, pasir, pasir lempung kerakalan, pasir lempungan dan lempung pasiran. 
    Pemberian skor dan bobot pada parameter Jenis Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Jenis Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Jenis Tanah di daerah penyelidikan.
  5. Peta Air Tanah
  6. Peta Air Tanah Kecamatan Ciamis
    Peta Air Tanah Kecamatan Ciamis
    Ketersediaan Air Tanah pada suatu lahan merupakan hal yang sangat penting, mengingat fungsi Air Tanah sebagai sumber pasokan air bersih untuk berbagai kebutuhan, terutama di saat kemarau panjang dimana air permukaan tidak mencukupi. Bertolak dari hal tersebut, maka analisis kesesuaian lahan untuk permukiman berbasis geologi ini dilakukan dengan maksud untuk mengetahui kemampuan lahan dalam menunjang ketersediaan Air Tanah.
    Berdasarkan hasil interpolasi dari data survei lapangan terhadap sumur-sumur gali penduduk di setiap kelurahan dan desa di daerah penyelidikan, maka daerah penyelidikan di klasifikasikan menjadi 3 tingkat kedalaman dalam mendapatkan air tanah bebas, yaitu daerah air tanah dangkal dengan kedalaman permukaan air tanah 0,5 – 4,466 m, daerah air tanah sedang dengan kedalaman permukaan air tanah 4,5 – 8,466 m dan daerah air tanah dalam dengan kedalaman permukaan air tanah 8,5 – 12,4 m dari permukaan tanah setempat.
    Pambagian tingkat klasifikasi kedalaman air tanah ini ditinjau dari aspek penekanan biaya untuk penggalian atau pemboran air tanahnya, maka berdasarkan hal tersebut, air tanah dangkal dengan kedalaman permukaan air tanah 0,5 – 4,466 m dapat lebih menekan pengeluaran biaya, dari pada air tanah sedang dengan kedalaman permukaan air tanah 4,5 – 8,466 m dan air tanah dalam dengan kedalaman permukaan air tanah 8,5 – 12,4 m.
    Pemberian skor dan bobot pada parameter Air Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Air Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Air Tanah di daerah penyelidikan.
  7. Peta Geologi
  8. Peta Geologi Kecamatan Ciamis
    Peta Geologi Kecamatan Ciamis
    Berdasarkan sebagian Peta Geologi lembar Tasikmalaya 1308-4 (T. Budhitrisna, 1986), litologi daerah penyelidikan disusun oleh batuan Quarter dengan sebaran ± 100% (± 3385 ha) yang memanjang dari barat laut sampai tenggara. Batuan Quarter di daerah penyelidikan terdiri dari 2 formasi batuan dengan urutan stratigrafinya dari muda ke tua yaitu sebagai berikut :
    Stratigrafi daerah penyelidikan di Kabupaten Ciamis
    Stratigrafi daerah penyelidikan di Kabupaten Ciamis
    Pemberian skor dan bobot pada parameter Geologi digambarkan pada gambar tabel berikut :
      Pemberian skor dan bobot pada parameter Geologi di daerah penyelidikan.
      Pemberian skor dan bobot pada parameter Geologi di daerah penyelidikan.
  9. Peta Rawan Gerakan Tanah
  10. Peta Rawan Gerakan Tanah Kecamatan Ciamis
    Peta Rawan Gerakan Tanah Kecamatan Ciamis
    Berdasarkan Peta Kawasan Rawan Gerakan Tanah Kecamatan Ciamis (Pusat Vulkanologi Dan Mitigasi Bencana Geologi, Kementerian Energi Dan Sumber Daya Mineral), Kecamatan Ciamis memiliki tingkat kerentanan gerakan tanah tinggi, menengah, rendah sampai sangat rendah.
    - Zona Kerentanan Gerakan Tanah Sangat Rendah : Daerah yang mempunyai tingkat kerentanan sangat rendah untuk terkena gerakan tanah. Pada zona ini jarang atau hampir tidak pernah terjadi gerakan tanah, baik gerakan tanah lama maupun gerakan tanah baru, kecuali pada daerah tidak luas pada tebing sungai. Merupakan daerah datar sampai landai dengan kemiringan lereng lebih kecil dari 15% dan lereng tidak dibentuk oleh endapan gerakan tanah, bahan timbunan atau lempung yang bersifat plastis atau mengembang. Luas zona kerentanan gerakan tanah sangat rendah ini menempati ± 63,42% (± 2147 ha) dari keseluruhan luas daerah penyelidikan. 
    - Zona Kerentanan Gerakan Tanah Rendah Daerah : Daerah yang mempunyai tingkat kerentanan rendah untuk terkena gerakan tanah. Umumnya pada zona ini jarang terjadi gerakan tanah jika tidak mengalami gangguan pada lereng, dan jika terdapat gerakan tanah lama, lereng telah mantap kembali. Gerakan tanah berdimensi kecil mungkin dapat terjadi, terutama pada tebing lembah (alur) sungai. Kisaran kemiringan lereng mulai dari landai ( 5 - 15%) sampai sangat terjal (50 - 70%), tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pembentuk lereng. Pada lereng terjal umumnya dibentuk oleh tanah pelapukan yang tipis dan vegetasi penutup baik, umumnya berupa hutan atau perkebunan. Luas zona kerentanan gerakan tanah rendah ini menempati ± 17,96% (± 608 ha) dari keseluruhan luas daerah penyelidikan.
    - Zona Kerentanan Gerakan Tanah Menengah : Daerah yang mempunyai tingkat kerentanan menengah untuk terkena gerakan tanah. Pada zona ini dapat terjadi gerakan tanah terutama pada daerah yang berbatasan dengan lembah sungai, gawir, tebing jalan atau jika lereng mengalami gangguan. Gerakan tanah lama dapat aktif kembali akibat curah hujan yang tinggi dan erosi kuat. Kisaran kemiringan lereng mulai dari landai (5 - 15%) sampai curam hingga hampir tegak (>70%), tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pelapukan pembentuk lereng. Kondisi vegetasi penutup umumnya kurang sampai sangat jarang. Luas zona kerentanan gerakan tanah menengah ini menempati ± 15,45% (± 523 ha) dari keseluruhan luas daerah penyelidikan.
    - Zona Kerentanan Gerakan Tanah Tinggi : Daerah yang mempunyai tingkat kerentanan tinggi untuk terkena gerakan tanah. Pada zona sering terjadi gerakan tanah, sedangkan gerakan tanah lama dan gerakan tanah baru masih aktif bergerak, akibat curah hujan yang tinggi dan erosi yang kuat. Kisaran kemiringan lereng mulai dari agak terjal (30 ~ 50%) hingga hampir tegak (> 70%) tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pelapukan pembentuk lereng. Kondisi vegetasi penutup umumnya sangat kurang. Luas zona kerentanan gerakan tanah tinggi ini menempati ± 3,13% (± 106 ha) dari keseluruhan luas daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah di daerah penyelidikan.

Setelah mengetahui parameter yang akan di gunakan, selanjutnya melakukan proses overlay peta dengan menggunakan aplikasi ArcMap (ArcGIS) untuk menghasilkan peta kesesuaian pemukiman berbasis Geologi.
Buka semua layer peta (SHP) yang dijadikan parameter ke dalam ArcMap. Pastikan semua layer sudah memiliki field (keterangan, skor, dan bobot) dimana field keterangan di isi dengan nama dari setiap subkelas parameter dan field skor di isi dengan skor yang sudah ditentukan seperti pada keterangan di atas. Kosongkan pada bagian field bobot (akan di isi setelah proses overlay).
Pastikan field skor dan bobot dibuat dengan type integer !! Dan pastikan setiap layer peta yang akan di overlay memiliki luas yang sama, agar tidak ada error topology. Hal tersebut di maksudkan agar hasil overlay mendekati sempurna. (Baca artikel ERROR TOPOLOGY untuk lebih memahami mengenai error topology).
Untuk mengoverlay seluruh layer peta, gunakan tool Union yang ada di dalam menu Geoporcessing atau di dalam ArcToolbox > Analysis Tools > Overlay > Union.
List layer peta yang akan di overlay di dalam jendel Union
List layer peta yang akan di overlay di dalam jendel Union
Setelah proses union berhasil, maka akan menghasilkan layer baru yang merupakan gabungan dari semua layer peta sebelumnya. Pada bagian attribute table layer tersebut kurang lebih akan seperti gambar berikut :

Tabel layer hasil union/overlay
Tabel layer hasil union/overlay
Karena sebelumnya pada field bobot di semua layer peta tidak di isi/di kosongkan. Maka di sini lakukan pengisian pada field tersebut dengan isian berupa perkalian field skor di kali (x) bobot dari setiap parameter. (misal pengisian field bobot air tanah : field skor air tanah * 5) dimana nilai lima (5) merupakan bobot dari parameter air tanah. Lakukan hal tersebut untuk semua field bobot di setiap parameter.
Setelah semua field bobot parameter telah di isi, selanjutnya buat field baru dengan nama bobot_total kemudian lakukan penjumlahan (+) semua field bobot parameter untuk mengisi field bobot_total tersebut.
Sebelum melanjutkan, kita harus ketahui terlebih dahulu banyaknya kelas yang terbentuk dan interval kelas kesesuaian lahan untuk permukiman berbasis geologi ini. Perhitungan untuk mendapatkan jumlah kelas kesesuaian lahan permukiman adalah dengan cara mengalikan jumlah peta tematik dengan menggunakan rumus Sturges dalam Sudjana (1988: 19), seperti berikut :
rumus sturges

Keterangan :
K = banyaknya kelas terbentuk
N = satuan peta yang dioverlaykan
Satuan peta yang dioverlaykan dalam pengklasifikasian tingkat kesesuaian lahan untuk permukiman di daerah penyelidikan ada 5 peta. Maka berdasarkan rumus sturges perhitungannya adalah sebagai berikut :
K = 1+3,322 log N
K = 1+3,322 log 5
K = 1+3,322 x 0,698
K = 3,016 dibulatkan menjadi 3.
Dari hasil penjumlahan bobot di pada layer yang sudah di overlay, didapatkan nilai maksimum 78 dan nilai minimum 41. Yang kemudian dari hasil tersebut dilakukan perhitungan untuk menentukan interval kelas dengan menggunakan rumus berikut : 
Rumus menentukan kelas interval
Keterangan : 
Range = total bobot maksimum – total bobot minimum 
K        = banyaknya kelas 
Maka perhitungan dari rumus metode ini berdasarkan data-data diatas adalah sebagai berikut :
IK = Range/K
IK = skor minimum-skor maksimum/banyaknya kelas
IK = 78-41/3
IK = 37/3
IK = 12,333
Dari perhitungan tersebut maka didapat interval kelas kesesuaian lahan yang berjarak 12.
Kembali ke hasil penjumlahan bobot setiap parameter. Buat field baru untuk menyimpan nama kelas interval, kemudian isikan setiap record berdasarkan interval kelas seperti berikut :
Kelas dan Interval Kelas kesesuaian lahan untuk permukiman berbasis geologi
Kelas dan Interval Kelas kesesuaian lahan untuk permukiman berbasis geologi
Hasil akhir dari proses di atas akan menghasilkan peta kesesuaian permukiman berbasis geologi seperti berikut :
Peta Kesesuaian Permukiman berbasis Geologi Kecamatan Ciamis
Peta Kesesuaian Permukiman berbasis Geologi Kecamatan Ciamis
Proses overlay di atas dapat di lihat juga pada video berikut :
Untuk hasil yang lebih baik, dapat ditambahkan parameter lain seperti peta rawan gempa bumi, hidrogeologi, dan peta parameter lainnya yang dapat membantu dalam menghasilkan informasi kesesuaian permukiman yang lebih mendekati akurat.
Diharapkan adanya kritik dan saran dari pembaca jika tulisan ini dirasa terdapat kesalahan atau ada yang perlu di koreksi.

Wassalamualaikum Wr.Wb

KONEKSI ARCGIS KE DBMS POSTGRESQL DENGAN MENGGUNAKAN ARCSDE DAN ODBC

Assalamualaikum Wr.Wb

Semua pekerjaan di bidang SIG dapat dipastikan akan bergelut dengan data. Kehilangan, kerusakan merupakan suatu kerugian yang enggan kita alami. DATA ADALAH KUNCI, tanpa data kita tidak bisa memulai suatu pekerjaan. Bukan hanya di bidang SIG, hampir semua jenis pekerjaan memerlukan data. 
Kemudahan akses, keamanan, dan manajemen data yang baik merupakan suatu keharusan, terlebih jika kita bergelut dengan data yang berjumlah banyak. Pada umum nya kita akan menyimpan data dalam bentuk flat file atau worksheet di dalam directory di PC/Laptop yang kita gunakan, hal tersebut terasa lebih praktis, namun faktanya hal tersebut justru menimbulkan masalah baru, dimulai dari masalah pada directory PC/Laptop yang menjadi penuh, terdapat folder dan file yang bertumpuk, serta keterbatasan untuk mengakses data tersebut.
Untuk mengatasi hal tersebut maka diperlukan suatu Database yang dikelola di dalam suatu Database Management System (DBMS) yang dapat terhubung ke dalam aplikasi GIS, Dengan begitu proses manajemen data akan lebih baik karena dilakukan di tempat yang terpisah dari Directory PC/Laptop dan dengan keamanan yang jauh lebih baik. 
Database sendiri dilihat dari sudut pandang sistem dapat diartikan sebagai kumpulan tabel yang saling berhubungan. Sedangkan dari sudut pandang manajemen dapat diartikan sebagai kumpulan data yang memodelkan aktivias-aktivitas yang terdapat dalam perusahaan.
Sedangkan DBMS dapat diartikan sebagai kumpulan dari data yang saling berhubungan dengan sekumpulan program-program yang mengakses data tersebut. Perbedaan dengan Database, DBMS merupakan paket perangat lunak yang digunakan untuk membangun database data tertentu. Dengan kata lain DBMS adalah bagian dari sistem database.
Penyimpanan data dalam bentuk DBMS mempunyai banyak manfaat dan kelebihan dibandingkan dengan penyimpanan dalam bentuk flat file atau worksheet langsung di directory PC/Laptop, diantaranya :
  1. Performa yang di dapat dengan penyimpanan dalam bentuk DBMS cukup besar, sangat jauh berbeda dengan performance data yang disimpan dalam bentuk flat file atau worksheet di directory PC/Laptop. Disamping memiliki unjuk kerja yang lebih baik, juga akan didapatkan efisiensi penggunaan media penyimpanan dan memori.
  2. Integritas data lebih terjamin dengan penggunaan DBMS. Masalah redudansi sering terjadi dalam flat file. Redudansi adalah kejadian berulangnya data atau kumpulan data yang sama dalam sebuah database yang mengakibatkan pemborosan media penyimpanan.
  3. Independensi. Perubahan struktur database dimungkinkan terjadi tanpa harus mengubah aplikasi yang mengaksesnya sehingga pembuatan antarmuka ke dalam data akan lebih mudah dengan penggunaan DBMS.
  4. Sentralisasi. Data yang terpusat akan mempermudah pengelolaan database. kemudahan di dalam mengakases data secara bersamaan oleh banyak user dengan DBMS dan juga ke konsistenan data yang diakses secara bersama-sama akan lebih terjamin daripada data disimpan dalam bentuk file atau worksheet yang tersebar.
  5. Keamanan. DBMS memiliki sistem keamanan yang lebih fleksibel daripada pengamanan pada file sistem operasi. Keamanan dalam DBMS akan memberikan keluwesan dalam pemberian hak.
Connection PostgreSQL to ArcGIS with ArcSDE and ODBC
Dari penjelasan di atas, maka di sini blog INFO-GEOSPASIAL akan coba memberikan tutorial cara untuk melakukan koneksi Aplikasi ArcGIS desktop ke DBMS PostgreSQL. Akan dijelaskan juga bagaimana memanggil, mengedit, menyimpan kembali, menambahkan serta beberapa fungsi lainnya untuk manajemen data GIS di DBMS tersebut dengan melalui ArcGIS.
Terdapat beberapa cara untuk melakukan koneksi di ArcGIS ke PostgreSQL, diataranya :
  1. Koneksi menggunakan ArcSDE
  2. Koneksi Menggunana ODBC
  3. Koneksi menggunakan bantuan plugin/ektensi tambahan di ArcGIS (misal : St-Links, GISquirrel,dll)
Di dalam artikel ini, akan dijelaskan bagaimana cara melakukan koneksi dengan menggunakan cara 1 dan 2. Tahap pertama pastikan aplikasi ArcGIS dan PostgreSQL sudah terinstal di PC/Laptop yang digunakan. Kemudian di dalam directory instalasi ArcGIS, biasanya C:\Program Files(x86)\ArcGIS\Desktop10.3\DatabaseSupport\PostgreSQL\9.3\Windows64 (Sesuaikan versi ArcGIS yang di pakai).
st_geometry.dll
Mengcopy file st_geometry.dll dan libst_raster_pg.dll
Copy file st_geometry.dll dan libst_raster_pg.dll (jika hanya ada file st_geometry.dll tidak masalah, di copy saja) ke dalam directory instalasi PostgreSQL C:\Program Files\PostgreSQL\9.3\lib (Sesuaikan versi PostgreSQL yang di pakai).
Kemudian copy semua file PostgreSQLClient berikut ke dalam directory ArcGIS C:\Program Files (x86)\ArcGIS\Desktop10.3\bin :
Jalankan program ArcMap, masuk ke ArcToolBox > Data Management Tools > Geodatabase Administration > Create Eterprise Geodatabase.
Create Enterprise Geodatabase
Create Enterprise Geodatabase
Pada jendel Create Enterprise Geodatabase, lakukan isian seperti berikut :
  • Database Platform : isi dengan jenis DBMS yang akan di koneksikan (pilih PostgreSQL)
  • Instance : Isi dengan nama komputer atau IP dari komputer, atau bisa juga dengan Port yang digunakan di PostgreSQL (contoh di sini menggunakan Port)
  • Database : Bisa di isi dengan nama database yang sudah tersedia atau pernah di buat di PostgreSQL atau bisa juga isi dengan nama database baru yang akan di buat
  • Database Administrator : Nama username yang digunakan untuk login ke PostgreSQL
  • Database Administrator Password : Password untuk masuk ke PostgreSQL
  • Geodatabase Administrator Password : Buat password baru untuk login ke PostgreSQL dengan menggunakan username 'sde'.
  • Authorization File : Isi dengan file license ArcGIS server (sesuaikan dengan versi ArcGIS yang di gunakan) dalam format .ecp
Setelahan proses di atas berjalan dengan baik, selanjutnya Tambahkan koneksi untuk memanggil Database ke ArcGIS dengan cara buka ArcCatalog, di dalam folder Database Connection pilih Add Database Connection. 
Add Database Connection
Add Database Connection
Isiannya hampir sama dengan isian sebelumnya, pada bagian Instance isi dengan Port (contoh di sini pakai Port) kemudian Authorization Type pilih Database Authorization. Username bisa menggunakan username yang default kita gunakan untuk login ke PostgreSQL yaitu “postgres” atupun bisa menggunakan username “sde” yang sebelumnya di buat oleh sistem. Namun akan terdapat perbedaan dari hak akses yang bisa di lakukan, untuk akses penuh gunakan username “sde”. Lalu tentukan nama database yang akan di koneksikan (karna tadi di buat database baru dengan nama  'info_geospasial' maka pilih saja database tersebut). Jika sudah maka akan terbentuk koneksi baru, silahkan di rename sesuai nama yang di inginkan.
New Connection
New Connection
Dengan mengikuti tahap-tahap di atas, maka otomatis di dalam PostgreSQL juga akan terbentuk database baru dengan nama "info_geospasial" dan juga terbentuk user baru dengan nama "sde".
Tampilan PostgreSQL dengan PgAdmin
Tampilan PostgreSQL dengan PgAdmin
Terdapat keunggulan dengan melakukan koneksi melalu SDE, kita mendapatkan semua fungsi dan akses seperti geodatabase personal pada umumnya, yaitu :
  1. Tabel : Menyimpan obyek non-spasial (informasi tabular).
  2. Feature Class : Kumpulan dari obyek spasial berupa titik, garis, area (poligon). Bisa juga untuk menyimpan feature anotasi, dimensi, rute.
  3. Feature Dataset : Tempat/wadah untuk feature class yang memiliki referensi spasial sama. Dataset ini perlu apabila kita ingin membuat network dan topologi.
  4. Relationship class : Mengatur hubungan tematik antara tabel, feature class, atau kedua-duanya. Mendukung integrasi antara origin data dan destination class.
  5. Geometrik Netwrok : Hubungan topologi khusus antara titik dan garis yang digunakan untuk analisa pada alur sistem jaringan langsung.
  6. Topologi : Hubungan spasial antara feature classes yang digunakan untuk menentukan dan memperbaiki kesalahan (error) spasial, seperti parcel yang overlap satu sama lain atau yang tidak berada dalam batas wilayah. Penjelasan lengkap mengenai ERROR TOPOLOGI.
  7. Raster Dataset : Data grid yang diturunkan dari berbagai sumber format (Tiff, Jpeg, dll).
  8. Raster Catalog : Tabel dari kumpulan data raster.
  9. Survey Dataset : Menyimpan informasi survey dan menggabungkan data survey dalam proyek dan banyak proyek ke dalam folder proyek.
  10. Toolbox : Berisi tool-tool geoprocessing.
  11. Behaviour Rules : Dapat dibuat untuk mendefinisikan atribut legal, relation, topologi, koneksi.
Dengan koneksi ke ArcGIS, SDE akan menggantikan fungsi dari PostGIS. Tetapi terdapat kekurangan, yaitu karena koneksi SDE hanya tersedia di ArcGIS maka pada database yang terkoneksi melalui SDE akan terbentuk schema "sde" yang menggunakan owner "sde" yang mana semua data spasial maupun non spasial yang di buat atau di olah di ArcGIS akan otomatis tersimpan ke dalam schema tersebut. Namun data spasial maupun non spasial yang ada di dalam schema tersebut tidak akan bisa di akses melalui aplikasi GIS lainnya, karena hanya bisa di akses dan di olah di ArcGIS.
Untuk aplikasi GIS lainnya hanya bisa mengakses dan mengolah data spasial di PostgreSQL dengan menggunakan dukungan PostGIS dan data spasial tersimpan di schema "public" dengan owner "postgres"
Di dalam geodatabase yang baru saja di buat, di dalamnya belum ada data, untuk menginput data vektor (yang bukan dari geodatabase lain, bukan format feature class) caranya bisa dilihat pada video animasi berikut :
Import vektor non Feature Class ke dalam Geodatabase
Import vektor non Feature Class ke dalam Geodatabase
Jika akan mengimport feature class dari geodatabase lain, bisa di lakukan dengan cara klik kanan pada koneksi geodatabase > import. Pilih Feature Class (single) jika akan mengimport 1 file/data feature class, namun jika yang akan di import dalam jumlah banyak pilih Feature Class (multiple).
Untuk mengimport data dalam bentuk raster, caranya bisa di lihat pada video animasi berikut :
Import raster ke dalam Geodatabase
Import raster ke dalam Geodatabase
Berikut
Penjelasan di atas adalah cara melakukan koneksi dengan menggunakan ArcSDE. Selanjutnya bagaimana cara melakukan koneksi PostgreSQL dengan menggunakan ODBC ke ArcGIS.
Pertama silahkan unduh terlebih dahulu PostgreSQL ODBC pada link berikut : 
Unduh dan instal driver PostgreSQL ODBC untuk system type 32 bit, meskipun PC/Laptop yang digunakan menggunakan sistem type 64 bit. Setelah berhasil di instal, masuk ke directory C:\Windows\SysWOW64\ kemudian jalankan program edbcad32.exe. Ikuti langkah-langkap seperti pada video animasi berikut :
Menambahkan koneksi ODBC ke PostgreSQL
Menambahkan koneksi ODBC ke PostgreSQL
Terakhir, buat koneksi di ArcCatalog untuk memanggil koneksi ODBC ke PostgreSQL. Caranya bisa di lihat pada video animasi berikut :
Membuat koneksi Untuk memanggil Koneksi ODBC di ArcCatalog
Membuat koneksi Untuk memanggil Koneksi ODBC di ArcCatalog
Hasil koneksi dengan ODBC tidak sama dengan cara yang pertama dengan SDE, di sini user hanya bisa menampilkan data dalam bentuk tabel bukan dalam bentuk spasial. Jadi koneksi ini hanya jiga kia ini mengelola data tabel saja.
Proses koneksi PostgreSQL ke ArcGIS bisa di lihat juga pada video berikut :
Terdapat beberapa penjelasan teks pada artikel ini yang dikutip dari wikipedia.org dan inigis.com. Semoga tulisan ini bermanfaat . . .

Wassalamualaikum Wr.Wb