GeoSIS ID

2017-08-18 17:41:00

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 4

Lanjutan 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 :

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.
Ketika pada saat web di akses untuk pertama kali, semua layer peta akan langsung muncul secara tumpang tindih.
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 :

POLYGON STYLE COLOR TO COLUMN ATTRIBUTE TABLE IN QGIS

Hasil dari proses tersebut akan seperti pada gambar berikut :

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

Bootstrap

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 :

Video 1 - 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 : htdocswebgisgeosimg

Icon Tool Pencarian

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://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>
<!-- 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://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>
<!-- 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%;
 }

Jangan lupa ganti tinggi map berikut :

#map {
  height:86%; 
} /*ganti tinggi id map dari 100% menjadi 86%*/

Dan unduh font awesome berikut agar icon di dalam menu bisa tampil :

Font Awesome

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"/>

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 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.groupedlayercontr
ol/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://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</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 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 pe
ncarian
          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://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>
</body>
</html>

Penggunaan script seperti yang di jelaskan di atas akan menghasilkan WebGIS seperti berikut :

Video 2 - Animasi GIF WebGIS Info-Geospasial (Selesai part 4)

Part selanjutnya akan dijelaskan bagaimana mengaktifkan menu yang ada, termasuk membuat legenda yang terkoneksi langsung ke database.

Artikel Terkait :

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 4

Share This Post

Join our newsletter!