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
1. Persiapan Halaman
<!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
<script>
var mymap = L.map('mapid').setView([-6.2087634, 106.845599], 13);
</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 © <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>
![]() |
Hasil Peta digital Jakarta |
3. Menambahkan Popups pada Peta
// 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);
![]() |
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/.
<!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 © <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>
om, kalo bikin peta hartakarun bisa gak om pake begituan?
ReplyDeleteBisa om hehehe, coba aja klo gk percaya... Ada api-nya
Delete