KONVERSI ARCVIEW PROJECT (.APR) KE ARCMAP PROJECT (.MXD)

Assalamualaikum WR.Wb

ArcView merupakan software GIS (geographic Information System), dengan software ini kita dapat menyimpan, memanipulasi, menganalisis dan menyajikan informasi geografis. Dikembangkan oleh ESRI (Environmental Systems Research Institute), produk ini merupakan produk yang sudah ada sejak lama dan masih banyak digunakan sampai sekarang. ESRI sendiri sudah mengeluarkan produk terbaru yang merupakan pengembangan dari ArcView yaitu  ArcGIS desktop, dimana ArcGIS Desktop merupakan software GIS professional yang komprehensif dan dikelompokkan atas lima komponen yaitu : 
  1. ArcMap Merupakan aplikasi utama yang digunakan untuk mengolah suatu data spasial atau non spasial, seperti membuat, menampilkan, memilih, mengedit, anlisis, serta berbagai fungsi lainnya.
  2. ArcCatalog Digunakan untuk menjelajah, mengatur, membagi, mendokumentasikan serta menyimpan data GIS. Aplikasi ini berguna dalam proses eksplorasi dan pengolahan data spasial.
  3. ArcScene Aplikasi yang digunakan untuk pengolahan data GIS serta menampilkannya ke dalam tampilan 3D.
  4. ArcGlobe Menampilkan peta secara 3D ke dalam bola dunia, serta dapat terkoneksi langsung dengan internet.
  5. ArcToolBox Berisi sekumpulan tools yang dapat digunakan untuk keperluan pemetaan serta analisis keruangan lainnya.
Karena banyaknya pembaruan serta penambahan fitur yang lebih lengkap di ArcGIS, banyak pengguna ArcView yang ingin beralih ke software ini, namun yang jadi pertanyaan bagaimana jika ingin melakukan pengolahan di ArcGIS namun dengan menggunakan project yang sudah pernah di buat di ArcView, perlu di ketahui projek di ArcView berektensi (.apr) sedangkan di ArcGIS khususnya ArcMap berektensi (.mxd).
Untuk mengatasi hal tersebut, ESRI selaku pengembang dari kedua perangkat lunak tersebut telah menyediakan fitur untuk mengkonversi Project dari ArcView ke ArcMap yang sudah tersedia di dalam ArcMap.
Project di ArcView
Project di ArcView
Gambar di atas adalah contoh peta yang dikerjakan di ArcView. Untuk membukan project peta tersebut ke dalam ArcMap caranya di dalam ArcMap masuk ke menu Customize > Customize Mode > Command, cari Import from ArcView Project. Kemudian tarik tool yang muncul ke dalam toolbar. Untuk lebih jelas lihat animasi berikut :
Menambahkan tool import ArcView Project
Menambahkan tool import ArcView Project
Di dalam tool tersebut, masukan project ArcView yang akan di Import.
Import ArcView 3.2 or 3.3 Project
Import ArcView 3.2 or 3.3 Project
Setelah melakukan proses import maka semua layer yang terdapat di dalam project ArcView tersebut akan muncul di dalam ArcMap.
Project di ArcMap
Project di ArcMap
Lakukan sedikit pengaturan(untuk layout) yang di import, karena layout tidak akan 100% sama seperti pada saat project di buat di ArcView. Simpan project tersebut, maka hasilnya akan memiliki ektensi (.mxd).
Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

DOWNLOAD PETA TUTUPAN LAHAN, LAHAN KRITIS DAN DAERAH ALIRAN SUNGAI (DAS) SELURUH INDONESIA

Assalamualaikum Wr.Wb

