PEMBUATAN PETA KESESUAIAN PERMUKIMAN BERBASIS GEOLOGI DI ARCGIS

Assalamualaikum Wr.Wb


Pertambahan penduduk mengakibatkan permintaan akan tempat tinggal sangat tinggi. Permintaan tempat tinggal (permukiman) di berbagai daerah khususnya perkotaan tergolong banyak karena terus meningkatnya jumlah penduduk dari tahun ke tahun dan diiringi oleh terus meningkatnya sarana dan fasilitas transportasi. Pemilihan tempat tinggal (permukiman) yang tepat mempunyai arti penting dalam aspek keruangan, karena ini akan menentukan keawetan bangunan, nilai ekonomis dan dampak permukiman terhadap lingkungan di sekitarnya (Sutikno,1982). Dalam penentuan lokasi permukiman perlu adanya evaluasi medan, guna mengetahui apakah parameter-parameter untuk lokasi permukiman yang aman dan layak digunakan bagi suatu lahan.
Dalam menentukan suatu lahan untuk permukiman, masyarakat pada umumnya karena keterbatasan ilmu pengetahuan sering tidak mempertimbangkan parameter-parameter fisik dasar yang mempengaruhi kelayakan untuk permukiman dalam jangka panjang. Parameter-parameter yang berpengaruh dalam jangka panjang untuk permukiman diantaranya adalah parameter geologi, seperti kondisi morfologi, jenis tanah, hidrogeologi, litologi, kawasan rawan gerakan tanah dan kawasan rawan gempabumi.
Karena semua parameter-parameter geologi tersebut sangat berpengaruh terhadap kelayakan permukiman sebagai tempat hunian yang nyaman, aman dan sehat dalam jangka panjang bagi kelangsungan hidup para penghuninya.
Atas dasar alasan di atas maka di sini blog INFO-GEOSPASIAL akan coba membuat peta tingkat kesesuaian lahan untuk permukiman berbasis geologi, dengan maksud dan tujuan yaitu sebagai berikut : 
  1. Untuk mendapatkan informasi kondisi umum daerah penyelidikan yang mencakup tataguna lahan dan geologi  
  2. Untuk mendeskripsikan kondisi geologi daerah penyelidikan dan mendapatkan nilai tingkat kesesuaian lahan untuk lokasi permukiman dengan melakukan klasifikasi / penggolongan dengan memberikan skor dan bobot berdasarkan faktor pendukung dan pembatas untuk permukiman.
  3. Untuk mengetahui penyebaran tingkat kesesuaian lahan untuk permukiman berbasis geologi di daerah penyelidikan.
