MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 4

Assalamualaikum Wr.Wb

Kembali lagi dengan artikel proses pembuatan WebGIS dengan menggunakan Leaflet Javascript. Pada tahap sebelumnya telah di jelaskan cara membuat tool pilihan layer peta dengan tampilan radio button, kemudian telah di jelaskan juga proses membuat tool pencarian yang dapat di gunakan terhadap semua layer peta. Namun pada tutorial sebelumnya dirasa masih terdapat beberapa kekurangan diantaranya :
  1. Tool Pencarian :  ketika mencoba mencari objek berdasarkan nama keterangan dari layer peta yang akan di cari, maka akan muncul objek berbentuk circle, objek berbentuk circle tersebut tidak akan hilang kecuali halaman web di refresh. 
  2. Ketika pada saat web di akses untuk pertama kali, semua layer peta akan langsung muncul secara tumpang tindih. 
  3. Pemberian warna objek polygon yang tidak efektif. Karena harus di beri warna satu per satu.
Permasalahan di atas akan coba di perbaiki pada artikel ini. Dan akan di jelaskan juga cara untuk mempercantik desain web.
Pertama buka file SHP Bali Administrasi dan Bali Geologi yang ada di dalam database di PostgreSQL dengan menggunakan aplikasi QuantumGIS. Kemudian buat field baru dengan nama 'color'.
Kategorikan warna objek polygon berdasarkan field tertentu. Kemudian tuliskan kode warna dalam bentuk hexadecimal yang ada pada setiap objek polygon ke dalam field 'color' di atribut tabel. Proses tersebut sudah pernah di jelaskan pada artikel berikut :
Hasil dari proses tersebut akan seperti pada gambar berikut :
Atribut Tabel Layer Bali
Atribut Tabel Layer Bali
Setelah melakukan tahap di atas, kemudian pastikan nama tabel di dalam database tidak ada yang menggunakan huruf kapital (misal: sebelumnya nama tabel layer bali administrasi adalah 'BALI', ganti nama tersebut menjadi 'bali'). Hal tersebut di lakukan untuk mempermudah pada saat mengikuti tutorial di part selanjutnya. Lakukan publish ulang untuk setiap layer di dalam GeoServer.
Pada tahap sebelumnya, untuk menampilkan objek polygon di web, script yang digunakan adalah seperti berikut :
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ // sekarang perintahnya diawali dengan variabel
    style: function(feature){
    var fillColor, // ini style yang akan digunakan
            kode = feature.properties.kode_kab; // pewarnaan objek polygon berdasarkan kode kabupaten di dalam file geojson
             if ( kode > 5171 ) fillColor = "#ffd700";
        else if ( kode > 5108 ) fillColor = "#4ba754";
        else if ( kode > 5107 ) fillColor = "#9b3339";
        else if ( kode > 5106 ) fillColor = "#dd38e0";
        else if ( kode > 5105 ) fillColor = "#908965";
        else if ( kode > 5104 ) fillColor = "#3ab7e9";
        else if ( kode > 5103 ) fillColor = "#c8cf06";
        else if ( kode > 5102 ) fillColor = "#2f838c";
        else if ( kode > 5101 ) fillColor = "#fede36";
        else fillColor = "#ff4040";  // no data
        return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
      },
      onEachFeature: function(feature, layer){
      layer.bindPopup("<center>" + feature.properties.nama + "</center>"), // popup yang akan ditampilkan diambil dari field 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(map);
Dengan menggunakan script di atas, proses pemberian warna pada objek polygon menjadi tidak efektif, karena harus di beri warna secara manual satu per satu dan script di atas berpengaruh terhadap layer yang tumpang tindih ketika web pertama kali di akses.
Untuk mengatasi hal tersebut, ganti script di atas dengan menggunakan script berikut :
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
        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'
Lakukan hal yang sama seperti cara di atas untuk script memanggil peta geologi. Selanjutnya tambahkan variabel berikut dan tempatkan di posisi paling atas di bawah variabel map :
var peta = new L.LayerGroup();
var items = [];
Dengan mengikuti tahapan di atas, sekarang objek polygon sudah otomatis memiliki warna dengan mengambil kode warna yang ada di dalam field 'color'. Hasilnya akan sama seperti sebelumnya namun dengan cara yang berbeda.
Layer peta yang di tampilkan masih akan tumpang tindih ketika web di jalankan, dikarenakan ada variabel lain yang mengakibatkan hal tersebut terjadi yang ada di dalam script tool pencarian. Oleh karena itu, script tool pencarian harus di ganti. Sebelum di ganti silahkan unduh terlebih dahulu bahan berikut :
Simpan dan ekstrak folder Bootstrap di dalam folder css, kemudian sisipkan link pemanggil file bootstrap seperti berikut :
<link rel="stylesheet" href="css/bootstrap.min.css"/>
Script untuk membuat tool pencarian sebelumnya ditulis seperti berikut :
// MENAMBAHKAN TOOL PENCARIAN
var searchlayer = L.featureGroup([layer_ADMINISTRASI, layer_GEOLOGI]);
L.Control.Search.include({
  _recordsFromLayer: function() { //return table: key,value from layer
    var that = this,
      retRecords = {},
      propName = this.options.propertyName,
      loc;
      
    function searchInLayer(layer) {
      if (layer instanceof L.Control.Search.Marker) return;

      if (layer instanceof L.Marker || layer instanceof L.CircleMarker) {
        if (that._getPath(layer.options, propName)) {
          loc = layer.getLatLng();
          loc.layer = layer;
          retRecords[that._getPath(layer.options, propName)] = loc;

        } else if (that._getPath(layer.feature.properties, propName)) {

          loc = layer.getLatLng();
          loc.layer = layer;
          retRecords[that._getPath(layer.feature.properties, propName)] = loc;

        } else {
          throw new Error("propertyName '" + propName + "' not found in marker");
        }
      } else if (layer.hasOwnProperty('feature')) { //GeoJSON

        if (layer.feature.properties.hasOwnProperty(propName)) {
          loc = layer.getBounds().getCenter();
          loc.layer = layer;
          retRecords[layer.feature.properties[propName]] = loc;
        } else {
          throw new Error("propertyName '" + propName + "' not found in feature");
        }
      } else if (layer instanceof L.LayerGroup) {
        //TODO: Optimize
        layer.eachLayer(searchInLayer, this);
      }
    }

    this._layer.eachLayer(searchInLayer, this);

    return retRecords;
  }
});

L.control.search({

    layer: searchlayer, 

    propertyName: 'nama', // nama field yang akan dijadikan acuan di dalam tool pencarian
    moveToLocation: function(latlng, title, map) {
      //map.fitBounds( latlng.layer.getBounds() );
      var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
  })
  .addTo(map);
Hapus script tool pencarian di atas, kemudian ganti dengan script berikut :
// SEARCH TOOL

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);
Kemudian hapus link CSS dan JS dari tool pencarian, berikut link yang harus di hapus :
<!--- CSS --->
<link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css"/>
<!--- JS --->
<script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
Setelah link CSS dan JS tool pencarian di hapus. Tambahkan link JS berikut agar tool pencarian yang baru dapat berfungsi :
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
Dengan mengikuti tahapan di atas, maka hasilnya akan seperti berikut :
Animasi GIF WebGIS Info-Geospasial
Animasi GIF WebGIS Info-Geospasial (setengah selesai part 4)
Ukuran dari tool pencarian yang dibuat, masih kurang pas jika di pasang berdekatan dengan tool lainnya. Untuk mengatasi hal tersebut tambahkan CSS berikut pada file style.css :
input[type=text] {
 width: 27px;
 margin-left: -1px;
 margin-bottom: -25px;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('img/search-icon.png');
 padding: 5px 3px 3px 23px;
 background-position: 3px 3px; 
 box-shadow: 0 1px 2px rgba(0,0,0,0.4);
 background-repeat: no-repeat;
 -webkit-transition: width 0.2s ease-in-out;
 transition: width 0.2s ease-in-out;
}
input[type=text]:focus {
    width: 100%;
}
Tambahkan icon berikut ke dalam directory : htdocs\webgis\info-geospasial\img
Tahap terakhir pada artikel ini, yaitu mempercantik desain WebGIS. Tambahkan script header dan footer serta menu berikut ke dalam file index.php : 
<!-- TEMPATKAN KODE UNTUK MEMBUAT HEADER DI BAWAH INI, LETAKAN KODE DI ATAS TAG <div id="map"> -->
<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>
<!-- END KODE HEADER -->
<!-- TEMPATKAN KODE UNTUK MEMBUAT FOOTER DI BAWAH INI, LETAKAN KODE DI ATAS PENUTUP TAG </body> -->
<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>
<!-- END KODE FOOTER -->
Sisipkan kode CSS berikut untuk mengatur tampilan header, footer dan menu ke dalam file style.css :
#header {
  height:8%;
  width:100%;
  margin-top:-21px;
  background-color:#2e2e2e;
  color:#fff;
  font-family: "Andale Mono", "Monotype.com", monospace;
 }
 #header h2 {
  font-size:25px;
  color:#fff;
  line-height:220%;
  margin-left:2.5%;
 }
 #header h2 a:link{
 color: #fff;
 text-decoration: none;
 }
  #header h2 a:visited{
 color: #fff; 
 text-decoration: none;
 }
  #header h2 a:hover{
 color:#fff;
 }
 .menu-header {
  position:relative;
  margin:0 auto;
  margin-top: -3.3%;
    margin-left: 18%;
  font-size:13px;
  border-radius:2px;
  font-family: "Andale Mono", "Monotype.com", monospace;
}
.menu-header ul {
  list-style:none;
  margin-left:-25px;
}
.menu-header ul li {
  display:inline-table; 
  margin:0 auto; 
  margin-right: 10px;
}
.menu-header ul li a {
  text-align:center; 
  text-decoration:none; 
  text-transform:uppercase;
  margin-left:5px;
}
.menu-header ul li a:link{
              color: #fff;
              text-decoration: none;
}
.menu-header ul li a:visited{
                  color: #fff; 
                  text-decoration: none;
}
.menu-header ul li a:hover{
                color:#fff;
 }   

  .menu-footer {
  position:relative;
  float:right;
  margin:0 auto;
 margin-top: 0.8%;
  margin-right: 2%;
  font-size:13px;
  border-radius:2px;
  font-family: "Andale Mono", "Monotype.com", monospace;
}
.menu-footer ul {
  list-style:none;
  margin-left:-25px;
}
.menu-footer ul li {
  display:inline-table; 
  margin:0 auto; 
  margin-right: 10px;
}
.menu-footer ul li a {
  text-align:center; 
  text-decoration:none; 
  text-transform:uppercase;
  margin-left:5px;
}
.menu-footer ul li a:link{
              color: #e6e6fa;
              text-decoration: none;
}
.menu-footer ul li a:visited{
                  color: #e6e6fa;
                  text-decoration: none;
}
.menu-footer ul li a:hover{
                color:#337ab7;
 } 

