Ikuti Pelatihan GIS dari INFO-GEOSPASIAL KLIK TAUTAN INI UNTUK INFORMASI PELATIHAN. dan Dapatkan Rancangan WebGIS atau buat WebGIS baru KLIK TAUTAN INI UNTUK INFORMASI WEBGIS.

PELATIHAN GIS (Geographic Information System)

Assalamualaikum Wr.Wb 

Dengan seiring berkembangnya zaman yang semakin maju, perkembangan teknologi pun seiring dengan perkembangan zaman tersebut. Perkembangan teknologi juga berpengaruh pada kemajuan teknologi dalam dunia IT (Information Technology) yang berkembangan dengan pesat. Salah satunya adalah dengan munculnya Teknologi GIS (Geographic Information System). 

pelatihanGISlogo

Teknologi GIS (Geographic Information System) telah berkembang pesat. Saat ini telah dikenal istilah-istilah Desktop GIS, Web GIS, dan Database Spatial yang merupakan wujud perkembangan teknologi Sistem Informasi Geografis, untuk mengakomodir kebutuhan solusi atas berbagai permasalahan yang hanya dapat dijawab dengan teknologi GIS ini.
Konsep dasar GIS adalah sistem yang dirancang untuk bekerja dengan data yang tereferensi secara spasial atau koordinat-koordinat geografis. GIS memiliki kemampuan untuk melakukan pengolahan data dan melakukan operasi-operasi tertentu dengan menampilkan dan menganalisa data. Aplikasi GIS saat ini tumbuh tidak hanya secara jumlah aplikasi namun juga bertambah dengan jenis keragaman aplikasinya.
Dalam banyak hal penggunaan GIS akan sangat mempermudah khususnya yang berkaitan dengan keruangan. Secara umum salah satu produk dari GIS yang paling dikenal adalah Peta, yang mana Peta memiliki banyak sekali kegunaan sesuai dengan isinya. Contoh peta Curah Hujan untuk mengetahui perserbaran curah hujan, Peta Topografi untuk menggambarkan gambaran objek alami dan/atau buatan yang ada di permukaan bumi, Peta Administrasi yang menunjukan batasan-batasan administrasi dari suatu wilayah,  dan lain sebagainya.
Mengetahui GIS merupakan ilmu sekaligus teknologi yang saat ini sedang marak dan banyak dibutuhkan di dunia industri, maka banyak pula orang individu ataupun lembaga yang mulai mempelajari tentang GIS dan menerapkan teknologi ini pada sektor kegiatannya. Hal tersebut membuat terus meningkatnya permintaan pelatihan GIS ke email INFO-GEOSPASIAL yang sejak awal tidak berfokus pada pelatihan, namun lebih kepada memberi tutorial melalui artikel atau video.
Berdasarkan latar belakang tersebut, maka INFO-GEOSPASIAL akan memenuhi serta meramaikan dan sekaligus membagi pengetahuan tentang GIS dengan membuka pelatihan GIS Tingkat Dasar, guna menghasilkan SDM yang ahli dalam bidang keilmuan GIS.

Untuk saat ini materi pelatihan yang sudah tersedia hanya untuk GIS Tingkat Dasar terlebih dahulu, materi pelatihan GIS Tingkat Lanjut masih sedang dalam proses pembuatan.

Pelatihan dapat bersifat individu ataupun berkelompok, yang mana proses pelatihan dapat dilaksankan secara online ataupun offline (tatap muka langsung). Untuk informasi lebih lanjut dapat menghubungi di halaman kontak atau di alamat email admin@info-geospasial.com

Wassalamualaikum Wr.Wb




JUAL RANCANGAN WEBGIS DAN MENERIMA JASA PEMBUATAN WEBGIS BARU

Assalamualaikum Wr.Wb

WebGIS atau website GIS (Geographic Information System) merupakan salah satu bentuk implementasi dari produk GIS yang memuat atau berisikan informasi Keruangan yang di kemas dan di tampilkan dalam bentuk website yang dapat di akses melalui jaringan internet di browser, secara umum ini juga sering di sebut peta digital.
Semakin maraknya penggunaan data spasial (lokasi) membuat penggunaan WebGIS menjadi semakin diminati karna mempermudah dalam banyak hal (menunjukan lokasi terkini, daerah terdampak banjir, kondisi laluintas jalan, dsb) hanya dengan melalui jaringan internet di browser, dengan menggunakan perangkat apapun (laptop, tablet, hp) tanpa perlu menginstal aplikasi apapun (kecuali browser) semua dapat di akses dengan sangat mudah.
Berdasarkan alasan di atas serta untuk memenuhi banyaknya permintaan serta minat pada WebGIS maka INFO-GEOSPASIAL menginformasikan secara umum melalui artikel ini bahwa mulai saat ini admin membuka jasa pembuatan WebGIS dengan tema serta fitur yang dapat disesuiakan dengan kebutuhan/ permintaan. Dan juga menjual Berbagai rancangan WebGIS yang sudah pernah di buat sebelumnya.
Data yang di tampilkan dan akan di kirim merupakan data sampel (data tidak dengan informasi yang sebenarnya) yang bisa di ganti dan di sesuaikan dengan data lain. 
1. WebGIS Data Aset Jaringan & Pelanggan PLN (lihat video)