Adapun lokasi yang menjadi penelitian pada tulisan ini adalah Kecamatan Ciamis yang masuk ke dalam wilayah administrasi Kabupaten Ciamis, Provinsi Jawa Barat, Indonesia. Secara geografis berada pada 7°21’35” LS - 7°17’37” LS dan 108°17’24” BT - 108°22’50” BT. Dengan Luas wilayah ± 3385 Ha.
Proses pembuatan peta akan menggunakan metode analisis deskriptif kuantitatif yang mana proses pengerjaannya yaitu dengan cara menguraikan dan memberikan gambaran mengenai parameter-parameter objek penyelidikan serta memberikan harkat (skor) pada setiap parameter dan memberikan bobot penimbangan pada masing-masing parameter yang besarnya sesuai dengan pengaruhnya terhadap kesesuaian lahan untuk permukiman.
Parameter yang digunakan dalam metode ini terdiri dari parameter-parameter yang memiliki subkelas sehingga masing-masing memiliki pengaruh dalam analisis tumpang tindih (overlay) dalam tahapan penyusunan peta tingkat kesesuaian lahan untuk permukiman berbasis geologi. Terdapat 5 parameter yang akan digunakan yaitu :
  1. Peta Morfologi
  2. Peta Morfologi Kecamatan Ciamis
    Peta Morfologi Kecamatan Ciamis
    Peta morfologi dibuat dari hasil pengamatan morfologi yang dilakukan dengan mengelompokan daerah penyelidikan berdasarkan kemiringan lereng, yaitu dengan mengelompokan garis kontur yang berpola relatif sama pada peta topografi, kemudian ditarik garis tegak lurus kontur dan dihitung kemiringan lerengnya dengan menggunakan persamaan sebagai berikut :
     Rumus Hitung Kemiringan Lereng
    Keterangan :
    S  =  kemiringan lereng (%)
    n  =  jumlah kontur yang terpotong
    Ic =  interval kontur (meter)
    d  =  jarak sebenarnya (meter)
    Berdasarkan besarnya kemiringan lereng pada suatu daerah, maka kemiringan lereng diklasifikasikan oleh para ahli, salah satunya klasifikasi Kemiringan Lereng menurut Van Zuidam, 1983. yaitu sebagai berikut :
    Tabel Klasifikasi Kemiringan Lereng (Van Zuidam, 1983)
    Klasifikasi Kemiringan Lereng (Van Zuidam, 1983)
    Dari hasil pengamatan di lapangan dan interpretasi peta topografi dari kerapatan gari kontur dan ketinggian, maka klasifikasi kemiringan lereng di daerah penyelidikan dibagi menjadi 4 kelas satuan morfologi seperti yang tergambar pada peta di atas.
    Pemberian skor dan bobot pada parameter Morfologi digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter morfologi di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Morfologi di daerah penyelidikan. 
  3. Peta Jenis Tanah
  4. Peta Jenis Tanah Kecamatan Ciamis
    Peta Jenis Tanah Kecamatan Ciamis
    Peta Jenis Tanah dibuat berdasarkan hasil interpolasi dari data survey lapangan terhadap jenis tanah yang ditemukan di setiap Kelurahan dan Desa di daerah penyelidikan, maka jenis tanah di daerah penyelidikan dibagi menjadi 5 jenis tanah yang diukur berdasarkan tingkat kekuatan tanah geologi teknik, jenis tanah dari paling kuat sampai kurang kuat untuk pondasi bangunan di daerah penyelidikan terdiri dari pasir kerikilan, pasir, pasir lempung kerakalan, pasir lempungan dan lempung pasiran. 
    Pemberian skor dan bobot pada parameter Jenis Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Jenis Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Jenis Tanah di daerah penyelidikan.
  5. Peta Air Tanah
  6. Peta Air Tanah Kecamatan Ciamis
    Peta Air Tanah Kecamatan Ciamis
    Ketersediaan Air Tanah pada suatu lahan merupakan hal yang sangat penting, mengingat fungsi Air Tanah sebagai sumber pasokan air bersih untuk berbagai kebutuhan, terutama di saat kemarau panjang dimana air permukaan tidak mencukupi. Bertolak dari hal tersebut, maka analisis kesesuaian lahan untuk permukiman berbasis geologi ini dilakukan dengan maksud untuk mengetahui kemampuan lahan dalam menunjang ketersediaan Air Tanah.
    Berdasarkan hasil interpolasi dari data survei lapangan terhadap sumur-sumur gali penduduk di setiap kelurahan dan desa di daerah penyelidikan, maka daerah penyelidikan di klasifikasikan menjadi 3 tingkat kedalaman dalam mendapatkan air tanah bebas, yaitu daerah air tanah dangkal dengan kedalaman permukaan air tanah 0,5 – 4,466 m, daerah air tanah sedang dengan kedalaman permukaan air tanah 4,5 – 8,466 m dan daerah air tanah dalam dengan kedalaman permukaan air tanah 8,5 – 12,4 m dari permukaan tanah setempat.
    Pambagian tingkat klasifikasi kedalaman air tanah ini ditinjau dari aspek penekanan biaya untuk penggalian atau pemboran air tanahnya, maka berdasarkan hal tersebut, air tanah dangkal dengan kedalaman permukaan air tanah 0,5 – 4,466 m dapat lebih menekan pengeluaran biaya, dari pada air tanah sedang dengan kedalaman permukaan air tanah 4,5 – 8,466 m dan air tanah dalam dengan kedalaman permukaan air tanah 8,5 – 12,4 m.
    Pemberian skor dan bobot pada parameter Air Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Air Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Air Tanah di daerah penyelidikan.
  7. Peta Geologi
  8. Peta Geologi Kecamatan Ciamis
    Peta Geologi Kecamatan Ciamis
    Berdasarkan sebagian Peta Geologi lembar Tasikmalaya 1308-4 (T. Budhitrisna, 1986), litologi daerah penyelidikan disusun oleh batuan Quarter dengan sebaran ± 100% (± 3385 ha) yang memanjang dari barat laut sampai tenggara. Batuan Quarter di daerah penyelidikan terdiri dari 2 formasi batuan dengan urutan stratigrafinya dari muda ke tua yaitu sebagai berikut :
    Stratigrafi daerah penyelidikan di Kabupaten Ciamis
    Stratigrafi daerah penyelidikan di Kabupaten Ciamis
    Pemberian skor dan bobot pada parameter Geologi digambarkan pada gambar tabel berikut :
      Pemberian skor dan bobot pada parameter Geologi di daerah penyelidikan.
      Pemberian skor dan bobot pada parameter Geologi di daerah penyelidikan.
  9. Peta Rawan Gerakan Tanah
  10. Peta Rawan Gerakan Tanah Kecamatan Ciamis
    Peta Rawan Gerakan Tanah Kecamatan Ciamis
    Berdasarkan Peta Kawasan Rawan Gerakan Tanah Kecamatan Ciamis (Pusat Vulkanologi Dan Mitigasi Bencana Geologi, Kementerian Energi Dan Sumber Daya Mineral), Kecamatan Ciamis memiliki tingkat kerentanan gerakan tanah tinggi, menengah, rendah sampai sangat rendah.
    - Zona Kerentanan Gerakan Tanah Sangat Rendah : Daerah yang mempunyai tingkat kerentanan sangat rendah untuk terkena gerakan tanah. Pada zona ini jarang atau hampir tidak pernah terjadi gerakan tanah, baik gerakan tanah lama maupun gerakan tanah baru, kecuali pada daerah tidak luas pada tebing sungai. Merupakan daerah datar sampai landai dengan kemiringan lereng lebih kecil dari 15% dan lereng tidak dibentuk oleh endapan gerakan tanah, bahan timbunan atau lempung yang bersifat plastis atau mengembang. Luas zona kerentanan gerakan tanah sangat rendah ini menempati ± 63,42% (± 2147 ha) dari keseluruhan luas daerah penyelidikan. 
    - Zona Kerentanan Gerakan Tanah Rendah Daerah : Daerah yang mempunyai tingkat kerentanan rendah untuk terkena gerakan tanah. Umumnya pada zona ini jarang terjadi gerakan tanah jika tidak mengalami gangguan pada lereng, dan jika terdapat gerakan tanah lama, lereng telah mantap kembali. Gerakan tanah berdimensi kecil mungkin dapat terjadi, terutama pada tebing lembah (alur) sungai. Kisaran kemiringan lereng mulai dari landai ( 5 - 15%) sampai sangat terjal (50 - 70%), tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pembentuk lereng. Pada lereng terjal umumnya dibentuk oleh tanah pelapukan yang tipis dan vegetasi penutup baik, umumnya berupa hutan atau perkebunan. Luas zona kerentanan gerakan tanah rendah ini menempati ± 17,96% (± 608 ha) dari keseluruhan luas daerah penyelidikan.
    - Zona Kerentanan Gerakan Tanah Menengah : Daerah yang mempunyai tingkat kerentanan menengah untuk terkena gerakan tanah. Pada zona ini dapat terjadi gerakan tanah terutama pada daerah yang berbatasan dengan lembah sungai, gawir, tebing jalan atau jika lereng mengalami gangguan. Gerakan tanah lama dapat aktif kembali akibat curah hujan yang tinggi dan erosi kuat. Kisaran kemiringan lereng mulai dari landai (5 - 15%) sampai curam hingga hampir tegak (>70%), tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pelapukan pembentuk lereng. Kondisi vegetasi penutup umumnya kurang sampai sangat jarang. Luas zona kerentanan gerakan tanah menengah ini menempati ± 15,45% (± 523 ha) dari keseluruhan luas daerah penyelidikan.
    - Zona Kerentanan Gerakan Tanah Tinggi : Daerah yang mempunyai tingkat kerentanan tinggi untuk terkena gerakan tanah. Pada zona sering terjadi gerakan tanah, sedangkan gerakan tanah lama dan gerakan tanah baru masih aktif bergerak, akibat curah hujan yang tinggi dan erosi yang kuat. Kisaran kemiringan lereng mulai dari agak terjal (30 ~ 50%) hingga hampir tegak (> 70%) tergantung pada kondisi sifat fisik dan keteknikan batuan dan tanah pelapukan pembentuk lereng. Kondisi vegetasi penutup umumnya sangat kurang. Luas zona kerentanan gerakan tanah tinggi ini menempati ± 3,13% (± 106 ha) dari keseluruhan luas daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah digambarkan pada gambar tabel berikut :
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah di daerah penyelidikan.
    Pemberian skor dan bobot pada parameter Rawan Gerakan Tanah di daerah penyelidikan.

