Visualisasi Data Spasial: Tutorial WebGIS Penerapan Style Dinamis pada Layer GeoJSON di LeafletJS

By
JogjaTech
-
0
58

Halo teman-teman! Di tutorial kali ini, kita bakal ngulik gimana caranya ngasih style warna dinamis pada layer WebGIS GeoJSON di LeafletJS. Dimana pada tutorial ini kita akan membuat style dinamis pada layer dimana style warna pada layer setiap kabupaten pada peta DI Yogyakarta akan berbeda satu dengan lainnya. Agar peta yang kita buat nggak cuma tampil data, tapi juga keren secara visual. Yuk, langsung aja kita mulai ngoprek bareng!

Baik teman-teman kali ini adalah lanjutan tutorial dari project sebelumnya yang ada disini. Sebaiknya teman-teman membacanya terlebih dahulu sebelum melanjutkan tutorial kita hari ini disini.

Yuk, langsung kita mulai! Langkah-langkah agar project WebGIS terlihat menarik secara visual adalah memberi style layer dinamis,  adalah sebagai berikut caranya.

Membuat Fungsi untuk Membedakan Warna Layer pada LeafletJS

Fungsi ini dibuat untuk membedakan warna layer pada LeafletJS, adalah fungsi JavaScript yang digunakan untuk menentukan warna (atau style lain) berdasarkan atribut data dalam objek GeoJSON. Fungsi ini biasanya digunakan saat men-style fitur pada peta secara dinamis, agar tiap fitur (seperti poligon atau garis) memiliki tampilan berbeda sesuai dengan nilai propertinya. Anda dapat memberikan style warna yang berbeda dengan menentukan atribut yang ingin dibedakan warnanya. Misalnya: kategori, tipe, kepadatan, kabupaten,kecamatan, atau status.

function getColor(d) {
            return d == 'Sleman' ? '#bd0026' :
                d == 'Yogyakarta' ? '#fd8d3c' :
                d == 'Gunungkidul' ? '#f03b20' :
                d == 'Kulonprogo' ? '#feb24c' :
                d == 'Bantul' ? '#fed976' :
                '#ffffb2';
        }

Kemudian buatlah satu buah fungsi lagi untuk style layer seperti berikut.

function style(feature) {
            return {
                fillColor: getColor(feature.properties.region),
                weight: 3,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.8
            };
        }

Lalu terapkan pada otongan kode berikut

var jsonTest = new L.GeoJSON.AJAX(["data/yogyakarta.geojson"],{onEachFeature:popUp,style:style}).addTo(map);

Sehingga secara keseluruhan kode dapat kita lihat seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Peta Leaflet JS</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="js/leaflet.ajax.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>
    
    <script>
        var map = L.map('map').setView([-7.8032485,110.3336451], 9);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
        // L.marker([-7.8032485,110.3336451]).addTo(map).bindPopup('<b>Halo!</b><br />Ini DI Yogyakarta')
        // .openPopup();
        // var myStyle = {
        //     "color": "#ff0000", //warna yang akan diaplikasikan
        //     "weight": 3, //ketebalan
        //     "opacity": 0.5
        // };
        //fungsi popup ketika wilayah diklik
        function popUp(f,l){
            var out = [];
            if (f.properties){
                for(key in f.properties){
                    out.push(key+": "+f.properties[key]);
                }
                l.bindPopup(out.join("<br />"));
            }
        }
        
        //fungsi penentu warna layer
        function getColor(d) {
            return d == 'Sleman' ? '#bd0026' :
                d == 'Yogyakarta' ? '#fd8d3c' :
                d == 'Gunungkidul' ? '#f03b20' :
                d == 'Kulonprogo' ? '#feb24c' :
                d == 'Bantul' ? '#fed976' :
                '#ffffb2';
        }

        //fungsi style untuk layer
        function style(feature) {
            return {
                fillColor: getColor(feature.properties.region),
                weight: 3,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.8
            };
        }
       
        //memanggil data GeoJSON dan mengaplikasikan dinamis style layer
        var jsonTest = new L.GeoJSON.AJAX(["data/yogyakarta.geojson"],{onEachFeature:popUp,style:style}).addTo(map);
    </script>
</body>
</html>

Dengan pendekatan ini, setiap layer GeoJSON pada LeafletJS akan otomatis diberi warna berbeda sesuai dengan nilai properti yang dimilikinya. Ini membuat visualisasi peta menjadi lebih informatif dan mudah dibaca.

Tutorial WebGIS Penerapan Style Dinamis pada Layer GeoJSON di LeafletJS

Demikianlah tutorial mengenai penerapan style dinamis pada layer GeoJSON menggunakan LeafletJS. Melalui teknik ini, visualisasi data spasial dapat disajikan dengan lebih jelas, informatif, dan menarik, sehingga memudahkan dalam proses analisis dan interpretasi data.

Semoga tutorial ini dapat memberikan pemahaman serta menjadi referensi yang bermanfaat dalam pengembangan aplikasi WebGIS dengan LeafletJS .

Terima kasih telah mengikuti tutorial ini. Sampai jumpa pada pembahasan selanjutnya.

RELATED ARTICLESMORE FROM AUTHOR