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

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 2

Assalamualaikum Wr.Wb

Artikel ini akan membahas tahap lanjutkan tutorial pembuatan Web GIS dengan menggunakan Leaflet JavaScript part 2. Sebelumnya sudah pernah di jelaskan bahan-bahan yang dibutuhkan serta proses pembuatan Web GIS tahap pertama di artikel berikut :
Di tahap ini, kita masih menggunakan bahan vektor yang sama dengan tutorial di part 1 (SHP Provinsi Bali). Namun ada tambahan plugin baru yang akan digunakan. Silahkan unduh plugin nya di link berikut :
Simpan hasil unduhan tersebut di folder leaflet (lihat pada tahap pembuatan WebGIS yang pertama), kemudian extract. 
Sisipkan link css dan js dari setiap folder tersebut kedalam file index.php. Berikut link yang dipanggil :
<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-ajax/dist/leaflet.ajax.js"></script>
<script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
<script src="leaflet/leaflet.defaultextent-master/dist/leaflet.defaultextent.js"></script>
Sisipkan link tersebut di dalam tag head. Sebelumnya untuk memanggil link geojson dari GeoServer ke dalam Web, digunakan perintah berikut :
$.ajax({ // ini perintah syntax ajax untuk memanggil vektor
    type: 'POST',
    url: 'layer/request_bali.php', // INI memanggil link request_bali yang sebelumnya telah di buat
    dataType: "json",
 success: function(response){
   var data=response; 
   L.geoJson(data,{
     style: function(feature){
    var Style1
    return { color: "#cc3f39", weight: 1, opacity: 1 }; // ini adalah style yang akan digunakan
    },
      // MENAMPILKAN POPUP DENGAN ISI BERDASARKAN ATRIBUT KAB_KOTA
      onEachFeature: function( feature, layer ){
        layer.bindPopup( "<center>" + feature.properties.kab_kot + "</center>")
      }
      }).addTo(map);  // di akhir selalu di akhiri dengan perintah ini karena objek akan ditambahkan ke map
    }
});
Karena objek poligon masih ditampilkan dalam satu warna dan masih transparan, maka atur agar objek poligon ditampilkan dengan perbedaan warna berdasarkan kabupaten, serta tambahkan juga efek hover ketika kursor berada di atas objek poligon. Maka ganti perintah untuk memanggil objek geojson dengan perintah berikut ini :

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.kab_kot + "</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);
ketika dijalankan di browser hasilnya akan seperti gambar berikut :
WebGIS Provinsi Bali
WebGIS Provinsi Bali
Selanjutnya tambahkan tool search dan dafaultextent ke dalam tampilan Web. Sisipkan script berikut ke dalam file index :
// MENAMBAHKAN TOOL PENCARIAN
var searchControl = new L.Control.Search({
    layer: layer_ADMINISTRASI, // ISI DENGAN NANA VARIABEL LAYER
    propertyName: 'kab_kot', // isi dengan nama field dari file geojson bali yang akan dijadiakn 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
  // menambahkan tools defautl extent
  L.control.defaultExtent().addTo(map);
Ganti icon XAMPP pada bagian header dengan icon/logo web sendiri, caranya tambahkan link berikut di dalam tag head :

<link rel="shortcut icon" href="img/lco.png"/> <!-- memanggil logo web di dalam foder img -->
Gabungan dari semua script di atas akan seperti berikut :

<!DOCTYPE html>
<html>
<head> <!-- untuk meta description, keywords, dan author bisa gantu 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 konten spasial ke dalam bentuk Website'/>
<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="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-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);

// 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);
// 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.kab_kot + "</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);
// 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 dijadiakn 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
  // menambahkan tools defautl extent
  L.control.defaultExtent().addTo(map);
</script>
</div> 
</body>
</html>
</body>
</html>
Simpan dan coba jalankan kembali di browser, maka hasilnya akan seperti gambar berikut :
Menggunakan Tool Pencarian WebGIS
Menggunakan Tool Pencarian WebGIS
Hasil Pencarian
Hasil Pencarian
Demikian tutorial pembuatan WebGIS dengan Leaflet Javascript Part 2. Pada part selanjutnya yang akan datang, akan coba menambahkan layer lain ke dalam tampilan web, serta akan menambahkan beberapa fitur tambahan. (Sebelumnya mohon maaf jika admin jarang memposting artikel, alasannya karena sedang ada pekerjaan lain). Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 1

Assalamualaikum Wr.Wb

Artikel ini akan membahas tutorial membuat Website berbasis GIS (Geographic Information System), atau yang lebih dikenal dengan sebutan WebGIS. Dalam proses pembuatannya akan digunakan aplikasi GeoServer, PostgreSQL dan library Leaflet JavaScript. Untuk pengertian serta fungsi dari setiap tools yang digunakan sudah pernah di jelaskan di artikel berikut :
Dalam tahap pertama ini, akan digunakan contoh vektor untuk daerah Provinsi Bali yang bisa di unduh di link berikut :
Atau dapat juga menggunakan data lain yang dapat di unduh di link artikel berikut :
Pada proses pembuatan WebGIS ini, data vektor akan disimpan di database di PostgreSQL yang tujuannya agar penyimpanan data lebih rapih dan terstruktur, kemudian proses memasukan data vektor ke database akan dilakukan dengan cara import dengan menggunakan software Quantum GIS. Data yang sudah ada di dalam database akan dikoneksikan ke GeoServer dan dari GeoServer tersebut akan di panggil link dalam format GeoJson ke dalam script penyusun WebGIS.
Jadi intinya maksud dari tahapan-tahapan ini agar proses pertukaran serta alur data menjadi dinamis, serta efisien. Ketika akan memperbaharui atau menambah data, cukup dilakukan satu kali di software Quantum GIS yang terkoneksi ke PostgreSQL, nanti ketika halaman WebGIS di tampilkan maka data vektor akan otomatis sudah diperbaharui sesuai dengan yang ada di database.
Proses Alur Data
Proses Alur Data
Pertama jalankan Quantum GIS dan PostgreSQL kemudian import data SHP ke dalam database di PostgreSQL, caranya sudah pernah dibahas di artikel berikut :
Kemudian koneksikan database tersebut ke GeoServer, dan cara koneksi database di PostgreSQL ke GeoServer juga sudah pernah dibahas di artikel berikut :
Cara untuk koneksi ke GeoServer akan sedikit saya ulangi, setelah Program PgAdminIII (PostgreSQL) di jalankan kemudian jalankan juga program GeoServer kemudian akses dan login ke dalamnya.
Buat workspace baru, di sini workspace di beri nama "info-geospasial" kemudian masuk ke menu stores > add new store > PostGIS. Kemudian isikan settingan untuk koneksi ke database di PostgreSQL seperti berikut :
Koneksi ke database di PostgreSQL
Koneksi ke database di PostgreSQL
Setelah berhasil maka akan muncul daftar layer yang ada di dalam database tersebut, seperti berikut :
Daftar Layer dari database
Daftar Layer dari database
Berikutnya lakukan publikasi pada layer tersebut, dengan mengklik pilihan Publish. Lakukan settingan untuk publikasi kurang lebih seperti gambar berikut :
Settingan untuk publikasi Layer di GeoServer
Settingan untuk publikasi Layer di GeoServer
Untuk penjelasan setiap form isian dapat di baca dan di pahami di artikel Koneksi PostgreSQL ke GeoServer
Setelah tahapan di atas di lakukan, sekarang masuk ke menu Layer Preview kemudian coba tampilkan layer yang barusan di Publish (Layer Bali) ke dalam tampilan OpenLayer.
Layer Preview
Layer Preview
Layer Bali di dalam tampilan OpenLayer
Layer Bali di dalam tampilan OpenLayer
Pada gambar di atas terlihat objek pulau Bali yang muncul dalam tampilan OpenLayer di GeoServer, berarti proses koneksi database ke GeoServer berjalan dengan benar. Selanjutnya kembali ke Layer Preview lalu tampilkan Layer Bali ke dalam tampilan GeoJSON.
GeoJSON Layer Bali
GeoJSON Layer Bali
Sekarang masuk ke tahap pembuatan WebGIS. Tahap sebelumnya merupakan tahap untuk mempersiapkan data yang dibutuhkan. Sebelumnya pastikan di laptop/PC yang digunakan sudah terinstal program XAMPP yang berfungsi agar dapat menjalankan website berbasis PHP. Karena WebGIS yang akan kita buat akan dibangun dengan beberapa bahasa pemrograman.
Softwarenya sendiri dapat di unduh dengan bebas di web resminya, untuk cara instalasi tidak akan dijelaskan di artikel ini, silahkan cari sendiri caranya di internet.
Admin asumsikan bahwa program XAMPP sudah berhasil terinstal di laptop/PC yang digunakan, sekarang buat folder di directory instalasi XAMPP, yaitu di XAMPP > htdocs. Buat folder WebGIS kemudian di dalamnya buat lagi folder untuk nama dari web yang dibuat (bebas) sebagai contoh di sini nama foldernya adalah "info-geospasial".
Di dalam folder "info-geospasial" buat lagi beberapa folder diantaranya :
css, js, img, layer, leaflet
Susunan folder di dalam folder "info-geospasial"
Susunan folder di dalam folder "info-geospasial"
Sekarang jalankan program XAMPP kemudian run pada server Apache. Buka text editor bisa pakai notepad, notepad ++, sublime, ataupun text editor lainnya.
Copy link address pada halaman Layer Bali yang ditampilkan ke dalam format GeoJSON (perhatihan gambar tampilan halaman GeoJSON, khususnya di bagian link address. Copy link tersebut). Di dalam text editor buat file baru dengan nama request_bali.php dan di dalamnya isi dengan syntax seperti berikut :

<?php
$url=file_get_contents("http://localhost:3615/geoserver/info-geospasial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=info-geospasial:BALI_ADM&outputFormat=application%2Fjson");  
	# url yang ada di dalam ("") itu link address dari halaman GeoJSON.. jangan luap hapus bagian &maxFeatures=50
echo($url);
?>
save file tesebut di dalam folder layer di dalam folder info-geospasial. Tahap selanjutnya membuat halaman utama WebGIS. Buat file index.php kemudian isi dengan strukut dasar html seperti berikut :
<!DOCTYPE html>
<html>
<head> <!-- untuk meta description, keywords, dan author bisa gantu 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 konten spasial ke dalam bentuk Website'/>
<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 -->
</head>
<body>
<!-- bagian ini akan di isi konten utama -->
</body>
</html>
Simpan file index.php tersebut di bagian luar di folder info-geospasial. Selanjutnya tambahakan file plugin leaflet JavaScript berikut di folder leaflet.
Silahkan unduh terlebih dahulu kemudian ekstrak dan simpan di folder leaflet. Unduh juga file jQuery di link berikut :
Untuk plugin leafletJS unduh yang legacy atau stable version. dan untuk jQuery unduh yang versi compressed. Simpan file jQuery di folder js. Di dalam file index.php tepat di atas tag head
tambahakan link pemanggil CSS, dan JS seperti berikut :

<link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- memanggil css di folder leaflet -->
<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-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js di folder leaflet provider -->
Selanjutnya di dalam tag body buat sebuat syntax id="map" dan di dalamnya isi dengan JavaScript untuk memanggil peta ke dalam halaman Web. Berikut syntax nya :

<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);

// 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);
// MENAMPILKAN SKALA
L.control.scale({imperial: false}).addTo(map);

// ------------------- VECTOR ----------------------------
// REQUEST BALI ADMINISTRASI
$.ajax({ // ini perintah syntax ajax untuk memanggil vektor
    type: 'POST',
    url: 'layer/request_bali.php', // INI memanggil link request_bali yang sebelumnya telah di buat
    dataType: "json",
	success: function(response){
  	var data=response; 
  	L.geoJson(data,{
     style: function(feature){
    var Style1
    return { color: "#cc3f39", weight: 1, opacity: 1 }; // ini adalah style yang akan digunakan
    },
      // MENAMPILKAN POPUP DENGAN ISI BERDASARKAN ATRIBUT KAB_KOTA
      onEachFeature: function( feature, layer ){
        layer.bindPopup( "<center>" + feature.properties.kab_kot + "</center>")
      }
      }).addTo(map);  // di akhir selalu di akhiri dengan perintah ini karena objek akan ditambahkan ke map
    }
});
</script>
</div> 
Kemudian buat file style.css dan simpan di folder css, isi file tersebut dengan syntax berikut :
 html {
  height: 100% 
 }
 body { 
  height: 100%; 
  margin: 0; 
  padding: 0;
 }
 #map {
  height:100%; 
} 
Terakhir tambahkan link pemanggil file style.css tersebut ke file index.php, tempatkan di bawah syntax pemanggil CSS leaflet.
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
Setelah semua tahapan di atas diikuti, maka berikut hasil akhir setelah di gabungkan semuanya :

