<!-- 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 -->
/*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*/
<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.