Setelah mengetahui parameter yang akan di gunakan, selanjutnya melakukan proses overlay peta dengan menggunakan aplikasi ArcMap (ArcGIS) untuk menghasilkan peta kesesuaian pemukiman berbasis Geologi.
Buka semua layer peta (SHP) yang dijadikan parameter ke dalam ArcMap. Pastikan semua layer sudah memiliki field (keterangan, skor, dan bobot) dimana field keterangan di isi dengan nama dari setiap subkelas parameter dan field skor di isi dengan skor yang sudah ditentukan seperti pada keterangan di atas. Kosongkan pada bagian field bobot (akan di isi setelah proses overlay).
Pastikan field skor dan bobot dibuat dengan type integer !! Dan pastikan setiap layer peta yang akan di overlay memiliki luas yang sama, agar tidak ada error topology. Hal tersebut di maksudkan agar hasil overlay mendekati sempurna. (Baca artikel ERROR TOPOLOGY untuk lebih memahami mengenai error topology).
Untuk mengoverlay seluruh layer peta, gunakan tool Union yang ada di dalam menu Geoporcessing atau di dalam ArcToolbox > Analysis Tools > Overlay > Union.
List layer peta yang akan di overlay di dalam jendel Union
List layer peta yang akan di overlay di dalam jendel Union
Setelah proses union berhasil, maka akan menghasilkan layer baru yang merupakan gabungan dari semua layer peta sebelumnya. Pada bagian attribute table layer tersebut kurang lebih akan seperti gambar berikut :

Tabel layer hasil union/overlay
Tabel layer hasil union/overlay
Karena sebelumnya pada field bobot di semua layer peta tidak di isi/di kosongkan. Maka di sini lakukan pengisian pada field tersebut dengan isian berupa perkalian field skor di kali (x) bobot dari setiap parameter. (misal pengisian field bobot air tanah : field skor air tanah * 5) dimana nilai lima (5) merupakan bobot dari parameter air tanah. Lakukan hal tersebut untuk semua field bobot di setiap parameter.
Setelah semua field bobot parameter telah di isi, selanjutnya buat field baru dengan nama bobot_total kemudian lakukan penjumlahan (+) semua field bobot parameter untuk mengisi field bobot_total tersebut.
Sebelum melanjutkan, kita harus ketahui terlebih dahulu banyaknya kelas yang terbentuk dan interval kelas kesesuaian lahan untuk permukiman berbasis geologi ini. Perhitungan untuk mendapatkan jumlah kelas kesesuaian lahan permukiman adalah dengan cara mengalikan jumlah peta tematik dengan menggunakan rumus Sturges dalam Sudjana (1988: 19), seperti berikut :
rumus sturges

Keterangan :
K = banyaknya kelas terbentuk
N = satuan peta yang dioverlaykan
Satuan peta yang dioverlaykan dalam pengklasifikasian tingkat kesesuaian lahan untuk permukiman di daerah penyelidikan ada 5 peta. Maka berdasarkan rumus sturges perhitungannya adalah sebagai berikut :
K = 1+3,322 log N
K = 1+3,322 log 5
K = 1+3,322 x 0,698
K = 3,016 dibulatkan menjadi 3.
Dari hasil penjumlahan bobot di pada layer yang sudah di overlay, didapatkan nilai maksimum 78 dan nilai minimum 41. Yang kemudian dari hasil tersebut dilakukan perhitungan untuk menentukan interval kelas dengan menggunakan rumus berikut : 
Rumus menentukan kelas interval
Keterangan : 
Range = total bobot maksimum – total bobot minimum 
K        = banyaknya kelas 
Maka perhitungan dari rumus metode ini berdasarkan data-data diatas adalah sebagai berikut :
IK = Range/K
IK = skor minimum-skor maksimum/banyaknya kelas
IK = 78-41/3
IK = 37/3
IK = 12,333
Dari perhitungan tersebut maka didapat interval kelas kesesuaian lahan yang berjarak 12.
Kembali ke hasil penjumlahan bobot setiap parameter. Buat field baru untuk menyimpan nama kelas interval, kemudian isikan setiap record berdasarkan interval kelas seperti berikut :
Kelas dan Interval Kelas kesesuaian lahan untuk permukiman berbasis geologi
Kelas dan Interval Kelas kesesuaian lahan untuk permukiman berbasis geologi
Hasil akhir dari proses di atas akan menghasilkan peta kesesuaian permukiman berbasis geologi seperti berikut :
Peta Kesesuaian Permukiman berbasis Geologi Kecamatan Ciamis
Peta Kesesuaian Permukiman berbasis Geologi Kecamatan Ciamis
Proses overlay di atas dapat di lihat juga pada video berikut :
Untuk hasil yang lebih baik, dapat ditambahkan parameter lain seperti peta rawan gempa bumi, hidrogeologi, dan peta parameter lainnya yang dapat membantu dalam menghasilkan informasi kesesuaian permukiman yang lebih mendekati akurat.
Diharapkan adanya kritik dan saran dari pembaca jika tulisan ini dirasa terdapat kesalahan atau ada yang perlu di koreksi.

Wassalamualaikum Wr.Wb

KONEKSI ARCGIS KE DBMS POSTGRESQL DENGAN MENGGUNAKAN ARCSDE DAN ODBC

Assalamualaikum Wr.Wb