<!DOCTYPE html>
<html>
<head> <!-- untuk meta description, keywords, dan author bisa gantu 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 konten spasial ke dalam bentuk Website'/>
<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="stylesheet" href="leaflet/leaflet.css" /> <!-- memanggil css di folder leaflet -->
<link rel="stylesheet" href="css/style.css" /> <!-- memanggil css style -->
<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-providers-master/leaflet-providers.js"></script> <!-- memanggil leaflet-providers.js di folder leaflet provider -->
</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);

// 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);
// MENAMPILKAN SKALA
L.control.scale({imperial: false}).addTo(map);

// ------------------- VECTOR ----------------------------
// REQUEST BALI ADMINISTRASI
$.ajax({ // ini perintah syntax ajax untuk memanggil vektor
    type: 'POST',
    url: 'layer/request_bali.php', // INI memanggil link request_bali yang sebelumnya telah di buat
    dataType: "json",
	success: function(response){
  	var data=response; 
  	L.geoJson(data,{
     style: function(feature){
    var Style1
    return { color: "#cc3f39", weight: 1, opacity: 1 }; // ini adalah style yang akan digunakan
    },
      // MENAMPILKAN POPUP DENGAN ISI BERDASARKAN ATRIBUT KAB_KOTA
      onEachFeature: function( feature, layer ){
        layer.bindPopup( "<center>" + feature.properties.kab_kot + "</center>")
      }
      }).addTo(map);  // di akhir selalu di akhiri dengan perintah ini karena objek akan ditambahkan ke map
    }
});
</script>
</div> 
</body>
</html>
</body>
</html>
Save dan coba jalankan di browser dengan mengetik link berikut di link address pada browser :
localhost/webgis/info-geospasial/ atau localhost/webgis/info-geospasial/index.php
Jika tahapan di atas diikuti dengan benar, maka hasilnya akan seperti gambar berikut :
Tampilan WebGIS dengan basemap 1
Tampilan WebGIS dengan basemap 1
Tampilan WebGIS dengan basemap 2
Tampilan WebGIS dengan basemap 2
Demikian tutorial cara Membuat WebGIS dengan Leaflet JavaScript part 1. Di part selanjutnya kita akan me Thematic vektor nya sehingga setiap kabupaten memiliki warna yang berbeda, serta akan ditambahkan beberapa vektor tambahan. Semoga Bermanfaat . . .