Penutupan Lahan atau Land Cover merupakan istilah yang digunakan untuk menyebutkan suatu kenampakan lahan secara fisik, baik kenampakan alami maupun kenampakan buatan manusia, Terkadang ada juga yang menyebutnya Land Us (Penggunaan Lahan). Tetapi kedua kata tersebut memiliki maksud yang berbeda.
Menurut Townshend dan Justice pada (1981) berpendapat bahwa penutupan lahan adalah perwujudan secara fisik (Visual) dari vegetasi, benda alam, dan unsur-unsur budaya yang ada di permukaan bumi tanpa memperhatikan kegiatan manusia terhadap obyek tersebut.
Sedangkan secara umum penggunaan lahan diartikan sebagai bentuk pemanfaatan atau fungsi dari perwujudan suatu bentuk penutupan lahan. Istilah penggunaan lahan didasari pada fungsi kenampakan penutupan lahan bagi kehidupan, baik itu kenampakan alami atau buatan manusia. 
Suatu kenampakan vegetasi rapat, dalam istilah penggunaan lahan dapat dibedakan menjadi hutan maupun perkebunan. Penyebutan tersebut tergantung pada perlakuan manusia terhadap penutup lahan. Berbagai bentuk mata pencaharian menghasilkan beragam penggunaan lahan. Selain mata pencaharian, faktor kebutuhan juga akan memunculkan bentuk penggunaan lahan. Seperti kebutuhan rumah memunculkan kawasan permukiman. Dari perbedaan pola penggunaan lahan juga akan memunculkan istilah pedesaan dan perkotaan karena pola penggunaan lahannya berbeda.
Jadi, jika pada penutupan lahan dikatakan “Tubuh Air” (Water Body), maka dalam penggunaan lahan dapat berarti sungai, danau, kolam, dan lain-lain.
Lahan Kritis dapat didefinisikan sebagai lahan yang telah mengalami kerusakan sehingga berkurang fungsinya sampai pada batas yang ditentukan atau diharapkan. Fungsi yang dimaksud pada definisi tersebut adalah fungsi produksi dan fungsi tata airnya. Fungsi produksi berkaitan dengan fungsi tanah sebagai sumber unsur hara bagi tumbuhan dan fungsi tata air berkaitan dengan fungsi tanah sebagai tempat tumbuhnya akar dan menyimpan air tanah. Adapun faktor–faktor yang menyebabkan terjadinya lahan kritis adalah :
  1. Terjadinya longsor dan letusan gunung berapi
  2. Penebangan liar (illegal logging)
  3. Kebakaran hutan
  4. Pemanfaatan sumber daya hutan yang tidak berasaskan kelestarian
  5. Penataan zonasi kawasan belum berjalan
  6. Pola pengelolaan lahan tidak konservatif
  7. Pengalihan status lahan.
Daerah Aliran Sungai disingkat DAS adalah suatu kawasan yang dibatasi oleh titik-titik tinggi di mana air yang berasal dari air hujan yang jatuh, terkumpul dalam kawasan tersebut. Guna dari DAS adalah menerima, menyimpan, dan mengalirkan air hujan yang jatuh di atasnya melalui sungai.
Air DAS adalah air yang mengalir pada suatu kawasan yang dibatasi oleh titik-titik tinggi di mana air tersebut berasal dari air hujan yang jatuh dan terkumpul dalam sistem tersebut.
Air pada DAS merupakan aliran air yang mengalami siklus hidrologi secara alamiah. Selama berlangsungnya daur hidrologi, yaitu perjalanan air dari permukaan laut ke atmosfer kemudian ke permukaan tanah dan kembali lagi ke laut yang tidak pernah berhenti tersebut, air tersebut akan tertahan (sementara) di sungai, danau/waduk, dan dalam tanah sehingga akan dimanfaatkan oleh manusia atau makhluk hidup.
Air hujan yang dapat mencapai permukaan tanah, sebagian akan masuk (terserap) ke dalam tanah (infiltrasi), sedangkan air yang tidak terserap ke dalam tanah akan tertampung sementara dalam cekungan-cekungan permukaan tanah untuk kemudian mengalir di atas permukaan tanah ke tempat yang lebih rendah, untuk selanjutnya masuk ke sungai. Air infiltrasi akan tertahan di dalam tanah oleh gaya kapiler yang selanjutnya akan membentuk kelembaban tanah. Apabila tingkat kelembaban air tanah telah cukup jenuh maka air hujan yang baru masuk ke dalam tanah akan bergerak secara lateral (horizontal) untuk selanjutnya pada tempat tertentu akan keluar lagi ke permukaan tanah yang kemudian akan mengalir ke sungai. Batas wilayah DAS diukur dengan cara menghubungkan titik-titik tertinggi di antara wilayah aliran sungai yang satu dengan yang lain.
Untuk mengkaji lebih dalam tentang penjelasan di atas, berikut akan dibagikan data Penutupan Lahan, Lahan Kritis, dan Daerah Aliran Sungai yang bisa di dapatkan dengan gratis. Data ini dibuat oleh Kementrian Kehutanan.  Berikut link unduhnya :
Hasilnya kurang lebih seperti berikut :
Peta Tutupan Lahan Jawa Barat
Peta Tutupan Lahan Jawa Barat
Gambar di atas adalah peta Tutupan Lahan, dan gambar di bawah ini merupakan data KML Tutupan Lahan yang dibuka di Google Earth :
Tutupan Lahan KML di Google Earth
Tutupan Lahan KML di Google Earth
Sekian artikel dengan judul Download Peta Tutupan Lahan, Lahan Kritis, dan Daerah Aliran Sungai Seluruh Indonesia, semoga  bermanfaat . . . .

