Assalamualaikum Wr. Wb. salam sejahtera bagi kita semua. halo sahabat itgenic pada pagi hari ini cuaca sangat sejuk sekali. yukk kita awali pagi ini dengan semangat dan niat untuk belajar pemrograman. pada kesempatan ini, saya akan memberikan tutorial tentang Cara Menampilkan Peta dengan Leaflet JS di Localhost sahabat sudah tahu apa itu leaflet js ?. Leaflet js adalah sebuah pustaka javascript open source yang digunakan untuk menampilkan peta berbasis aplikasi web. Pertama kali dirilis pada tahun 2011. Diciptakan oleh Vladimir Agafonkin
Yukk simak tata Cara Menampilkan Peta dengan Leaflet JS di Localhost :
Aplikasi yang dibutuhkan :
1.Text Editor (Visual Studio Code, Sublime, Atom, dll)
2. XAMPP
3. Akun Mapbox (Token untuk leaflet js)
Cara menampilkan Peta di localhost :
1. Pastikan xampp (Apache web service) sudah berjalan
2. Download leaflet js di situs resminya yaitu https://leafletjs.com/
3. Buat folder dan beri nama di dalam folder htdocs. Contoh saya yaitu peta
Windows : c:\\xampp\htdocs
Linux : /opt/lampp/htdocs
4. Ekstrak File Leaflet JS dari hasil download ke dalam folder htdocs/peta. Sekarang isi file leaflet css dan js berada di htdocs/peta/leaflet
5. Setelah di ekstrak, sekarang buka text editor lalu buat struktur dasar html
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
[/html]
6. Include file css dan js leaflet ke dalam html
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<!– Make sure you put this AFTER Leaflet’s CSS –>
<script src="leaflet/leaflet.js"></script>
</head>
<body>
</body>
</html>
[/html]
Catatan :
terdapat alamat path di href dan src. Itu merupakan lokasi dimana file leaflet.css dan leaflet.js berada. Contoh, leaflet/leaflet.css yang berarti lokasi masuk ke dalam folder leaflet dan menginclude file css.
7. Sekarang kita memasukkan element div di dalam body yang digunakan untuk menampilkan peta dan beri juga id. Disini saya beri id dengan nama mapid
[html]
<body>
<div id="mapid"></div>
</body>
[/html]
8. lalu, kita atur tinggi dan lebar peta. Disini saya menggunakan css secara inline
[html]
<body>
<div id="mapid" style="height:100vh;"></div>
</body>
[/html]
9. Dibawah tag div buatlah program map options. Digunakan untuk membuat posisi lokasi peta
[html]
<body>
<div id="mapid" style="height:100vh;"></div>
<script>
var mapOptions = {
center: [-6.4081,108.2828],
zoom: 13
}
</script>
</body>
[/html]
10. Membuat objek peta dan menampilkannya di tag html yang ber id = “mapid”
[html]
<body>
<div id="mapid" style="height:100vh;"></div>
<script>
var mapOptions = {
center: [-6.4081,108.2828],
zoom: 13
}
var mapid = new L.map(‘mapid’, mapOptions);
</script>
</body>
[/html]
11. Membuat layer peta dan menampilkan marker serta pop up marker di peta
[html]
<body>
<div id="mapid" style="height:100vh;"></div>
<script>
var mapOptions = {
center: [-6.346515, 108.322556],
zoom: 13
}
var mapid = new L.map(‘mapid’, mapOptions);
var marker = L.marker([-6.346515, 108.322556]).addTo(mapid);
marker.bindPopup("<b>itgenic</b><br>Perumahan Kepandean Regency Blok D No.20, Kepandean, Kec. Indramayu, Kabupaten Indramayu, Jawa Barat 45214").openPopup();
L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}’, {
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: 18,
id: ‘mapbox.streets’,
accessToken: ‘pk.eyJ1IjoicGF4aXRvdDE5OSIsImEiOiJja2Jmenp4M3MxMHA1MnhvNXl1cDdvaDQxIn0.qC-z0-WmnyfnWC8Yo_mQMg’
}).addTo(mapid);
</script>
</body>
[/html]
Catatan : untuk center dan marker kalian bisa ganti koordinatnya. Untuk mendapatkan koordinat tempat gunakan open street maps atau google maps
Source Code penuh :
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<!– Make sure you put this AFTER Leaflet’s CSS –>
<script src="leaflet/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="height:100vh;"></div>
<script>
var mapOptions = {
center: [-6.346515, 108.322556],
zoom: 13
}
var mapid = new L.map(‘mapid’, mapOptions);
var marker = L.marker([-6.346515, 108.322556]).addTo(mapid);
marker.bindPopup("<b>itgenic</b><br>Perumahan Kepandean Regency Blok D No.20, Kepandean, Kec. Indramayu, Kabupaten Indramayu, Jawa Barat 45214").openPopup();
L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}’, {
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: 18,
id: ‘mapbox.streets’,
accessToken: ‘pk.eyJ1IjoicGF4aXRvdDE5OSIsImEiOiJja2Jmenp4M3MxMHA1MnhvNXl1cDdvaDQxIn0.qC-z0-WmnyfnWC8Yo_mQMg’
}).addTo(mapid);
</script>
</body>
</html>
[/html]
setelah itu lalu buka browser ketik url localhost klik folder peta disitu akan ditampilkan petanya
Demikian tutorial Cara Menampilkan Peta dengan Leaflet JS di Localhost semoga bermanfaat dan jangan lupa jika artikel ini bermanfaat. mohon di share ke yang lain ya biar berkah. By. Fuad / Editor. Ilmi