Wassalamualaikum Wr.Wb

IMPORT DATA SHP DARI QUANTUM GIS KE POSTGRESQL

Assalamualaikum Wr.Wb


Masih tentang pengenalan komponen serta tutorial dasar sebelum masuk ke artikel utama yaitu Pembuatan WebGIS. Kali ini akan dijelaskan bagaimana cara import data SHP dari software Quantum GIS ke Managemen database PostgreSQL. 
shp-qgis-postgis
Quantum GIS sendiri merupakan software pengolahan data spasial yang dikembangkan oleh Open Source Geospatial Foundation (OSGeo), software ini dapat diperoleh secara bebas. Pembahasan lengkap dari software ini sudah pernah di buat di artikel berikut :
Pertama jalankan program QGIS, lalu jalankan juga program PgAdminIII. Login ke server, pastikan PostgreSQL sudah terinstal plugin PostGIS. Di dalam QGIS coba koneksi ke database di PosgreSQL, caranya dengan menggunakan tool Tambahkan Layer PostGIS tambahkan layer postgis, buat koneksi baru ke database kemudian isi pada bagian jendela yang muncul seperti berikut :
koneksi database di PostgreSQL
Koneksi Database di PostgreSQL
  • Nama  : Nama Koneksi (bebas bisa disesuaikan)
  • Layanan : -
  • Host : localhost
  • Port : isi dengan port yang digunakan di PostgreSQL
  • Basisdata : isi dengan nama database yang akan dikoneksikan
  • Nama Pengguna : isi dengan username yang telah ditentukan pada saat pertama kali melakukan instalasi PostgreSQL (default nya adalah : postgres)
  • Sandi : isi dengan password untuk login ke PostgreSQL
Lakukan tes koneksi terlebih dahulu, jika berhasil klik ok untuk melanjutkan. Di dalam jendela Tambahkan Layer PostGIS, pada menu dropdown pilih Nama Koneksi yang baru saja di buat, kemudian klik Koneksikan.
Tambahkan Layer PostGIS
Tambahkan Layer PostGIS
Jendela di atas hanya berfungsi untuk memanggil Layer yang sudah ada di dalam Database ke dalam Quantum GIS, jadi bukan untuk menambahkan Layer ke dalam Database. Namun tool tersebut digunakan untuk membuat koneksi terlebih dahulu ke database sebelum memulai untuk menambahkan Layer SHP ke dalamnya.
Karena di dalam Database belum ada Layer SHP, maka pada saat dikoneksikan seperti pada gambar di atas, tidak ada Layer yang dapat dipanggil ke tampilan Quantum GIS.
Close jendela diatas, kemudian panggil Layer SHP yang akan ditambahkan ke Database dengan menggunakan tool Tambahkan Layer Vektor . Sebagai contoh di dalam tutorial ini akan digunakan Layer Administrasi Provinsi Bali yang dapat di unduh di link berikut :
Atau bisa gunakan file SHP lain yang dapat di unduh di link artikel berikut :
Administrasi Provinsi Bali
Administrasi Provinsi Bali
Attribut Tabel Layer Bali
Atribut Tabel Layer Bali
Setelah Layer SHP di panggil ke tampilan utama QGIS, selanjutnya masuk ke menu Basisdata > DB Manager > DB Manager, klik Pilihan PostGIS kemudian pilih nama koneksi ke database yang sebelumnya telah di buat yang akan ditambahkan Layer SHP baru ke dalamnya. Klik public pada nama koneksi tersebut lalu klik tool Import Layer/File.
DB Manager
DB Manager 1
Impor Layer
Impor Layer
Pada pilihan masukan pilih Layer yang akan ditambahkan, kemudian klik Opsi Pembaruan, maka opsi di bawahnya akan otomatis terisi. Skema pilih Public, pada opsi meskipun sudah terisi otomatis namun dapat di isi juga secara manual. Jika sudah klik Ok. Maka akan muncul popup pemberitahuan status import.
DB Manager
DB Manager 2
Pada gambar di atas terlihat layer SHP sudah berhasil ditambahkan ke Database. Untuk memastikan bisa di cek juga di database pada PgAdminIII. Masuk ke info-geo > Schemas > Public > Tables.
Tabel Bali di database info-geo di PostgreSQL
Tabel Bali di database info-geo di PostgreSQL
Attribut Tabel Layer Bali di PostgreSQL
Atribut Tabel Layer Bali di PostgreSQL
Pada kedua gambar di atas terlihat bahwa Layer SHP (Bali) sudah berhasil di tambahkan ke database dan dengan isian atribut tabel yang sama dengan Atribut tabel di layer SHP.
Selanjutnya kita coba untuk memanggil Layer di database tersebut ke dalam Quantum GIS dengan menggunakan tool Tambahkan Layer PostGIS.
Tambahkan Layer SHP dari database di PostgreSQL ke QGIS
Tambahkan Layer SHP dari database di PostgreSQL ke QGIS
Terlihat pada gambar di atas, sudah terdapat tabel baru yaitu (Bali) yang dapat di tambahkan ke tampilan layer editing di QGIS.
Layer Bali dari database di PostgreSQL
Layer Bali dari database di PostgreSQL
Demikian artikel cara Import data SHP dari QGIS ke PostgreSQL, untuk lebih jelas tutorial di atas bisa di lihat di video berikut :
Baca juga artikel pandahuluan sebelum kita memulai ke artikel utama yaitu Pembuatan WebGIS, diantaranya :

Wassalamualaikum Wr.Wb