.right{
 float:right;
 margin-right:10px;
}

 #footer {
  height:6.1%;
  width:100%;
  background-color:#2e2e2e;
  font-family: "Andale Mono", "Monotype.com", monospace;
  /*line-height:10px;*/
 }
 #footer p {
  color:#fff;
  float:left;
  margin-left:2%;
  margin-top:0.8%;
 }
Dan tidak lupa unduh juga bahan berikut agar icon di dalam menu bisa tampil :
Simpan folder font awesome di dalam folder css. Kemudian panggil link nya seperti berikut :
<link rel="stylesheet" href="css/font-awesome-4.6.2/css/font-awesome.min.css"/> // sesuaikan versi font awesome yang di gunakan
Berikut gabungan script dari keseluruhan tahap di atas dan termasuk tahap-tahap sebelumnya  :
<!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/font-awesome-4.6.2/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" />
<script src="leaflet/leaflet.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</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> 
<!-- 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>
Penggunaan script seperti yang di jelaskan di atas akan menghasilkan WebGIS seperti berikut :
Animasi GIF WebGIS Info-Geospasial (Selesai part 4)
Animasi GIF WebGIS Info-Geospasial (Selesai part 4)
Tutorial Pembuatan WebGIS dengan menggunakan Leaflet Javascript Part 4 sudah selesai. Di part selanjutnya baru akan dijelaskan bagaimana mengaktifkan menu yang ada, termasuk membuat legenda yang terkoneksi langsung ke database. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