Wassalamualaikum Wr.Wb

MENGENAL METODE KLASIFIKASI TIDAK TERBIMBING (Unsupervised) DAN TERBIMBING (Supervised) DI ENVI

Assalamualaikum Wr.Wb

Analisis Citra merupakan suatu kegiatan untuk melakukan penelitian terhadap suatu hasil pemotretan suatu objek keruangan dengan satelit untuk di tinjau dan di olah kembali agar menghasilkan suatu informasi yang di inginkan.
Sebagai contoh suatu citra landsat dapat dilakukan analisis untuk berbagai keperluan diataranya :
urban, vegetasi, agrikultur, termal, dll. Oleh karena itu diperlukan suatu metode yang tepat untuk melakukan setiap analisis tersebut agar menghasilkan informasi yang tepat sesuai dengan yang di inginkan.
Dalam artikel ini akan dijelaskan suatu metode tidak terbimbing (unsupervised) dan metode terbimbing (supervised). Hal ini dijelaskan karena pada artikel yang akan datang, blog INFO-GEOSPASIAL akan coba membuat artikel tentang analisis perubahan tutupan lahan dengan menggunakan kedua metode tersebut.
unsupervised & supervised

Metode Tidak Terbimbing (Unsupervised)
Sistem kerja metode tidak terbimbing adalah melakukan pengelompokan nilai-nilai pixel suatu citra oleh komputer kedalam kelas-kelas spektral dengan menggunakan algoritma klusterisasi. Dalam metode ini, diawal proses biasanya analis (orang yang melakukan analisis) akan menentukan jumlah kelas (cluster) yang akan dibuat. Kemudian setelah mendapatkan hasil, analis menetapkan kelas-kelas lahan terdapat kelas-kelas spektral yang telah dikelompokan oleh komputer. Dari kelas yang dihasilkan, analis bisa menggabungkan beberapa kelas yang dianggap memiliki informasi yang sama menjadi satu kelas. Misal class 1, class 2, dan class 3 masing-masing adalah sawah, perkebunan dan hutan maka bisa dikelompokkan menjadi satu kelas yaitu kelas vegetasi.
Metode tidak terbimbing terdiri dari dua jenis yaitu :
  1. IsoData  = Mengklasifikasikan kelas secara merata, setiap pixel diklasifikasikan ke kelas terdekat. Setiap interaksi akan dikalkulasi ulang dan mereklasifikasi pixel ke bentuk baru. Memisah kelas, menggabungkan dan menghapus dilakukan berdasarkan parameter input. Semua pixel diklasifikasikan ke kelas terdekat kecuali deviasi standar atau ambang batas jarak yang telah ditentukan, dalam hal ini beberapa pixel mungkin tidak diklasifikasikan jika tidak memenuhi kriteria yang ditentukan. Proses ini berlanjut sampai jumlah pixel dalam setiap perubahan kelas kurang dari ambang perubahan pixel yang dipilih atau jumlah maksimum interasi tercapai.
  2. K-Means = Hampir sama dengan metode IsoData, bedanya dengan menggunakan metode ini analis mengharuskan untuk memilih jumlah kelas yang berlokasi di data, kemudian sistem akan mengelompokkan data ke dalam kelas kelompok yang telah ditentukan. Pada setiap kelas akan terdapat titik tengah (centroid) yang mempresentasikan kelas tersebut.
