Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API

Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API. Halo semua, kembali lagi di sahretech. Kali ini kita akan membuat peta digital interaktif berbasis web yang sangat mudah diterapkan dengan menggunakan Leaflet Js, Jadi bukan Google maps ya. Ayo ikuti tutorialnya di bawah ini!.

Leaflet Js

Sebelum kita masuk ke tutorial inti, ada baiknya kita berkenalan dulu dengan leaflet js ini. Apa itu leaflet js?. Diambil dari situs resminya, leaflet js adalah javascript library yang open source, digunakan untuk membangun peta interaktif berbasis web dan mobile. Saat artikel ini ditulis, leaflet js telah merilis versi 1.7.1 pada tanggal 4 september 2020.

Library leaflet js sangatlah ringan, beratnya hanya sekitar 39 kb, jadi sangat cocok digunakan untuk pemula dalam pengembangan aplikasi berbasis GIS. Meski cocok digunakan oleh pemula, bukan berarti leaflet js ini tidak dapat digunakan untuk project skala menengah ke atas loh. Alasannya karena leaflet js memiliki banyak sekali fitur-fitur keren yang dibutuhkan oleh kebanyakan developer seperti:

Tile Layers, WMS
Markers, Popups
vector layers seperti: polylines, polygons, circles, dan rectanges
Image overlays, Geo JSON
Zoom and Pan animation
Attribution, layer switcher, scale

Dan masih banyak yang lainnya. Leaflet js didesain dengan mempertimbangkan kesederhanaan, performa dan penggunan yang mudah. Dapat bekerja di berbagai paltform, dan bisa ditambahkan banyak plugin. Dokumentasinya sangat mudah dan yang paling penting kalian tidak perlu menggunakan tambahan depedensi untuk menggunakannya. Baiklah mungkin cukup segini perkenalan tentang apa itu leaflet js, untuk lebih detailnya kalian bisa melihat pada laman resmi leaflet js ya di https://leafletjs.com/index.html

Pada tutorial kali ini, kita akan membuat peta digital berbasis web dengan menggunakan html dan javascript. Step by stepnya akan mengajarkan kepada kalian bagaimana cara membuat leaflet dasar dan menambahkan popups. Persiapkan code editor dan internet kalian sebelum memulai!

1. Persiapan Halaman

Pertama, buka editor kalian buat halaman index.html, buat struktur html bisasa, dan include leaflet css dan javascript seperti gambar di bawah ini. Persiapan pertama ini digunakan untuk mengambil resource dari server leaflet js.


  	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Membuat Peta</title>

    <!-- leaflet css  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />

    <style>
        /* ukuran peta */
        #mapid {
            height: 500px;
        }
    </style>
</head>

<body>

    <!-- peta akan ditampilkan dengan id = mapid -->
    <div id="mapid"></div>

    <!-- leaflet js  -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</body>

</html>

2. Setting Peta

Kedua, buat tag script lalu inisialisasi leaflet js dan set koordinat di dalam tag script tersebut. Koordinat ini terdiri dari latitude dan longitude. Kalian bisa cari titik koordinat ini sesuai dengan keinginan kalian dengan cara masuk ke google maps cari lokasi, lalu klik kanan pada peta dan pilih ada apa di sini? kemudian tinggal kalian copy saja titik koordinat yang muncul pada dialog popups. dan masukkan ke dalam codigan seperti di bawah ini.


  	<script>
        var mymap = L.map('mapid').setView([-6.2087634, 106.845599], 13);
    </script>

Selanjutnya kita akan menambahkan tile layer dengan menggunakan mapbox api pada peta yang kita buat. Kalian perlu mendaftar di mapbox.com untuk mendapatkan access_token. Access_token ini akan dimasukkan ke dalam url seperti codingan di bawah ini.

Selain itu kita dapat menambahkan atribusi, maksimal zoom, jenis peta yang digunakan, tilesize, dan lain sebagainya. Hasil codingannya akan tampak seperti di bawah ini jika digabungkan dengan codingan pada step sebelumnya. Copy paste script di bawah ini tepat di bawah script inisialisasi peta pada step sebelumnya.


  	<script>
        var mymap = L.map('mapid').setView([-6.2087634, 106.845599], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 20,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'your.mapbox.access.token'
        }).addTo(mymap);
    </script>