POLYGON STYLE COLOR TO COLUMN ATTRIBUTE TABLE IN QGIS

Assalamualaikum Wr.Wb

Polygon secara ilmu GIS dapat diartikan sebagai sebuah objek berupa vektor yang terbentuk oleh sekumpulan koordinat yang mewakili benda/objek tertentu di muka bumi, sedangkan Color (warna) dapat diartikan sebagai sebuah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna. Identitas suatu warna ditentukan berdasarkan panjang gelombang cahaya tersebut.
Pada tulisan ini blog INFO-GEOSPASIAL akan menjelaskan bagaimana cara menyalin suatu kode warna di dalam objek polygon di QGIS ke dalam suatu kolom/field di atribut tabel pada layer polygon tersebut.
Caranya, di dalam aplikasi QuantumGIS panggil layer format SHP (shapefile) yang isinya berupa objek polygon.
SHP Bali in QGIS
SHP Administrasi Provinsi Bali di QGIS
Kemudian di dalam atribut tabel layer tersebut tambahkan 2 field/kolom dengan nama 'color_hex' dan 'color_rgb'. Buat dengan type Text (string) dengan panjang karakter 15.
Tabel Layer Administrasi Provinsi Bali
Tabel Layer Administrasi Provinsi Bali
Selanjutnya buat warna objek polygon menjadi di kategorikan berdasarkan field yang di inginkan (contoh pada artikel ini menggunakan field 'nama').
Layer Administrasi Bali dalam tampilan warna yang di kategorikan
Layer Administrasi Bali dalam tampilan warna yang di kategorikan
Dalam tahap berikutnya adalah bagaimana caranya mengambil kode warna objek polygon yang sedang di tampilkan ke dalam kolom 'color_hex' dan 'color_rgb' di dalam atribut tabel. Terdapat dua cara, yang pertama dilakukan dengan manual, yaitu dengan menyalin kode warna pada setiap objek polygon satu per satu. Hal tersebut cukup cepat di lakukan jika jumlah objek polygon yang di beri warna hanya sedikit, tapi itu akan menjadi tidak efektif jika dilakukan untuk objek polygon yang di beri warna berjumlah banyak. Untuk mengatasi hal tersebut, maka kita bisa lakukan cara yang kedua yaitu dengan menggunakan script Python.
Caranya dengan aktifkan tool QGIS Python Console. Kemudian masukan Script Python berikut :
prefix = "'"
layer = iface.activeLayer()
attr = layer.rendererV2().classAttribute()
attrColor = 'color_hex' # Nama field yang akan di isi kode warna
fieldIndex = layer.dataProvider().fieldNameIndex(attrColor)
attrFeatMap = {}