Semua pekerjaan di bidang SIG dapat dipastikan akan bergelut dengan data. Kehilangan, kerusakan merupakan suatu kerugian yang enggan kita alami. DATA ADALAH KUNCI, tanpa data kita tidak bisa memulai suatu pekerjaan. Bukan hanya di bidang SIG, hampir semua jenis pekerjaan memerlukan data. 
Kemudahan akses, keamanan, dan manajemen data yang baik merupakan suatu keharusan, terlebih jika kita bergelut dengan data yang berjumlah banyak. Pada umum nya kita akan menyimpan data dalam bentuk flat file atau worksheet di dalam directory di PC/Laptop yang kita gunakan, hal tersebut terasa lebih praktis, namun faktanya hal tersebut justru menimbulkan masalah baru, dimulai dari masalah pada directory PC/Laptop yang menjadi penuh, terdapat folder dan file yang bertumpuk, serta keterbatasan untuk mengakses data tersebut.
Untuk mengatasi hal tersebut maka diperlukan suatu Database yang dikelola di dalam suatu Database Management System (DBMS) yang dapat terhubung ke dalam aplikasi GIS, Dengan begitu proses manajemen data akan lebih baik karena dilakukan di tempat yang terpisah dari Directory PC/Laptop dan dengan keamanan yang jauh lebih baik. 
Database sendiri dilihat dari sudut pandang sistem dapat diartikan sebagai kumpulan tabel yang saling berhubungan. Sedangkan dari sudut pandang manajemen dapat diartikan sebagai kumpulan data yang memodelkan aktivias-aktivitas yang terdapat dalam perusahaan.
Sedangkan DBMS dapat diartikan sebagai kumpulan dari data yang saling berhubungan dengan sekumpulan program-program yang mengakses data tersebut. Perbedaan dengan Database, DBMS merupakan paket perangat lunak yang digunakan untuk membangun database data tertentu. Dengan kata lain DBMS adalah bagian dari sistem database.
Penyimpanan data dalam bentuk DBMS mempunyai banyak manfaat dan kelebihan dibandingkan dengan penyimpanan dalam bentuk flat file atau worksheet langsung di directory PC/Laptop, diantaranya :
  1. Performa yang di dapat dengan penyimpanan dalam bentuk DBMS cukup besar, sangat jauh berbeda dengan performance data yang disimpan dalam bentuk flat file atau worksheet di directory PC/Laptop. Disamping memiliki unjuk kerja yang lebih baik, juga akan didapatkan efisiensi penggunaan media penyimpanan dan memori.
  2. Integritas data lebih terjamin dengan penggunaan DBMS. Masalah redudansi sering terjadi dalam flat file. Redudansi adalah kejadian berulangnya data atau kumpulan data yang sama dalam sebuah database yang mengakibatkan pemborosan media penyimpanan.
  3. Independensi. Perubahan struktur database dimungkinkan terjadi tanpa harus mengubah aplikasi yang mengaksesnya sehingga pembuatan antarmuka ke dalam data akan lebih mudah dengan penggunaan DBMS.
  4. Sentralisasi. Data yang terpusat akan mempermudah pengelolaan database. kemudahan di dalam mengakases data secara bersamaan oleh banyak user dengan DBMS dan juga ke konsistenan data yang diakses secara bersama-sama akan lebih terjamin daripada data disimpan dalam bentuk file atau worksheet yang tersebar.
  5. Keamanan. DBMS memiliki sistem keamanan yang lebih fleksibel daripada pengamanan pada file sistem operasi. Keamanan dalam DBMS akan memberikan keluwesan dalam pemberian hak.
Connection PostgreSQL to ArcGIS with ArcSDE and ODBC
Dari penjelasan di atas, maka di sini blog INFO-GEOSPASIAL akan coba memberikan tutorial cara untuk melakukan koneksi Aplikasi ArcGIS desktop ke DBMS PostgreSQL. Akan dijelaskan juga bagaimana memanggil, mengedit, menyimpan kembali, menambahkan serta beberapa fungsi lainnya untuk manajemen data GIS di DBMS tersebut dengan melalui ArcGIS.
Terdapat beberapa cara untuk melakukan koneksi di ArcGIS ke PostgreSQL, diataranya :
  1. Koneksi menggunakan ArcSDE
  2. Koneksi Menggunana ODBC
  3. Koneksi menggunakan bantuan plugin/ektensi tambahan di ArcGIS (misal : St-Links, GISquirrel,dll)
Di dalam artikel ini, akan dijelaskan bagaimana cara melakukan koneksi dengan menggunakan cara 1 dan 2. Tahap pertama pastikan aplikasi ArcGIS dan PostgreSQL sudah terinstal di PC/Laptop yang digunakan. Kemudian di dalam directory instalasi ArcGIS, biasanya C:\Program Files(x86)\ArcGIS\Desktop10.3\DatabaseSupport\PostgreSQL\9.3\Windows64 (Sesuaikan versi ArcGIS yang di pakai).
st_geometry.dll
Mengcopy file st_geometry.dll dan libst_raster_pg.dll
Copy file st_geometry.dll dan libst_raster_pg.dll (jika hanya ada file st_geometry.dll tidak masalah, di copy saja) ke dalam directory instalasi PostgreSQL C:\Program Files\PostgreSQL\9.3\lib (Sesuaikan versi PostgreSQL yang di pakai).
Kemudian copy semua file PostgreSQLClient berikut ke dalam directory ArcGIS C:\Program Files (x86)\ArcGIS\Desktop10.3\bin :
Jalankan program ArcMap, masuk ke ArcToolBox > Data Management Tools > Geodatabase Administration > Create Eterprise Geodatabase.
Create Enterprise Geodatabase
Create Enterprise Geodatabase
Pada jendel Create Enterprise Geodatabase, lakukan isian seperti berikut :
  • Database Platform : isi dengan jenis DBMS yang akan di koneksikan (pilih PostgreSQL)
  • Instance : Isi dengan nama komputer atau IP dari komputer, atau bisa juga dengan Port yang digunakan di PostgreSQL (contoh di sini menggunakan Port)
  • Database : Bisa di isi dengan nama database yang sudah tersedia atau pernah di buat di PostgreSQL atau bisa juga isi dengan nama database baru yang akan di buat
  • Database Administrator : Nama username yang digunakan untuk login ke PostgreSQL
  • Database Administrator Password : Password untuk masuk ke PostgreSQL
  • Geodatabase Administrator Password : Buat password baru untuk login ke PostgreSQL dengan menggunakan username 'sde'.
  • Authorization File : Isi dengan file license ArcGIS server (sesuaikan dengan versi ArcGIS yang di gunakan) dalam format .ecp
