![]() |
Gambar 1 - Atribut Tabel Layer Bali |
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);
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'
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 :
<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);
// 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);
<!--- 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
![]() |
Video 1 - Animasi GIF WebGIS Info-Geospasial (setengah selesai part 4) |
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%; }
<!-- 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 -->
#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%; }
#map { height:86%; } /*ganti tinggi id map dari 100% menjadi 86%*/
<link rel="stylesheet" href="css/font-awesome-4.6.2/css/font-awesome.min.css"/>
<!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>
![]() |
Video 2 - Animasi GIF WebGIS Info-Geospasial (Selesai part 4) |
Artikel Terkait :