for cat in layer.rendererV2().categories(): 
  expr = "\""+attr+"\"="+prefix+unicode(cat.value())+prefix
  for f in layer.getFeatures(QgsFeatureRequest(QgsExpression(expr))):
    attrMap = { fieldIndex : cat.symbol().color().name()}
    attrFeatMap[ f.id() ] = attrMap

layer.dataProvider().changeAttributeValues( attrFeatMap )
Python adalah bahasa pemrograman interpretatif multiguna dengan filosofi perancangan yang berfokus pada tingkat keterbacaan kode. Python diklaim sebagai bahasa yang menggabungkan kapabilitas, kemampuan, dengan sintaksis kode yang sangat jelas, dan dilengkapi dengan fungsionalitas pustaka standar yang besar serta komprehensif.
Script di atas berfungsi untuk menyalin kode warna pada objek polygon ke dalam bentuk hexadecimal.
Proses Menjalankan Scipt dengan Python Console
Proses Menjalankan Scipt dengan Python Console
Sebelum menjalankan script di atas, pastikan warna objek polygon sudah di kategorikan, dan layer SHP sudah dalam keadaan editing.
Setelah Script di atas di jalankan di Python Console, maka hasilnya kode warna dalam bentuk hexadecimal akan otomatis terisi pada field 'color_hex' seperti pada gambar berikut :
Tabel Layer Administrasi Provinsi Bali dengan file color sudah terisi dengan kode warna
Tabel Layer Administrasi Provinsi Bali dengan file color_hex sudah terisi dengan kode warna
Untuk menyalin kode warna dalam bentuk RGB (Red,Green,Blue) maka script yang digunakan adalah sebagai berikut :
prefix = "'"
layer = iface.activeLayer()
attr = layer.rendererV2().classAttribute()
attrColor = 'color_rgb' # Nama field yang akan di isi kode warna
fieldIndex = layer.dataProvider().fieldNameIndex(attrColor)
attrFeatMap = {}