Setelahan proses di atas berjalan dengan baik, selanjutnya Tambahkan koneksi untuk memanggil Database ke ArcGIS dengan cara buka ArcCatalog, di dalam folder Database Connection pilih Add Database Connection. 
Add Database Connection
Add Database Connection
Isiannya hampir sama dengan isian sebelumnya, pada bagian Instance isi dengan Port (contoh di sini pakai Port) kemudian Authorization Type pilih Database Authorization. Username bisa menggunakan username yang default kita gunakan untuk login ke PostgreSQL yaitu “postgres” atupun bisa menggunakan username “sde” yang sebelumnya di buat oleh sistem. Namun akan terdapat perbedaan dari hak akses yang bisa di lakukan, untuk akses penuh gunakan username “sde”. Lalu tentukan nama database yang akan di koneksikan (karna tadi di buat database baru dengan nama  'info_geospasial' maka pilih saja database tersebut). Jika sudah maka akan terbentuk koneksi baru, silahkan di rename sesuai nama yang di inginkan.
New Connection
New Connection
Dengan mengikuti tahap-tahap di atas, maka otomatis di dalam PostgreSQL juga akan terbentuk database baru dengan nama "info_geospasial" dan juga terbentuk user baru dengan nama "sde".
Tampilan PostgreSQL dengan PgAdmin
Tampilan PostgreSQL dengan PgAdmin
Terdapat keunggulan dengan melakukan koneksi melalu SDE, kita mendapatkan semua fungsi dan akses seperti geodatabase personal pada umumnya, yaitu :
  1. Tabel : Menyimpan obyek non-spasial (informasi tabular).
  2. Feature Class : Kumpulan dari obyek spasial berupa titik, garis, area (poligon). Bisa juga untuk menyimpan feature anotasi, dimensi, rute.
  3. Feature Dataset : Tempat/wadah untuk feature class yang memiliki referensi spasial sama. Dataset ini perlu apabila kita ingin membuat network dan topologi.
  4. Relationship class : Mengatur hubungan tematik antara tabel, feature class, atau kedua-duanya. Mendukung integrasi antara origin data dan destination class.
  5. Geometrik Netwrok : Hubungan topologi khusus antara titik dan garis yang digunakan untuk analisa pada alur sistem jaringan langsung.
  6. Topologi : Hubungan spasial antara feature classes yang digunakan untuk menentukan dan memperbaiki kesalahan (error) spasial, seperti parcel yang overlap satu sama lain atau yang tidak berada dalam batas wilayah. Penjelasan lengkap mengenai ERROR TOPOLOGI.
  7. Raster Dataset : Data grid yang diturunkan dari berbagai sumber format (Tiff, Jpeg, dll).
  8. Raster Catalog : Tabel dari kumpulan data raster.
  9. Survey Dataset : Menyimpan informasi survey dan menggabungkan data survey dalam proyek dan banyak proyek ke dalam folder proyek.
  10. Toolbox : Berisi tool-tool geoprocessing.
  11. Behaviour Rules : Dapat dibuat untuk mendefinisikan atribut legal, relation, topologi, koneksi.
Dengan koneksi ke ArcGIS, SDE akan menggantikan fungsi dari PostGIS. Tetapi terdapat kekurangan, yaitu karena koneksi SDE hanya tersedia di ArcGIS maka pada database yang terkoneksi melalui SDE akan terbentuk schema "sde" yang menggunakan owner "sde" yang mana semua data spasial maupun non spasial yang di buat atau di olah di ArcGIS akan otomatis tersimpan ke dalam schema tersebut. Namun data spasial maupun non spasial yang ada di dalam schema tersebut tidak akan bisa di akses melalui aplikasi GIS lainnya, karena hanya bisa di akses dan di olah di ArcGIS.
Untuk aplikasi GIS lainnya hanya bisa mengakses dan mengolah data spasial di PostgreSQL dengan menggunakan dukungan PostGIS dan data spasial tersimpan di schema "public" dengan owner "postgres"
Di dalam geodatabase yang baru saja di buat, di dalamnya belum ada data, untuk menginput data vektor (yang bukan dari geodatabase lain, bukan format feature class) caranya bisa dilihat pada video animasi berikut :
Import vektor non Feature Class ke dalam Geodatabase
Import vektor non Feature Class ke dalam Geodatabase
Jika akan mengimport feature class dari geodatabase lain, bisa di lakukan dengan cara klik kanan pada koneksi geodatabase > import. Pilih Feature Class (single) jika akan mengimport 1 file/data feature class, namun jika yang akan di import dalam jumlah banyak pilih Feature Class (multiple).
Untuk mengimport data dalam bentuk raster, caranya bisa di lihat pada video animasi berikut :
Import raster ke dalam Geodatabase
Import raster ke dalam Geodatabase
Berikut
Penjelasan di atas adalah cara melakukan koneksi dengan menggunakan ArcSDE. Selanjutnya bagaimana cara melakukan koneksi PostgreSQL dengan menggunakan ODBC ke ArcGIS.
Pertama silahkan unduh terlebih dahulu PostgreSQL ODBC pada link berikut : 
Unduh dan instal driver PostgreSQL ODBC untuk system type 32 bit, meskipun PC/Laptop yang digunakan menggunakan sistem type 64 bit. Setelah berhasil di instal, masuk ke directory C:\Windows\SysWOW64\ kemudian jalankan program edbcad32.exe. Ikuti langkah-langkap seperti pada video animasi berikut :
Menambahkan koneksi ODBC ke PostgreSQL
Menambahkan koneksi ODBC ke PostgreSQL
Terakhir, buat koneksi di ArcCatalog untuk memanggil koneksi ODBC ke PostgreSQL. Caranya bisa di lihat pada video animasi berikut :
Membuat koneksi Untuk memanggil Koneksi ODBC di ArcCatalog
Membuat koneksi Untuk memanggil Koneksi ODBC di ArcCatalog
Hasil koneksi dengan ODBC tidak sama dengan cara yang pertama dengan SDE, di sini user hanya bisa menampilkan data dalam bentuk tabel bukan dalam bentuk spasial. Jadi koneksi ini hanya jiga kia ini mengelola data tabel saja.
Proses koneksi PostgreSQL ke ArcGIS bisa di lihat juga pada video berikut :
Terdapat beberapa penjelasan teks pada artikel ini yang dikutip dari wikipedia.org dan inigis.com. Semoga tulisan ini bermanfaat . . .