Cara kerja Metode Unsupervised
Cara kerja Metode Unsupervised

Metode Terbimbing (Supervised)
Pada sistem kerja metode terbimbing (Supervised), analis terlebih dahulu diharuskan menetapkan beberapa training area (daerah contoh) pada citra sebagai kelas lahan tertentu. Penetapan ini berdasarkan pengetahuan analis terhadap wilayah dalam citra mengenai daerah-daerah penelitian. NIlai-nilai pixel dalam daerah contoh tersebut kemudian digunakan oleh komputer sebagai kunci untuk mengenai pixel yang lain. Dearah yang memiliki nilai pixel sejenis akan dimasukan kedalam kelas lahan yang telah ditetapkan sebelumnya. Jadi dalam metode ini analis mengidentifikasi kelas informasi terlebih dulu yang kemudian akan digunakan untuk menentukan kelas spectral yang mewakili kelas informasi tersebut.
Metode terbimbing terdiri dari beberapa jenis yaitu :
  1. Parallelepiped = Kelasifikasi dengan mengunakan aturan keputusan sederhana untuk mengklasifikasikan data multispektral. Batas-batas keputusan merupakan dimensi dalam ruang data gambar. Dimensi ini ditentukan berdasarkan batas diviasi standar dari rata-rata setiap kelas yang dipilih.
  2. Minimum Distance = Teknik jarak ninimum menggunakan vektor rata-rata dan menghitung jarak dari setiap pixel yang diketahui oleh vektor rata-rata untuk masing-masing kelas. Beberapa pixel memiliki kemungkinan tidak terklasifikasi jika tidak memenuhi kriteria yang dipilih.
  3. Maximum Likehood = Mengasumsikan bahwa statistik untuk setiap kelas di masing-masing band yang terdistribusi secara normal dan menghitung probabilitas bahwa setiap pixel yang diberikan milik kelas tertentu. Kecuali jika analis memilih ambang probabilitas, semua pixel diklasifikasikan. Setiap pixel ditugaskan untuk kelas yang memiliki probabilitas tertinggi. Jika probabiitas tertinggi lebih kecil dari ambang batas yang ditentukan maka pixel tidak akan diklasifikasi.
  4. Mahalanobis Distance = Jarak arah pengklasifikasi sensitif yang menggunakan statisktik untuk masing-masing kelas. Mirip dengan metode Minimum Likehood tetapi mengasumsikan semua coveriences kelas yang sama dan kerena itu metode ini bekerja lebih cepat. Semua pixel diklasifikasikan ke kelas ROI terdekat kecuali analis menentukan ambang batas jarak.
  5. Spectral Angel Mapper = Klasifikasi spectral berbasis fisik yang mengunakan sudut n-D untuk mencocokkan pixel untuk spektru referensi. Algoritma menentukan kesamaan spectral antara dua spektrum dengan mengitung sudut antara spektrum dan memperlakukannya sebagai vektor dalam ruang dimensi yang sama dengan jumlah band. Teknik ini bila digunakan pada data reflektansi dikalibrasi, relatif tidak sensitif terhadap pencahayaan. Endmember spektur yang digunakan dapat berasal dari file ASCII atau perpustakaan spektral. Atau analis dapat mengambil langsung dari gambar (seperti ROI). Metode ini membandingkan sudut antara vektor spektrum endmember dan setiap vektor pixel di n-D. Sudut kecil merupakan perbandingan lebih dekat dengan spektur referensi. Pixel lebih jauh dari batas sudut maksimum yang ditentukan dalam radian tidak diklasifikasikan. Klasifikasi ini mengasumsikan data refletansi, namun jika analis menggunakan data cahaya, kesalahan umumnya tidak signifikan karena data asal masih mendekati nol.
  6. Spektral Informasi Divergence = Metode klasifikasi spektral yang menggunakan ukuran divergensi untuk mencocokkan pixel untuk spektrum referensi. Semakin kecil perbedaan itu, semakin besar kemungkinan pixel serupa. Pixel dengan ukuran yang lebih besar dari ambang batas perbedaan maksimum yang ditentukan tidak diklasifikasikan. Endmember spektrum yang digunakan oleh metode ini bisa berasal dari file ASCII atau perpustakaan spektral, atau analis dapat mengambil langsung dari gambar (seperti ROI).
  7. Binary Encoding = Klasifikasi pengkodean biner dengan cara mengkodekan data dan spektru m endmember ke nol dan satu, berdasarkan apakan sebuah band jatuh di bawah atau di atas spektrum mean, masing-masing fungsi eksklusif OR membandingkan masing-masing spektrum referensi dikodekan dengan spektrum data dikodekan dan menghasilkan gambar klasifikasi. Semua piksel diklasifikasikan ke endmember dengan jumlah terbesar dari band yang cocok, kecuali jika analis menentukan minimum match threshold, dalam hal ini beberapa piksel mungkin tidak diklasifikasikan jika tidak memenuhi kriteria.
