MEMBUAT WEBGIS DENGAN LEAFLET JAVASCRIPT PART 2

Leave a Comment
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

0 komentar:

Post a Comment