Wassalamualaikum Wr.Wb

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 4

Assalamualaikum Wr.Wb

Kembali lagi dengan artikel proses pembuatan WebGIS dengan menggunakan Leaflet Javascript. Pada tahap sebelumnya telah di jelaskan cara membuat tool pilihan layer peta dengan tampilan radio button, kemudian telah di jelaskan juga proses membuat tool pencarian yang dapat di gunakan terhadap semua layer peta. Namun pada tutorial sebelumnya dirasa masih terdapat beberapa kekurangan diantaranya :
  1. Tool Pencarian :  ketika mencoba mencari objek berdasarkan nama keterangan dari layer peta yang akan di cari, maka akan muncul objek berbentuk circle, objek berbentuk circle tersebut tidak akan hilang kecuali halaman web di refresh. 
  2. Ketika pada saat web di akses untuk pertama kali, semua layer peta akan langsung muncul secara tumpang tindih. 
  3. Pemberian warna objek polygon yang tidak efektif. Karena harus di beri warna satu per satu.
Permasalahan di atas akan coba di perbaiki pada artikel ini. Dan akan di jelaskan juga cara untuk mempercantik desain web.
Pertama buka file SHP Bali Administrasi dan Bali Geologi yang ada di dalam database di PostgreSQL dengan menggunakan aplikasi QuantumGIS. Kemudian buat field baru dengan nama 'color'.
Kategorikan warna objek polygon berdasarkan field tertentu. Kemudian tuliskan kode warna dalam bentuk hexadecimal yang ada pada setiap objek polygon ke dalam field 'color' di atribut tabel. Proses tersebut sudah pernah di jelaskan pada artikel berikut :
Hasil dari proses tersebut akan seperti pada gambar berikut :
Atribut Tabel Layer Bali
Atribut Tabel Layer Bali
Setelah melakukan tahap di atas, kemudian pastikan nama tabel di dalam database tidak ada yang menggunakan huruf kapital (misal: sebelumnya nama tabel layer bali administrasi adalah 'BALI', ganti nama tersebut menjadi 'bali'). Hal tersebut di lakukan untuk mempermudah pada saat mengikuti tutorial di part selanjutnya. Lakukan publish ulang untuk setiap layer di dalam GeoServer.
Pada tahap sebelumnya, untuk menampilkan objek polygon di web, script yang digunakan adalah seperti berikut :
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ // sekarang perintahnya diawali dengan variabel
    style: function(feature){
    var fillColor, // ini style yang akan digunakan
            kode = feature.properties.kode_kab; // pewarnaan objek polygon berdasarkan kode kabupaten di dalam file geojson
             if ( kode > 5171 ) fillColor = "#ffd700";
        else if ( kode > 5108 ) fillColor = "#4ba754";
        else if ( kode > 5107 ) fillColor = "#9b3339";
        else if ( kode > 5106 ) fillColor = "#dd38e0";
        else if ( kode > 5105 ) fillColor = "#908965";
        else if ( kode > 5104 ) fillColor = "#3ab7e9";
        else if ( kode > 5103 ) fillColor = "#c8cf06";
        else if ( kode > 5102 ) fillColor = "#2f838c";
        else if ( kode > 5101 ) fillColor = "#fede36";
        else fillColor = "#ff4040";  // no data
        return { color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 1 }; // style border sertaa transparansi
      },
      onEachFeature: function(feature, layer){
      layer.bindPopup("<center>" + feature.properties.nama + "</center>"), // popup yang akan ditampilkan diambil dari field nama
      that = this; // perintah agar menghasilkan efek hover pada objek layer

            layer.on('mouseover', function (e) {
                this.setStyle({
                weight: 2,
                color: '#72152b',
                dashArray: '',
                fillOpacity: 0.8
                });

            if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
            }

                info.update(layer.feature.properties);
            });
            layer.on('mouseout', function (e) {
                layer_ADMINISTRASI.resetStyle(e.target); // isi dengan nama variabel dari layer
                info.update();
            });
    }
    }).addTo(map);
Dengan menggunakan script di atas, proses pemberian warna pada objek polygon menjadi tidak efektif, karena harus di beri warna secara manual satu per satu dan script di atas berpengaruh terhadap layer yang tumpang tindih ketika web pertama kali di akses.
Untuk mengatasi hal tersebut, ganti script di atas dengan menggunakan script berikut :
var layer_ADMINISTRASI = new L.GeoJSON.AJAX("layer/request_bali.php",{ 
    style: function(feature){
    var fillColor = feature.properties.color; // PEWARNAAN OBJEK POLYGON DIAMBIL DARI FIELD "color" PADA FILE GEOJSON
        return {color: "#999", dashArray: '3', weight: 2, fillColor: fillColor, fillOpacity: 0.5 }; // Berikan efek trasparan pada bagian "fillOpacity" agar basemap dapat terlihat
      },
      onEachFeature: function(feature, layer){
        items.push(layer); // ini dibuat untuk menghubungkan variabel items ke dalam layer, ini berfungsi untuk menjalankan tool pencarian
      layer.bindPopup("<center>" + feature.properties.nama + "</center>"), // popup yang akan ditampilkan diambil dari filed nama
      that = this; // perintah agar menghasilkan efek hover pada objek layer

            layer.on('mouseover', function (e) {
                this.setStyle({
                weight: 2,
                color: '#72152b',
                dashArray: '',
                fillOpacity: 0.8
                });

            if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
            }

                info.update(layer.feature.properties);
            });
            layer.on('mouseout', function (e) {
                layer_ADMINISTRASI.resetStyle(e.target); // isi dengan nama variabel dari layer
                info.update();
            });
    }
    }).addTo(peta); // layer peta administrasi ini ditmbahkan ke dalam variabel 'peta'