Cara kerja metode Supervised
Cara Kerja Metode Supervised
Dari penjelasan di atas dapat disimpulkan bahwa "Pada metode tidak terbimbing sistem mengklasifikasikan, baru kemudian analis menentukan informasi dari setiap kelas, sedangkan pada metode terbimbing analis membuat terlebih dahulu training area (daerah contoh) baru kemudian sistem mengklasifikasikan berdasarkan training area tersebut."
Sekian artikel tentang penjelasan dari metode tidak terbimbing dan metode terbimbing. Artikel ini merupakan artikel pengenalan sebelum masuk ke artikel utama yaitu "Analisis Perubahan Tutupan Lahan dengan menggunakan Citra Landat 8 di Envi".
Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

PAN-SHARPENING LANDSAT 8 DENGAN ENVI

Assalamualaikum Wr.Wb

Pan Sharpening merupakan metode fusi citra data panchromatic yang beresolusi tinggi dengan data multispectral resolusi rendah untuk membuat dataset resolusi tinggi berwarna. Diketahui citra landsat 8 terdiri dari 11 band/kanal, yang masing-masing memiliki kegunaan tersendiri. Band 1-7 dan 9 memiliki resolusi spatial 30 meter, band 8 = 15 meter (Panchromatic), band 10-11 = 100 meter (termal).
Di dalam envi terdapat beberapa metode untuk melakukan pan-sharpening, diantaranya :
  • Hue, Saturation, Value (HSV)
  • Color Normalized (Brovey)
  • Gram-Schmidt
  • Principal Components
  • Color Normalized algorithm
Setiap metode yang digunakan memerlukan syarat tertentu. Dalam artikel ini akan dijelaskan proses pan-sharpening dengan menggunakan metode Brovey. Panggil band 4,3,2 dan 8 ke dalam Envi. (4,3,2 adalah kombinasi band untuk menghasilkna warna natural & 8 adalah band panchromatic).
Dalam penggunaan metode ini, band tidak boleh dalam keadaan sudah di stacking. Jadi proses stacking dan pan-sharpening akan dilakukan dalam satu proses yang sama. Kombinasi band yang dapat di lakukan untuk landsat 8 dapat di lihat di link berikut :
Setelah ke empat band (4,3,2 dan 8) berhasil dipanggil, selanjutnya masuk ke menu Transform > Image Sharpening > Color Normalized (Brovey). Pilih kombinasi RGB untuk menghasilkan warna natural (4,3,2).
Select RGB input Bands
Select RGB input Bands
Klik ok, kemudian pilih Band resolusi tinggi yaitu band 8 (panchromatic).
Select Bands Panchromatic
Select Bands Panchromatic
Pada jendela baru yang muncul, pilih metode resampling yang akan digunakan. Dalam contoh ini digunakan metode resamping Nearest Neighbor, kemudian tentukan tempat penyimpanan hasil akhirnya dan beri nama.
CN Brovey Sharpening Parameters
CN Brovey Sharpening Parameters
Setelah berhasil, coba bandingan hasil proses pan-sharpening tersebut dengan kombinasi RGB (stacking biasa) band 4,3, dan 2.
kiri hasil pan-sharpenging (4,3,2 dan 8) dan kanan hasil stacking biasa (4,3, dan 2)
kiri hasil pan-sharpenging (4,3,2 dan 8) dan kanan hasil stacking biasa (4,3, dan 2)
Terlihat perbedaan dari kedua gambar di atas, dan dari ukuran dimensi pun terlihat berbeda. Untuk gambar hasil pan-sharpening memiliki dimensi 15161 x 15481 (pixel) karena dimensi band 4,3, dan 2 yang semula berukuran 7581 x 7741 (pixel) berubah mengikuti dimensi yang dimiliki band 8.
Sedangkan untuk gambar hasil stacking biasa memiliki dimensi yang sama seperti band pembentuknya yaitu 7581 x 7741 (pixel).
Proses stacking citra landsat 8 sendiri sudah pernah di jelaskan di artikel berikut :
Untuk proses pan-sharpening dengan menggunakan metode yang lain, memiliki syarat tertentu seperti ada metode yang mengharuskan band yang memiliki resolusi rendah sudah dalam keadaan multispectral (sudah di stacking). Proses pan-sharpening dengan metode lainnya akan di jelaskan di artikel yang lain. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 3

