GeoSIS ID

2017-02-12 10:37:00

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 3

Part ke 3 (tiga) tutorial pembuatan WebGIS dengan Leaflet JavaScript. 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 :

SHP Geologi Provinsi Bali

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 :

Import Data SHP dari QGIS ke PostgreSQL

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/geos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geos: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 kamiistrasi, oleh karena itu buat tool untuk memilih layer yang akan ditampilkan sehingga setiap layer tidak akan tumpang tindih. Caranya unduh terlebih dahulu plugin berikut :

Leaflet,groupedlayercontrol

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 kamiistrasi 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 :

Gambar 1 - Layer Geologi Provinsi Bali

Tahap terakhir adalah mengaktifkan tool pencarian untuk kedua objek layer tersebut (kamiistrasi dan geologi), karena pada tutorial sebelumnya pada layer kamiistrasi 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 kamiistrasi 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.

Gambar 2 - 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 :

Gambar 3 - Membuat field baru

Field baru berhasil dibuat, masuk ke field calculator. Update field nama berdasarkan isian pada field kab_kot.

Gambar 4 - 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 kamiistrasi, 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 :

Video 1 - 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 geosis.id menyajikan berbagai informasi spasial di indonesia'/>
<meta name='keywords' content='WebGIS, WebGIS geos, WebGIS Indoensia'/>
<meta name='Author' content='Egi Septiana'/> 
<title>WebGIS Info-Geospasial</title> <!-- title bisa di sesuaikan dengan nama judul WebGIS yang di inginkan -->
<link rel="shortcut icon" href="img/ICO.png"/>
<link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- 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>

Tutorial selanjutnya akan dijelaskan cara menambahkan beberapa fitur baru pada Web GIS tersebut dan mengatur design web GIS agar lebih menarik.

Artikel Terkait :

MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 3

Share This Post

Join our newsletter!