Lakukan hal yang sama seperti cara di atas untuk script memanggil peta geologi. Selanjutnya tambahkan variabel berikut dan tempatkan di posisi paling atas di bawah variabel map :
var peta = new L.LayerGroup();
var items = [];
Dengan mengikuti tahapan di atas, sekarang objek polygon sudah otomatis memiliki warna dengan mengambil kode warna yang ada di dalam field 'color'. Hasilnya akan sama seperti sebelumnya namun dengan cara yang berbeda.
Layer peta yang di tampilkan masih akan tumpang tindih ketika web di jalankan, dikarenakan ada variabel lain yang mengakibatkan hal tersebut terjadi yang ada di dalam script tool pencarian. Oleh karena itu, script tool pencarian harus di ganti. Sebelum di ganti silahkan unduh terlebih dahulu bahan berikut :
Simpan dan ekstrak folder Bootstrap di dalam folder css, kemudian sisipkan link pemanggil file bootstrap seperti berikut :
<link rel="stylesheet" href="css/bootstrap.min.css"/>
Script untuk membuat tool pencarian sebelumnya ditulis seperti berikut :
// MENAMBAHKAN TOOL PENCARIAN
var searchlayer = L.featureGroup([layer_ADMINISTRASI, layer_GEOLOGI]);
L.Control.Search.include({
  _recordsFromLayer: function() { //return table: key,value from layer
    var that = this,
      retRecords = {},
      propName = this.options.propertyName,
      loc;
      
    function searchInLayer(layer) {
      if (layer instanceof L.Control.Search.Marker) return;

      if (layer instanceof L.Marker || layer instanceof L.CircleMarker) {
        if (that._getPath(layer.options, propName)) {
          loc = layer.getLatLng();
          loc.layer = layer;
          retRecords[that._getPath(layer.options, propName)] = loc;

        } else if (that._getPath(layer.feature.properties, propName)) {

          loc = layer.getLatLng();
          loc.layer = layer;
          retRecords[that._getPath(layer.feature.properties, propName)] = loc;

        } else {
          throw new Error("propertyName '" + propName + "' not found in marker");
        }
      } else if (layer.hasOwnProperty('feature')) { //GeoJSON

        if (layer.feature.properties.hasOwnProperty(propName)) {
          loc = layer.getBounds().getCenter();
          loc.layer = layer;
          retRecords[layer.feature.properties[propName]] = loc;
        } else {
          throw new Error("propertyName '" + propName + "' not found in feature");
        }
      } else if (layer instanceof L.LayerGroup) {
        //TODO: Optimize
        layer.eachLayer(searchInLayer, this);
      }
    }

    this._layer.eachLayer(searchInLayer, this);

    return retRecords;
  }
});

L.control.search({

    layer: searchlayer, 

    propertyName: 'nama', // nama field yang akan dijadikan acuan di dalam tool pencarian
    moveToLocation: function(latlng, title, map) {
      //map.fitBounds( latlng.layer.getBounds() );
      var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
  })
  .addTo(map);
Hapus script tool pencarian di atas, kemudian ganti dengan script berikut :
// SEARCH TOOL

function sortNama(a, b) {
  var _a = a.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian

  var _b = b.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian

  if (_a < _b) {
    return -1;
  }
  if (_a > _b) {
    return 1;
  }
  return 0;
}

L.Control.Search = L.Control.extend({
  options: {
    // topright, topleft, bottomleft, bottomright
    position: 'topleft',
    placeholder: ' Search...'
  },
  initialize: function (options /*{ data: {...}  }*/) {
    // constructor
    L.Util.setOptions(this, options);
  },
  onAdd: function (map) {
    // happens after added to map
    var container = L.DomUtil.create('div', 'search-container');
    this.form = L.DomUtil.create('form', 'form', container);
    var group = L.DomUtil.create('div', 'form-group', this.form);
    this.input = L.DomUtil.create('input', 'form-control input-sm', group);
    this.input.type = 'text';
    this.input.placeholder = this.options.placeholder;
    this.results = L.DomUtil.create('div', 'list-group', group);
    L.DomEvent.addListener(this.input, 'keyup', _.debounce(this.keyup, 300), this);
    L.DomEvent.addListener(this.form, 'submit', this.submit, this);
    L.DomEvent.disableClickPropagation(container);
    return container;
  },
  onRemove: function (map) {
    // when removed
    L.DomEvent.removeListener(this._input, 'keyup', this.keyup, this);
    L.DomEvent.removeListener(form, 'submit', this.submit, this);
  },
  keyup: function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
      // do nothing
    } else {
      this.results.innerHTML = '';
      if (this.input.value.length > 2) {
        var value = this.input.value;
        var results = _.take(_.filter(this.options.data, function(x) {
          return x.feature.properties.nama.toUpperCase().indexOf(value.toUpperCase()) > -1;
        }).sort(sortNama), 10);
        _.map(results, function(x) {
          var a = L.DomUtil.create('a', 'list-group-item');
          a.href = '';
          a.setAttribute('data-result-name', x.feature.properties.nama); // nama field yang akan dijadikan acuan di dalam tool pencarian

          a.innerHTML = x.feature.properties.nama; // nama field yang akan dijadikan acuan di dalam tool pencarian

          this.results.appendChild(a);
          L.DomEvent.addListener(a, 'click', this.itemSelected, this);
          return a;
        }, this);
      }
    }
  },
  itemSelected: function(e) {
    L.DomEvent.preventDefault(e);
    var elem = e.target;
    var value = elem.innerHTML;
    this.input.value = elem.getAttribute('data-result-name');
    var feature = _.find(this.options.data, function(x) {
      return x.feature.properties.nama === this.input.value; // nama field yang akan dijadikan acuan di dalam tool pencarian

    }, this);
    if (feature) {
      this._map.fitBounds(feature.getBounds());
    }
    this.results.innerHTML = '';
  },
  submit: function(e) {
    L.DomEvent.preventDefault(e);
  }
});

