GeoSIS ID

2018-08-27 01:32:00

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 5

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) kami, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi anda 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 anda.</p><br>
<p>Hal tersebut mendorong kami untuk terus berusaha membagi ilmu serta pengetahun terkait Geospasial, khususnya Pembuatan WebGIS kepada anda serta pengikut kami.</p><br>
<p>Terimkasih kami ucapkan kepada anda, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di kami 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" />

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 > geos, 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=geos 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/geos/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 k
esalahan.
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;
    backgroun
d: #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*/

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

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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos: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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos:bali_geologi&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              </table>
           </div>
</div>

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 geosis.id menyajikan berbagai informasi spasial di indonesia'/>
<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" /> 
<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://geosis.id">kami</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, fillCol
or: 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 kamiistrasi 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) kami, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi anda 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 anda.</p><br>
<p>Hal tersebut mendorong kami untuk terus berusaha membagi ilmu serta penge
tahun terkait Geospasial, khususnya Pembuatan WebGIS kepada anda serta pengikut kami.</p><br>
<p>Terimkasih kami ucapkan kepada anda, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di kami 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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos: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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos: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://geosis.id">kami</a></p>
<nav class="menu-footer">
<ul>
<li><a href="https://geosis.id/p/blog-page_4.html">TOS</a></li>
<li><a href="https://geosis.id/p/privacy-policy.html">PRIVACY POLICY</a></li>
<li><a href="https://geosis.id/p/contact.html">CONTACT</a></li>
</ul>
</nav>
</footer>
</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 kami 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 kami share dalam bentuk video beberapa WebGIS yang kami buat, dan mungkin bisa di tiru atau menjadi inspirasi dari segi design, fitur dan fungsinya sendiri.

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 5

Share This Post

Join our newsletter!