Save project kalian, klik kanan pada file yang kalian buat dan jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini.

Hasil Peta digital Jakarta

3. Menambahkan Popups pada Peta

Selanjutnya, kita akan coba bermain-main dengan popups. Popups biasanya digunakan untuk menampilkan pesan informasi pada titik yang diklik. Caranya mudah sekali, kalian perlu menyetting titiknya, lalu set isi kontenya dan memanggil fungsinya untuk bisa digunakan. Ikuti codingannya seperti gambar di bawah ini. Copy paste script di bawah ini dan letakkan tepat di bawah kodingan pada step sebelumnya.


   		// buat variabel berisi fugnsi L.popup 
        var popup = L.popup();

        // buat fungsi popup saat map diklik
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)   
                .setContent("koordinatnya adalah " + e.latlng.toString()) //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

Save project kalian, klik kanan pada file yang akan kalian buat dan jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini.

Hasil Popups Menampilkan Titik Koordinat

kotak popups di atas bisa kalian kreasikan sendiri sesuai dengan keinginan kalian loh, kalian bisa menambahkan html seperti gambar di dalamnya, atau kalian bisa menambahkan bootstrap agar tampilannya menjadi lebih menarik. Bagi yang penasaran dengan fitur-fitur yang ada di leaflet js ini langsung saja mampir ke laman resminya di https://leafletjs.com/examples/quick-start/.

Untuk kodingan lengkapnya dari step pertama sampe cara membuat popups dapat dilihat seperti contoh di bawah ini:


  	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Membuat Peta</title>

    <!-- leaflet css  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />

    <style>
        /* ukuran peta */
        #mapid {
            height: 500px;
        }
    </style>
</head>

<body>

    <!-- peta akan ditampilkan dengan id = mapid -->
    <div id="mapid"></div>

    <!-- leaflet js  -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

    <script>
        var mymap = L.map('mapid').setView([-6.2087634, 106.845599], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmFiaWxjaGVuIiwiYSI6ImNrOWZzeXh5bzA1eTQzZGxpZTQ0cjIxZ2UifQ.1YMI-9pZhxALpQ_7x2MxHw', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 20,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'your.mapbox.access.token'
        }).addTo(mymap);

        
        // buat variabel berisi fugnsi L.popup 
        var popup = L.popup();

        // buat fungsi popup saat map diklik
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)   
                .setContent("koordinatnya adalah " + e.latlng.toString()) //set isi konten yang ingin ditampilkan, kali ini kita akan menampilkan latitude dan longitude
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);
    </script>
</body>

</html>

Ok sekian tutorial Cara Membuat Peta Digital dengan leaflet js, Alternatif Peta Digital tanpa Google Maps Api. kurang lebihnya saya mohon maaf, jika masih ada pembasan yang sulit dipahami silahkan tinggalkan komentar kalian di bawah ini. Sampai jumpa di tutorial pemrograman keren lainnya. Happy Coding. 😃

9 comments:

Romi HidayatOctober 2, 2020 at 1:09 AM
om, kalo bikin peta hartakarun bisa gak om pake begituan?
UnknownFebruary 26, 2021 at 10:46 PM
kalo pop up di munculin gambar foto caranya gimana
NabilFebruary 28, 2021 at 3:11 AM
Coba baca ini mungkin bisa membantu https://www.sahretech.com/2020/11/cara-membuat-aplikasi-input-data-dan.html?m=1
flat blogApril 1, 2021 at 8:47 PM
Untuk membuiat Auto deteksi lokasi gimana mas
PanjiJune 27, 2021 at 7:26 AM
Salam kenal mas,
saya Panji dari Bekasi,
Terima kasih banyak share ilmu dan Source Codenya mas.
ditunggu pembahasan lanjutan soal Leafletnya mas.
hehe menarik dan sangat mengedukasi sekali.

Semoga sehat dan sukses selalu mas.
Aamiin.
UnknownAugust 5, 2021 at 8:19 PM
boleh minta source code nya mas