for cat in layer.rendererV2().categories(): 
  expr = "\""+attr+"\"="+prefix+unicode(cat.value())+prefix
  for f in layer.getFeatures(QgsFeatureRequest(QgsExpression(expr))):
    attrMap = { fieldIndex : str(cat.symbol().color().red()) +','+ str(cat.symbol().color().green()) +','+ str(cat.symbol().color().blue())}
    attrFeatMap[ f.id() ] = attrMap

layer.dataProvider().changeAttributeValues( attrFeatMap )
Jika scipt di atas di jalankan, maka di dalam kolom 'color_rgb' akan di dapat hasil seperti berikut :
Tabel Layer Administrasi Provinsi Bali dengan file color_rgb sudah terisi dengan kode warna
Tabel Layer Administrasi Provinsi Bali dengan file color_rgb sudah terisi dengan kode warna
Tahapan di atas bisa di lihat pada video berikut :
Artikel ini dibuat karena akan menjadi artikel pendukung untuk artikel lanjutan Pembuatan WebGIS dengan Leaflet Javascript yang akan segera di buat. Sumber scipt di atas di dapat dari gis.stackexchange.com, Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

DOWNLOAD PETA INDONESIA TERBARU TAHUN 2017

Assalamualaikum Wr.Wb

Indonesia kembali menerbitkan peta NKRI terbaru tahun 2017. Peta kali ini di buat oleh Kementrian Koordinator Bidang Kemaritiman yang diresmikan dan diperbarui pada tanggal 14 Juli 2017. Peta ini ditetapkan dan ditandatangani oleh 21 kementrian dan/atau lembaga, diantaranya :
Kemenko Bidang Polhukam, Kemenko Bidang Perekonomian, kemenko Bidang Kemaritiman, Kementrian Dalam Negeri, Kementrian Luar Negeri, Kementrian Pertahanan, Kementrian Hukum dan HAM, Kementrian Keuangan, Kementrian ESDM, Kementrian Perhubungan, Kementrian Lingkungan Hidup dan Kehutanan, Kementrian kelautan dan Perikanan, Tentara Nasional Indonesia, TNI-AL, Pusat Hidrografi & Oseanografi TNI-AL, POLRI, Badan Keamanan Laut, Badan Informasi Geospasial (BIG), Lembaga Ilmu Pengetahuan Indonesia (LIPI), Badan Pengkajian dan Penerapan Teknologi (BPPT), dan Badan Meteorologi, Klimatologi dan Geofisika (BMKG).
Adapaun perubahan atau pembaruan dari peta ini dibanding dengan peta NKRI yang di buat oleh BIG pada tahun 2015 adalah :
  1. Batas dengan Palau, di peta yang sebelumnya, batas wilayah masih melengkung dan diberi ruang garis lurus untuk pulau milik Palau. Sekarang menjadi ditarik garis lurus dan ditutup sehingga menekan sampai sekitar 100 mil. Karena batas ZTE (Zona Tangkap Eksklusif) menjadi perairan Indonesia, dua pulau sebelumnya karang Helen dan Pulau Tobi diberi ruang 12 nautical mile (zona perairan).
  2. Perbatasan antara Indonesia dengan Filipina di laut Sulawesi, jika sebelumnya ditandai dengan garis putus-putus atau masih klaim, Dalam perubahan ini sudah resmi menjadi wilayah Indonesia karena perjanjian ZTE antara Indonesia dengan Filipina sudah menghasilkan kesepakatan bahkan sudah ratifikasi dengan UU no 4 tahun 2017.
  3. Update atau perubahan penamaan laut, khususnya zona di bagian utara Laut Natuna yang kini di beri nama Laut Natuna Utara. Sebelumnya. Laut Natuna hanya berada di bagian dalam garis laut teritorial dan laut kepulauan saja. Hal ini dilakukan mengingat sebelumnya sudah ada kegiatan migas yang menggunakan nama itu, sehingga nantinya akan ada kesamaan.
  4. Selat Malaka, Indonesia juga terjadi beberapa perubahan dari sisi klaim Indonesia. Jika sebelumnya ZEE (Zona Ekonomi Eksklusif) antara Indonesia dengan Malaysia belum rampung ditetapkan. Pada Peta baru ini, Indonesia mengklaim ZEE lebih maju menekan ke daerah Malaysia.
  5. Perbedaan batas laut teritorial juga terjadi pada perbatasan antara Indonesia, Singapura dan Malaysia tepatnya di selat Riau. Pada peta sebelumnya tidak ada zona perairan yang ada hanya South Ledge dan Pedra Branca. Untuk peta Sekarang diberikan Zona Perairan. Pedra Branca sendiri milik Singapura, sedangkan South Ledge masih negosiasi antara Singapura dan Malaysia. Kedua wilayah itu diberikan alokasi wilayah sebesar 500 meter.
Peta Indonesia terbaru ini dapat di unduh pada link berikut ini :
Sumber data di dapat dari website Tanahair Indonesia. beberapa informasi tulisan dikutip dari website Detik.com. Dapatkan juga peta NKRI tahun 2015 di link artikel Peta Indonesia Tahun 2015.
Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

DOWNLOAD PETA GEOLOGI GUNUNGAPI SELURUH INDONESIA

Assalamualaikum Wr.Wb

Peta Geologi Gunungapi merupakan peta yang menggambarkan tentang keadaan geologi suatu wilayah Gunungapi, yang meliputi susunan batuan, bentuk/struktur dari masing-masing satuan batuan tersebut, umur dan ketebalan batuan, serta menjelaskan pula proses terbentuknya batuan-batuan tersebut.
Berikut ini akan di bagikan link unduh peta Geologi Gunungapi yang dibuat oleh Direktorat Vulkanologi sekitar tahun 90an. Peta dapat di unduh pada link berikut ini :
Bali & Nusa Tenggara
Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

DOWNLOAD PETA RAWAN GERAKAN TANAH SELURUH INDONESIA

Assalamualaikum Wr.Wb

Peta Rawan Gerakan Tanah adalah peta yang menggambarkan tingkat kerentanan suatu daerah dari terjadinya suatu Gerakan Tanah. Hal tersebut dapat terjadi dikarenakan banyak faktor diantaranya Jenis Tanah, Curah Hujan, Kemiringan Lereng, Gempa Bumi, dan banyak faktor lainnya, termasuk dapat juga disebabkan karena adanya aktivitas manusia yang menyebabkan terjadinya Gerakan Tanah tersebut.
Dalam postingan ini peta yang dibagikan menggambarkan tingkat kerentanan Gerakan Tanah yang diakibatkan diluar faktor manusia. Peta ini dibuat oleh Pusat Vulkanologi dan Mitigasi Bencana Geologi.
Berikut ini adalah link unduh untuk peta Rawan Gerakan Tanah satu Indonesia (tahun 2008) dan per pulau yang di buat tahun 2009.
Link unduh peta Rawan Gerakan Tanah per Provinsi tahun pembuatan 2009.
Per Provinsi
Link unduh peta Rawan gerakan tanah per Kabupaten/Kota dan di pisah per Provinsi. Tahun pembuatan peta berkisar antara tahun 2013-2014.
Demikian artikel dengan judul DOWNLOAD PETA RAWAN GERAKAN TANAH SELURUH INDONESIA. Sumber data di dapat dari Pusat Vulkanologi dan Mitigasi Bencana Geologi.
Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb