Tutorial WebGIS Sederhana Menggunakan LeafletJS dan GeoJSON, Memanggil GeoJSON dan Memberi Style Warna pada Layer

By
JogjaTech
-
0
51

Hai dan selamat datang di tutorial WebGIS dengan LeafletJS. Dalam tutorial kali ini, kita akan membahas langkah demi langkah cara membangun aplikasi WebGIS sederhana menggunakan LeafletJS dan GeoJSON berbasis web.

Dimana pada tutorial ini kita akan memanggil data GeoJSON yang kita miliki dan menampilkannya pada saat kita klik. Lalu kita jua akan mengarsir layer dengan memberi style warna pada layer.

LeafletJS adalah library JavaScript yang ringan namun powerful untuk menampilkan peta dan data geospasial secara interaktif di web.

Baik kamu seorang pemula maupun yang sudah familiar dengan pemrograman web, tutorial ini akan membantu kamu memahami dasar-dasar WebGIS dengan LeafletJS  dan bagaimana menerapkannya secara praktis.

Tutorial kali ini masih menggunakan project pada tutorial sebelumnya yang dapat Anda baca disini. Alangkah baiknya kamu membacanya terlebih dahulu sebelum melanjutkan tutorial ini.

Struktur File Project

Tutorial WebGIS Sederhana Menggunakan LeafletJS dan GeoJSON

Seperti terlihat diatas, bahwa kita masih menggunakan project sebelumnya yaitu folder “peta”, jangan lupa menambahkan folder baru pada root project disini saya menambahkan folder “data” yang saya gunakan untuk menyimpan file GeoJSON. Tidak lupa saya menambhakan folder “js” untuk menampung file-file js (javascript).

Sebelum melanjutkan, tidak ada salahnya kalua sedikit kita ulas terlebih dahulu ap aitu file js. File .js adalah file JavaScript — yaitu file yang berisi kode program yang dijalankan oleh browser untuk memberikan interaktivitas dan logika pemrosesan pada halaman web.

Memberi Style Warna pada Layer

Memberi style warna pada layer di LeafletJS berarti mengatur tampilan visual dari layer (seperti garis, poligon, atau titik) dengan warna tertentu menggunakan properti CSS-like yang diterapkan melalui Leaflet options.

Ini biasanya dilakukan saat membuat atau menambahkan GeoJSON, Polyline, Polygon, atau Circle, agar tampilannya sesuai kebutuhan (misalnya untuk peta tematik atau interaktif).

Untuk dapat memberikan style warna pada layer, secara sederhana kita cukup menambahkan potongan kode css pada project WebGIS. Berikut adalah contoh potongan kode yang dapat kita peroleh dari dokumentasi yang disediakan oleh LeafletJS.

var myStyle = {

“color”: “#ff0000”, //warna yang akan diaplikasikan

“weight”: 3, //ketebalan

“opacity”: 0.5

};

Memanggil data GeoJSON dan Menerapkan Styel Warna pada Layer

Jika Anda memiliki data GeoJSON maka Anda dapat menampilkan data GeoJSON tersebut di LeafletJS, adalah salah satu fitur paling umum, terutama kalau kamu ingin menampilkan batas wilayah, jalur, atau titik-titik dari file/dataset GeoJSON.

Berikut adalah contoh potongan kode untuk menampilkan data GeoJSON.

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

Secara keseluruhan potongan kode terlihat 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 />"));
            }
        }
        //memanggil data GeoJSON
        var jsonTest = new L.GeoJSON.AJAX(["data/yogyakarta.geojson"],{onEachFeature:popUp,style:myStyle}).addTo(map);
    </script>
</body>
</html>

 

Selamat! Anda telah berhasil menyelesaikan tutorial WebGIS menggunakan LeafletJS. Kini Anda sudah bisa menampilkan peta yang memuat data GeoJSON, serta memberikan style warna pada layer. Ini adalah langkah awal menuju pengembangan aplikasi peta berbasis web yang lebih kompleks dan menarik.

Tutorial WebGIS Sederhana Menggunakan LeafletJS dan GeoJSON

Dengan selesainya tutorial ini, maka pengguna telah berhasil memahami dan menerapkan dasar-dasar pembuatan aplikasi WebGIS menggunakan LeafletJS. Langkah-langkah yang telah dilakukan mencakup pemuatan data GeoJSON, serta penerapan style warna pada layer peta. Diharapkan tutorial ini dapat bermanfaat dan menjadi fondasi dalam pengembangan aplikasi peta interaktif yang lebih kompleks dan sesuai kebutuhan di masa mendatang. Semoga bermanfaat dan sampai jumpa di tutorial berikutnya!

RELATED ARTICLESMORE FROM AUTHOR