L.control.search = function(id, options) {
  return new L.Control.Search(id, options);
}
L.control.search({
  data: items
}).addTo(map);
Kemudian hapus link CSS dan JS dari tool pencarian, berikut link yang harus di hapus :
<!--- CSS --->
<link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css"/>
<!--- JS --->
<script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
Setelah link CSS dan JS tool pencarian di hapus. Tambahkan link JS berikut agar tool pencarian yang baru dapat berfungsi :
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
Dengan mengikuti tahapan di atas, maka hasilnya akan seperti berikut :
Animasi GIF WebGIS Info-Geospasial
Animasi GIF WebGIS Info-Geospasial (setengah selesai part 4)
Ukuran dari tool pencarian yang dibuat, masih kurang pas jika di pasang berdekatan dengan tool lainnya. Untuk mengatasi hal tersebut tambahkan CSS berikut pada file style.css :
input[type=text] {
 width: 27px;
 margin-left: -1px;
 margin-bottom: -25px;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('img/search-icon.png');
 padding: 5px 3px 3px 23px;
 background-position: 3px 3px; 
 box-shadow: 0 1px 2px rgba(0,0,0,0.4);
 background-repeat: no-repeat;
 -webkit-transition: width 0.2s ease-in-out;
 transition: width 0.2s ease-in-out;
}
input[type=text]:focus {
    width: 100%;
}
Tambahkan icon berikut ke dalam directory : htdocs\webgis\info-geospasial\img
Tahap terakhir pada artikel ini, yaitu mempercantik desain WebGIS. Tambahkan script header dan footer serta menu berikut ke dalam file index.php : 
<!-- TEMPATKAN KODE UNTUK MEMBUAT HEADER DI BAWAH INI, LETAKAN KODE DI ATAS TAG <div id="map"> -->
<header id="header">
<h2><a href="http://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>
<!-- END KODE HEADER -->
<!-- TEMPATKAN KODE UNTUK MEMBUAT FOOTER DI BAWAH INI, LETAKAN KODE DI ATAS PENUTUP TAG </body> -->
<footer id="footer">
<p>Copyright © 2017 <a href="http://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>
<!-- END KODE FOOTER -->
Sisipkan kode CSS berikut untuk mengatur tampilan header, footer dan menu ke dalam file style.css :
#header {
  height:8%;
  width:100%;
  margin-top:-21px;
  background-color:#2e2e2e;
  color:#fff;
  font-family: "Andale Mono", "Monotype.com", monospace;
 }
 #header h2 {
  font-size:25px;
  color:#fff;
  line-height:220%;
  margin-left:2.5%;
 }
 #header h2 a:link{
 color: #fff;
 text-decoration: none;
 }
  #header h2 a:visited{
 color: #fff; 
 text-decoration: none;
 }
  #header h2 a:hover{
 color:#fff;
 }
 .menu-header {
  position:relative;
  margin:0 auto;
  margin-top: -3.3%;
    margin-left: 18%;
  font-size:13px;
  border-radius:2px;
  font-family: "Andale Mono", "Monotype.com", monospace;
}
.menu-header ul {
  list-style:none;
  margin-left:-25px;
}
.menu-header ul li {
  display:inline-table; 
  margin:0 auto; 
  margin-right: 10px;
}
.menu-header ul li a {
  text-align:center; 
  text-decoration:none; 
  text-transform:uppercase;
  margin-left:5px;
}
.menu-header ul li a:link{
              color: #fff;
              text-decoration: none;
}
.menu-header ul li a:visited{
                  color: #fff; 
                  text-decoration: none;
}
.menu-header ul li a:hover{
                color:#fff;
 }   

  .menu-footer {
  position:relative;
  float:right;
  margin:0 auto;
 margin-top: 0.8%;
  margin-right: 2%;
  font-size:13px;
  border-radius:2px;
  font-family: "Andale Mono", "Monotype.com", monospace;
}
.menu-footer ul {
  list-style:none;
  margin-left:-25px;
}
.menu-footer ul li {
  display:inline-table; 
  margin:0 auto; 
  margin-right: 10px;
}
.menu-footer ul li a {
  text-align:center; 
  text-decoration:none; 
  text-transform:uppercase;
  margin-left:5px;
}
.menu-footer ul li a:link{
              color: #e6e6fa;
              text-decoration: none;
}
.menu-footer ul li a:visited{
                  color: #e6e6fa;
                  text-decoration: none;
}
.menu-footer ul li a:hover{
                color:#337ab7;
 } 

.right{
 float:right;
 margin-right:10px;
}

 #footer {
  height:6.1%;
  width:100%;
  background-color:#2e2e2e;
  font-family: "Andale Mono", "Monotype.com", monospace;
  /*line-height:10px;*/
 }
 #footer p {
  color:#fff;
  float:left;
  margin-left:2%;
  margin-top:0.8%;
 }
Dan tidak lupa unduh juga bahan berikut agar icon di dalam menu bisa tampil :
Simpan folder font awesome di dalam folder css. Kemudian panggil link nya seperti berikut :
<link rel="stylesheet" href="css/font-awesome-4.6.2/css/font-awesome.min.css"/> // sesuaikan versi font awesome yang di gunakan
Berikut gabungan script dari keseluruhan tahap di atas dan termasuk tahap-tahap sebelumnya  :
<!DOCTYPE html>
<html>
<head> <!-- untuk meta description, keywords, dan author bisa ganti dan di sesuaikan tapi yang meta charset sama viewport jangan di ganti -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='description' content='WebGIS 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/font-awesome-4.6.2/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.css" />
<script src="leaflet/leaflet.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="leaflet/leaflet-ajax/dist/leaflet.ajax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="leaflet/leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js"></script>
<script src="leaflet/leaflet-providers-master/leaflet-providers.js"></script>
<script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
</head>
<body>
<!-- INI HEADER -->
<header id="header">
<h2><a href="http://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</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> 
<!-- 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>
Penggunaan script seperti yang di jelaskan di atas akan menghasilkan WebGIS seperti berikut :
Animasi GIF WebGIS Info-Geospasial (Selesai part 4)
Animasi GIF WebGIS Info-Geospasial (Selesai part 4)
Tutorial Pembuatan WebGIS dengan menggunakan Leaflet Javascript Part 4 sudah selesai. Di part selanjutnya baru akan dijelaskan bagaimana mengaktifkan menu yang ada, termasuk membuat legenda yang terkoneksi langsung ke database. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb