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

9:20:00 PM 12 komentar
Share:

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. 😃


Label:
Share:

12 comments:

  1. Romi HidayatOctober 2, 2020 at 1:09 AM

    om, kalo bikin peta hartakarun bisa gak om pake begituan?

    ReplyDelete
    Replies
    1. sahretechOctober 2, 2020 at 1:18 AM

      Bisa om hehehe, coba aja klo gk percaya... Ada api-nya

      Delete
  2. UnknownFebruary 26, 2021 at 10:46 PM

    kalo pop up di munculin gambar foto caranya gimana

    ReplyDelete
  3. 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

    ReplyDelete
  4. flat blogApril 1, 2021 at 8:47 PM

    Untuk membuiat Auto deteksi lokasi gimana mas

    ReplyDelete
  5. 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.

    ReplyDelete
    Replies
    1. sahretechJune 27, 2021 at 8:40 AM

      terima kasih atas kunjungannya mas :), senang rasanya tulisan saya bisa membantu orang lain. Oh iya mas, saya juga punya artikel lain tentang leaflet js. Yaitu cara membuat input lokasi dan memasukannya ke database linknya ini : https://www.sahretech.com/2020/11/cara-membuat-aplikasi-input-data-dan.html

      Delete
  6. UnknownAugust 5, 2021 at 8:19 PM

    boleh minta source code nya mas

    ReplyDelete
    Replies
    1. sahretechAugust 6, 2021 at 5:51 AM

      itu di baris-baris terakhir sudah ada source code lengkapnya mas tinggal copas aja terus dijalanin

      Delete
  7. Dede SuryanaFebruary 18, 2022 at 6:29 PM

    bang, aku ada kasus ini, jadi saya pengen nyimpan lokasi saya, tanpa ada form, jadi langsung otomatis berdasarkan klik button

    ReplyDelete
  8. HABIBIE_KURNIAWANFebruary 27, 2022 at 4:02 PM

    om, peta nya kok ga muncul ya om apa accessToken nya wajib diisi dulu om? saya ikuti tutor nya pas udah selesai saya coba run map nya ga muncul om cuma box nya aja apa karena access token nya belum diisi ya om? terimakasih om

    ReplyDelete
    Replies
    1. sahretechFebruary 27, 2022 at 4:19 PM

      iya harus pake access token. Access tokennya pake yang di tutorial aja mas. :)

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Subscribe to: Post Comments ( Atom )