Halaman Peta Popup Informasi Objek Peta Halaman Grafik Halaman Tabel

2. WebGIS Data Aset Jaringan BTS DI Yogyakarta (lihat video)

Halaman Peta Popup Informasi BTS Popup Informasi Adm Popup List Data

3. WebGIS Tata Ruang Kabupaten Ciamis (lihat video)
4. WebGIS Potensi Desa Wisata Provinsi Bali

Halaman Peta Popup List Desa Wisata Popup Grafik Popup Legenda

5. WebGIS Pariwisata Kabupaten Pangandaran (lihat video)

Halaman Beranda Halaman Peta Popup List Lokasi Wisata Popup Informasi Lokasi Wisata

6. WebGIS Data Statistik Wilayah Administrasi (lihat video)

Halaman Peta Halaman Tabel Halaman Grafik Halaman Cetak Report

7. WebGIS Sebaran Mineral Non Logam dan Batuan di Wilayah Jawa Barat
8. WebGIS E-MAPS Rupabumi Provinsi Bali
Untuk Rancangan WebGIS yang belum disertakan lampiran gambar serta video, akan segera menyusul.
Untuk infomasi harga Rancangan WebGIS ataupun Jasa Pembuatan WebGIS (harga disesuaikan dengan fitur, durasi pengerjaan, serta kerumitan proses pembuatan) hubungi di halaman kontak atau langsung di alamat email admin@info-geospasial.com.

Wassalamualaikum Wr.Wb

DOWNLOAD DATA SHP SELURUH INDONESIA DI INA-GEOPORTAL

Assalamualaikum Wr.Wb

Artikel Download Data SHP Indonesia dari Ina-Geoportal ini sebenarnya sudah pernah di bahas dan di praktekan juga di artikel berikut :
Namun behubung masih saja banyak yang meminta data shp, khususnya per wilayah dan karena di artikel yang dulu design serta fitur dari website Ina-Geoportal masih belum update seperti sekarang, maka admin putuskan untuk membut artikel ini.
Di sini tidak perlu dijelaskan apa itu Ina-Geoportal, karna sudah pernah admin jelaskan pada beberapa artikel. Jika ada yang belum tau silahkan buka dan baca pada link artikel yang di tautkan di atas.

Ina-Geoportal terbagi menjadi beberapa situs diantaranya portal.ina-sdi.or.id, portalksp.ina-sdi.or.id, tides.big.go.id/DEMNAS, sedangkan halaman Utama yang dapat mengakses ketiga situs tersebut adalah tanahair.indonesia.go.id.
Di sini yang akan dijelaskan adalah cara untuk mengunduh data vektor (SHP).. Pertama buka alamat tanahair.indonesia.go.id, maka akan disajikan tampilan seperti berikut :
Tanahair.Indonesia.go.id
Tanahair.Indonesia.go.id
Sebelumnya pastikan sudah melakukan registrasi terlebih dahulu dengan masuk ke halaman registrasi melalui tombol registrasi di kanan atas. Kita anggap semua sudah memiliki akun. Selanjutnya login dengan username dan password yang digunakan pada saat registrasi.
Menu Download
Menu Download
Di drop down menu download, terdapat empat (4) pillhan menu yaitu :
  1. Peta AOI : Unduh peta (vektor) berdasarkan AOI (Area of Interest) yaitu area yang sesuai dengan kemauan kita, misah hanya seukuran lapangan sepakbola atau bahkan bisa sampai mencakup ukuran beberapa administrasi dalam sekali proses unduh.
  2. Peta Per Wilayah : Unduh peta berdasarkan wilayah administrasi setingkat kabupaten/kota.
  3. DEM Nasional : Unduh Data Ketinggian dan Kedalaman berupa raster. Menu ini akan diarahkan ke situs tides.big.go.id/DEMNAS.
  4. Peta KSP : Kebijakan Satu Peta (KSP) hanya orang-orang tertentu yang bisa mengakses (login) ke halaman ini. Menu ini akan diarahkan ke situs portalksp.ina-sdi.or.id.
Pilih menu Peta AOI, maka akan disajikan halaman berisi peta basemap Indonesia seperti berikut :
Halaman Unduh Peta AOI
Halaman Unduh Peta AOI
Dapat dilihat pada layer list, terdapat dua layer peta yang ditampilan/dioverlay dengan basemap Indonesia. yaitu layer Indek peta RBI skala 25.000 (yang berwarna hijau) dan layer Indek peta RBI skala 50.000 (yang berwarna transparan).
Di dalam halaman unduh ini terdapat berbagai fitur yang dapat membantu mencari atau mengenali informasi dari objek peta yang akan di unduh. Salah satunya untuk melihat informasi dari layer yang akan di unduh bisa di lihat dengan menekan tombol attribut table di layer kanan bawah, untuk jelasnya lihat gambar berikut :
Keterangan peta Indek
Keterangan peta Indek
Masih terdapat beberapa fitur lainnya yang sangat berguna untuk mencari atau membandingkan informasi peta yang akan di unduh, seperti menu add data (bisa menambahkan data dari ArcGIS Server atau data SHP, CSV, GPX, GeoJSON, dsb). Sedangkan untuk mengunduh data terdapat dua tombol unduh (unduh RBI skala 25.000 dan unduh RBI skala 50.000).
Menu donwload data RBI skala 50.000
Menu donwload data RBI skala 50.000
Di dalam menu unduh terdapat beberapa pilihan jenis peta yang bisa di unduh diantaranya : Hidrografi, Batas Wilayah, Hipsografi, Lingkungan Terbangun, Toponimi, dsb. Untuk contoh pada artikel ini akan kita unduh jenis peta Toponimi untuk daerah Kota Palu, Provinsi Sulawesi Tengah dan sekitarnya. Tekan pilihan layer Toponimi, akan muncul jendel baru seperti berikut :
Untuh Toponimi skala 50.000
Untuh Toponimi skala 50.000
Pada pilihan Area Of Interest terdapat beberapa objek (triangle, extent, circle, ellipse, polygon, freehand polygon) pilih salah satu dan buat AOI di wilayah yang akan di unduh. Pastikan tentukan feature format dan raster format, kemudian klik execute. Setelah itu pada tab output akan tersaji link unduh data untuk AOI seperti berikut :
Link Unduh
Link Unduh
Hasil dari data yang di unduh coba admin buka di aplikasi QuantumGIS, dan hasilnya seperti gambar berikut :
Data Toponimi skala 50.000 di QGIS
Data Toponimi skala 50.000 di QGIS
Selanjutnya akan di jelaskan bagaimana mengunduh data SHP per wilayah. Silahkan setelah proses unduh Peta AOI kita kembali ke halaman awal. Di dalam drop down menu download pilih menu Peta Per Wilayah, maka akan disajikan halaman seperti berikut :
Halaman unduh peta per wilayah
Halaman unduh peta per wilayah
Di dalam halaman ini lebih sederhana dari menu unduh peta AOI, di sini hanya di sediakan fitur zoom in zoom out dan menu pencarian untuk mencari lokasi yang akan di unduh. Sebagai contoh kita akan coba unduh wilayah Kabupaten Lombok Utara, Provinsi Nusa Tenggara Barat.
Unduh data wilayah Kab. Lombok Utara
Unduh data wilayah Kab. Lombok Utara
Cari lokasi yang akan di unduh pada menu pencarian atau bisa langsung di zoom ke peta jika sudah tahu lokasinya. Tunggu hingga objek basemap peta teroverlay oleh objek polygon. Jika sudah muncul objek polygon bisa langsung di klik kanan pada area yang akan di unduh, kemudian akan muncul popup seperti pada gambar di atas, klik simbol unduh di samping kanan bawah.
Hasil dari data yang di unduh coba admin buka di aplikasi QuantumGIS, dan hasilnya seperti gambar berikut :
SHP wilayah Kab. Lombok Utara
SHP wilayah Kab. Lombok Utara
Sekian artikel kali ini, semoga dapat menjawab dan membantu dalam perihal mencari dan mengunduh data SHP untuk seluruh wilayah Indonesia. Semoga Bermanfaat  . . .

Wassalamualaikum Wr.Wb

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 5

Assalamualaikum Wr.Wb 

Melanjutkan artikel tentang proses pembuatan WebGIS dengan Leaflet Javascript, pada artikel ini akan dijelaskan bagaimana cara mengaktifkan beberapa menu yang tersedia seperti info, legenda, dan download. Setiap isi menu akan ditampilakan dalam bentuk popup, pertama pastikan pada setiap tag "a href" di setiap menu tepat didalam tanda koma atas (") isi dengan tulisan #info (sesuaikan untuk masing masing menu, misal untuk menu download isi dengan #download). Isi pada menu info hanya berupa teks sambutan selamat datang dan/atau teks yang menjelaskan fungsi dari WebGIS itu sendiri. Copy script dan tulisan berikut dan simpan tepat di atas tag pembuka footer pada file index.php :
<!-- ISI MENU INFO-->
<div id="info">
            <div class="window1">
            <a href='#' class='close-button' title='Close'>Close</a>
            <h1>SELAMAT DATANG</h1>
<p>WebGIS (geographic information system) INFO-GEOSPASIAL, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi pembaca 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 para pembaca.</p><br>
<p>Hal tersebut mendorong admin untuk terus berusaha membagi ilmu serta pengetahun terkait Geospasial, khususnya Pembuatan WebGIS kepada para pembaca serta pengikut blog INFO-GEOSPASIAL.</p><br>
<p>Terimkasih saya ucapkan kepada para pembaca, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di blog INFO-GEOSPASIAL dapat bermanfaat, dan tidak lupa diharapkan adanya tanggapan berupa kritik maupun saran bilamana ada hal-hal yang dirasa salah atau kurang tepat terkait konten artikel yang di bagian.</p><br>
<center><strong>EGI SEPTIANA</strong></center>
     </div>
   </div>
 <!--  MENU INFO END -->
Selanjutkan agar isi dari menu tersebut dapat di tampilkan dalam bentuk popup, maka buat file popup-menu.css simpan di dalam folder css, kemudian isi file tersebut dengan script berikut :
/*STYLE MENU INFO*/
#info h1{
line-height:20px;
margin-top:30px;
padding: 0;
font-family: "Andale Mono", "Monotype.com", monospace;
}
#info p{
text-align: justify;
}
#info {
font-family: "Andale Mono", "Monotype.com", monospace;
}
#info {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
#info:target {
visibility: visible;
}

.window1 {
width: 60%;
height: 65%;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 8% auto;
}

.window1 table {font-style:italic;
}
/*STYLE MENU INFO END*/

/*STYLE CLOSE BUTTON*/
.close-button {
width: 70px;
height: 25px;
background: #333333;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: 10px;
right: 10px;
}
.close-button a:link{
              color: #fff;
              text-decoration: none;
}
.close-button a:visited{
                  color: #fff; 
                  text-decoration: none;
}
.close-button a:hover{
                color:#fff;
 }   
/*STYLE CLOSE BUTTON END*/
Agar semua fungsi di atas berjalan, jangan lupa tambahkan link untuk memanggil file css tersebut seperti berikut :
<link rel="stylesheet" href="css/popup-menu.css" />
menu info
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 > info-geospasial, 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=info-geospasial 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/info-geospasial/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 kesalahan.
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;
    background: #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*/
menu legenda
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
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/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial: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/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=application%2Fvnd.google-earth.kml%2Bxml">KML</a></td>
              </tr>
              </table>
           </div>
</div>
Hasil proses pembuatan menu DOWNLOAD
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 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/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://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>
<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> 
<!-- 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) INFO-GEOSPASIAL, dibuat dengan tujuan untuk berbagi ilmu mengenai proses pembuatan WebGIS. ini menjadi contoh nyata bagi pembaca 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 para pembaca.</p><br>
<p>Hal tersebut mendorong admin untuk terus berusaha membagi ilmu serta pengetahun terkait Geospasial, khususnya Pembuatan WebGIS kepada para pembaca serta pengikut blog INFO-GEOSPASIAL.</p><br>
<p>Terimkasih saya ucapkan kepada para pembaca, dan mudah-mudahan artikel-artikel tutorial yang di bagikan di blog INFO-GEOSPASIAL 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/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_adm&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial: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/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:bali_geologi&maxFeatures=50&outputFormat=SHAPE-ZIP">SHP</a></td>
              <td><a href="http://localhost:8080/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial: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://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>
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 admin 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 admin share dalam bentuk video beberapa WebGIS yang admin buat, dan mungkin bisa di tiru atau menjadi inspirasi dari segi design, fitur dan fungsinya sendiri.
Terimakasih, semoga bermanfaat . . .

Waalaikumsalam Wr.Wb