Panduan dasar leaflet.js

Leaflet memiliki slogan “an open-source JavaScript library for mobile-friendly interactive maps” yang artinya leaflef adalah library JavaScript yang bersifat open source dan ramah pada tampilan seluler.

Secara tampilan leaflet memiliki antarmuka yang menarik, pengkodean yang tidak rumit sama sekali, dan bekerja sangat baik pada flatform dekstop maupun seluler.

leaflet bisa kalian unduh pada situs resminya https://leafletjs.com/ untuk penggunaannya sendiri dapat mengikuti petunjuk pada halaman https://leafletjs.com/examples.html. dengan merujuk halaman example dapat mengikuti panduan berikut.

mengikuti Leaflet Quick Start Guide, kita akan belajar menampilkan peta, membuat marker, mebuat polyline, dan menampilkan popup.

menampilkan peta

Untuk menampilkan peta kalian membutuhkan 2 file yaitu leaflet.css dan leaflet.js, kalian dapat mendownloadnya pada halaman https://leafletjs.com/download.html atau menggunakan CDN.

Jika mendowload leaflet maka gunakan kode berikut

<link rel="stylesheet" href="/path/to/leaflet.css" />

<script src="/path/to/leaflet.js"></script>

dan jika menggunakan CDN

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>

 <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>

kode lengkapnya jika menggunakan CDN seperti pada kode berikut

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--include css-->
        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
            crossorigin=""/>
        <!--include javascript-->
        <script
            src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
            crossorigin=""></script>
        <title>Leaflet Quick Start Guide</title>
    </head>
    <body>
        
    </body>
</html>

untuk menampilkan peta ikuti tiga langkah berikut,

#1. Buat sebuah elemen div dan memasukkan atribut id sebagai penghubung antara css, html dan javascript. Sebagai contoh gunakan nilai dari id adalah map

<div id="map"></div>

#2. Atur tampilan halaman dengan CSS

#map, body { 
                margin: 0 !important;
                padding: 0 !important;
                height: 100vh;
            }

#3. Masukkan kode peta dan mengatur tampilannya ke koordinat geografis. Sebagai contoh kota london sebagai pusatnya

var map = L.map('map').setView([51.505, -0.09], 13);

dan tambahkan layar sebagai antar muka tampilan peta.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

Dan kode lengkapnya adalah sebagai berikut

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--include css-->
        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
            crossorigin=""/>
        <style>
            #map, body { 
                margin: 0 !important;
                padding: 0 !important;
                height: 100vh;
            }
        </style>
        <!--include javascript-->
        <script
            src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
            crossorigin=""></script>
        <title>Leaflet Quick Start Guide</title>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map = L.map('map').setView([51.505, -0.09],13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);
        </script>
    </body>
</html>

pada saat ini peta sudah dapat tampil dengan kota london sebagai pusat dari peta,

Untuk mengubah koordinat pusat peta dapat mengubah nilai Latitude dan Longitude pada peta.

perhatikan baris kode 29

var map = L.map('map').setView([51.505, -0.09], 13);

Nilai 51.505 adalah nilai latitude dan -0.09 adalah nilai longitude. ubah nilai tersebut,

Bagaimana cara mencari nilai Latitude dan Longitude? Untuk permulaan dapat mengunjungi situs https://www.latlong.net/

Gambar berikut adalah mencari nilai latitude dan longitude kota makassar

Ganti nilainya dan lihat perubahannya

Terimakasih sudah berkunjung, selanjutnya bagaimana cara membuat marker. 🙂

Panduan dasar leaflet.js

menampilkan peta

Lainnya

Tinggalkan komentar Batalkan balasan