Assalamualaikum Wr.Wb

Melanjutkan tutorial pembuatan WebGIS dengan Leaflet JavaScript, artikel ini merupakan part ke 3 (tiga). Pada tutorial sebelumnya vektor SHP (daerah provinsi bali) berhasil di tampilkan ke dalam WebGIS. Selanjutnya pada tutorial ini kita akan coba menambahkan satu vektor lagi ke dalamnya. Sebelum membaca artikel ini lebih lanjut, pastikan sudah membaca artikel yang berisikan tutorial part 1 dan 2 berikut :
Vektor SHP yang akan ditambahkan bisa di unduh di link berikut :
Pertama jalankan Quantum GIS dan PostgreSQL kemudian import data SHP ke dalam database yang sebelumnya telah di buat di PostgreSQL, caranya sudah pernah dibahas di artikel berikut :
Setelah berhasil di import, jalankan GeoServer kemudian login melalui browser, masuk ke menu Layers > add new a resource, pilih nama workspace yang terhubung ke database di PostgreSQL. Maka akan muncul daftar layer yang berada pada database tersebut (termasuk layer geologi yang baru saja di tambahkan), publish pada layer geologi. Selanjutnya tampilkan layer geologi tersebut ke dalam tampilan GeoJSON, copy link address pada halaman GeoJSON tersebut lalu buat file request_geologi.php untuk membuat perintah memanggil objek GeoJSON tersebut ke dalam Web GIS. Isi dari file request_geologi tersebut dengan script berikut :
<?php
$url=file_get_contents("http://localhost:3615/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:geologi&outputFormat=application%2Fjson");  
 # url yang ada di dalam ("") itu link address dari halaman GeoJSON.. jangan lupa hapus bagian &maxFeatures=50
echo($url);
?>
Simpan file tersebut di folder layer (sama dengan tempat menyimpan file request_bali yang pernah di buat pada tutorial sebelumnya). 
Tepat di bawah script untuk memanggil objek bali administrasi pada file index.php, tambahkan juga script untuk memanggil objek bali geologi, berikut script nya :
var layer_GEOLOGI = new L.GeoJSON.AJAX("layer/request_geologi.php",{ // layer geologi berada di dalam variabel layer_geologi
    style: function(feature){
      var fillColor, // ini style yang akan digunakan
            kode = feature.properties.kode; // perwarnaan objek polygon berdasarkan field kode  di dalam file geojson
             if ( kode > 17 ) fillColor = "#ffd700";
        else if ( kode > 16 ) fillColor = "#E3912B";
        else if ( kode > 15 ) fillColor = "#ED6933";
        else if ( kode > 14 ) fillColor = "#0070FF";
        else if ( kode > 13 ) fillColor = "#F5731C";
        else if ( kode > 12 ) fillColor = "#BFD9FF";
        else if ( kode > 11 ) fillColor = "#8C140D";
        else if ( kode > 10 ) fillColor = "#FFC400";
        else if ( kode > 9 ) fillColor = "#FF5500";
        else if ( kode > 8 ) fillColor = "#F79400";
        else if ( kode > 7 ) fillColor = "#FFBEBE";
        else if ( kode > 6 ) fillColor = "#97DBF2";
        else if ( kode > 5 ) fillColor = "#FF4766";
        else if ( kode > 4 ) fillColor = "#F27066";
        else if ( kode > 3 ) fillColor = "#732400";
        else if ( kode > 2 ) fillColor = "#A83800";
        else if ( kode > 1 ) fillColor = "#E64200";
        else fillColor = "#FFFFED";  // no data
        return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
      },
      onEachFeature: function(feature, 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(map);
Setelah menyisipkan script pemanggil objek geologi maka objek geologi tersebut sudah dapat di lihat di tampilan Web GIS, namun tampilannya masih tumpang tindih dengan layer administrasi, oleh karena itu buat tool untuk memilih layer yang akan ditampilkan sehingga setiap layer tidak akan tumpang tindih. Caranya unduh terlebih dahulu plugin berikut :
Ekstrak dan simpan di folder leaflet, kemudian tambahkan link untuk memanggil css dan js dari plugin tersebut ke dalam file index.php, berikut link nya :
<link rel="stylesheet" href="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css"/>
<script src="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js"></script>
Simpan link tersebut di dalam tag head. Selanjutnya buat sebuah variable untuk menyimpan layer administrasi dan geologi agar menjadi sebuah group. Sebelumnya hapus terlebih dahulu variabel yang menyimpan pilihan basemap beserta script untuk memanggil tools basemapnya, berikut script yang di hapus :
// PILIHAN BASEMAP YANG AKAN DITAMPILKAN
var baseLayers = {  
  'Esri.WorldTopoMap': L.tileLayer.provider('Esri.WorldTopoMap').addTo(map),
  'Esri WorldImagery': L.tileLayer.provider('Esri.WorldImagery')
};

// MENAMPILKAN TOOLS UNTUK MEMILIH BASEMAP
L.control.layers(baseLayers,{}).addTo(map);
Untuk mengganti script yang di hapus tersebut maka tambahkan script berikut, dan simpan di bagian paling bawah dari file index (tepat di atas tag penutup script) :
// 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);
Setelah melakukan tahapan di atas seharusnya layer geologi sudah dapat tampil di halaman Web GIS dengan adanya tool pilihan layer yang akan di tampilkan yang dapat di temui di dalam tool basemap seperti gambar berikut :
Layer Geologi Provinsi Bali
Layer Geologi Provinsi Bali
Tahap terakhir adalah mengaktifkan tool pencarian untuk kedua objek layer tersebut (administrasi dan geologi), karena pada tutorial sebelumnya pada layer administrasi untuk nama yang dapat di search oleh tool pencarian merupakan isian di dalam field kab_kot, sedangkan pada layer geologi untuk isian nama dari setiap objek disimpan di dalam field nama, maka field kab_kot pada layer administrasi harus di ganti dengan nama 'nama' agar berisifat universal (bisa berisi keterangan apa saja tidak terikat oleh kabupaten/kota saja). Caranya jalankan aplikasi QuantumGIS, panggil layer bali yang ada di dalam database pada PostgreSQL.
memanggil layer di dalam database PostgreSQL
Memanggil layer di dalam database PostgreSQL
Setelah layer bali berhasil ditampilkan, masuk ke dalam atribut tabel layer tersebut, aktifkan editing kemudian buat field baru dengan isian seperti gambar berikut :
Membuat field baru
Membuat field baru
Field baru berhasil dibuat, masuk ke field calculator. Update field nama berdasarkan isian pada field kab_kot.
Update field
Update field
Field nama akan otomatis terisi dengan isian yang sama pada field kab_kot. Sekarang hapus field kab_kot karena sudah tidak dibutuhkan lagi. Simpan.
Sekarang buka kembali file index.php, pada script pemanggil objek bali administrasi, ganti tulisan kab_kot dengan tulisan nama (tepatnya ada di bagian untuk menampilkan popup).
Kemudian hapus script untuk menampilkan tool pencarian. Berikut script yang di hapus :
// MENAMBAHKAN TOOL PENCARIAN
var searchControl = new L.Control.Search({
    layer: layer_ADMINISTRASI, // ISI DENGAN ANAM VARIABEL LAYER
    propertyName: 'kab_kot', // isi dengan nama field dari file geojson bali yang akan dijadikan acuan ketiak melakukan pencarian
    HidecircleLocation: false,
    moveToLocation: function(latlng, title, map) {
      //map.fitBounds( latlng.layer.getBounds() );
      var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
  });

  searchControl.on('search:locationfound', function(e) {
    
    e.layer.setStyle({});
    if(e.layer._popup)
      e.layer.openPopup();

  }).on('search:collapsed', function(e) {

    featuresLayer.eachLayer(function(layer) {
      featuresLayer.resetStyle(layer);
    }); 
  });
  
  map.addControl( searchControl );  //menambahakn tool pencarian ke tampilan map
Ganti script yang di hapus tersebut, dengan script 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);
Simpan dan coba jalankan kembali Web GIS, maka hasilnya akan seperti animasi GIF berikut :
Web GIS Info-Geospasial
Web GIS Info-Geospasial
Jika tiba-tiba objek vektor tidak tampil setelah dilakukan perubahan, coba hapus data penjelajahan di browser yang digunakan. Atau jika masih tidak tampil juga, coba masuk ke GeoServer kemudian publish ulang pada layer yang tidak muncul di Web GIS.
Gabungan dari semua script penyusun Web GIS yang dibuat dari tutorial part 1 sampai part 3 ini adalah sebagai berikut :
<!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" /> <!-- memanggil css di folder leaflet -->
<link rel="stylesheet" href="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css"/>
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
<link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css"/>
<link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" />
<script src="leaflet/leaflet.js"></script> <!-- memanggil leaflet.js di folder leaflet -->
<script src="js/jquery-3.1.0.min.js"></script> <!-- memanggil jquery di folder js -->
<script src="leaflet/leaflet-ajax/dist/leaflet.ajax.js"></script>
<script src="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js"></script>
<script src="leaflet/leaflet-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js-->
<script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
<script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
</head>
<body>
<div id="map"> <!-- ini id="map" bisa di ganti dengan nama yang di inginkan -->
<script>
// MENGATUR TITIK KOORDINAT TITIK TENGAN & LEVEL ZOOM PADA BASEMAP
var map = L.map('map').setView([-8.4521135,115.0599022], 10);

// MENAMPILKAN SKALA
L.control.scale({imperial: false}).addTo(map);
// ------------------- VECTOR ----------------------------
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; // perwarnaan 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 filed kab_kot
      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_GEOLOGI = new L.GeoJSON.AJAX("layer/request_geologi.php",{ // layer geologi berada di dalam variabel layer_geologi
    style: function(feature){
      var fillColor, // ini style yang akan digunakan
            kode = feature.properties.kode; // perwarnaan objek polygon berdasarkan field kode  di dalam file geojson
             if ( kode > 17 ) fillColor = "#ffd700";
        else if ( kode > 16 ) fillColor = "#E3912B";
        else if ( kode > 15 ) fillColor = "#ED6933";
        else if ( kode > 14 ) fillColor = "#0070FF";
        else if ( kode > 13 ) fillColor = "#F5731C";
        else if ( kode > 12 ) fillColor = "#BFD9FF";
        else if ( kode > 11 ) fillColor = "#8C140D";
        else if ( kode > 10 ) fillColor = "#FFC400";
        else if ( kode > 9 ) fillColor = "#FF5500";
        else if ( kode > 8 ) fillColor = "#F79400";
        else if ( kode > 7 ) fillColor = "#FFBEBE";
        else if ( kode > 6 ) fillColor = "#97DBF2";
        else if ( kode > 5 ) fillColor = "#FF4766";
        else if ( kode > 4 ) fillColor = "#F27066";
        else if ( kode > 3 ) fillColor = "#732400";
        else if ( kode > 2 ) fillColor = "#A83800";
        else if ( kode > 1 ) fillColor = "#E64200";
        else fillColor = "#FFFFED";  // no data
        return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
      },
      onEachFeature: function(feature, 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(map);
// 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);

  // 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> 
</body>
</html>
</body>
</html>
Demikian tutorial pembuatan WebGIS dengan Leaflet Javascript Part 3. Pada part selanjutnya yang akan datang, akan ditambahakn beberapa fitur baru pada Web GIS tersebut dan admin akan coba mengatur design web GIS agar lebih menarik. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb