Tutorial Leaflet #2: Menampilkan Multiple Marker pada Peta
Masih tentang Maps pada LeafletJS, di artikel sebelumnya saya sudah memberikan tutorial Cara Menampilkan Peta pada LeafletJS sehingga kali ini saya akan memberikan tutorial bagaimana cara menampilkan multiple marker pada maps LeafletJS.
Multiple marker pada maps ini sangat berguna ketika kita akan membuat Website berbasis GIS (Geographic Information System) dimana marker akan muncul dengan jumlah lebih dari 1 dalam sekali membuka website
Tutorial tentang LeafletJS ini akan berkelanjutan sampai kita bisa mengintegrasikan LeafletJS dengan CodeIgniter, untuk menampilkan multiple marker kita membutuhkan titik koordinat sebanyak marker yang akan kita tampilkan. Setelah membaca artikel sebelumnya, kita tinggal menambahkan kode dibawah ini didalam tag script sebelum </body>
L.marker([-6.859829, 109.378317]).bindPopup('Pantai Widuri').addTo(mymap);
L.marker([-6.869374, 109.394864]).bindPopup('Nilla Collection').addTo(mymap);
L.marker([-6.890105, 109.380705]).bindPopup('Alun-Alun Pemalang').addTo(mymap);
L.marker([-6.888103, 109.386499]).bindPopup('Hotel Kencana Pemalang').addTo(mymap);
Sehingga ketika kita satukan dengan script pada artikel sebelumnya akan menjadi seperti berikut.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Marker LeafletJS</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
body {
padding: 0; margin: 0;
}
#map {
height: 100%; width: 100vw;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mymap = L.map('map', { zoomControl: false }).setView([-6.869544, 109.3948958], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors.',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker([-6.859829, 109.378317]).bindPopup('Pantai Widuri').addTo(mymap);
L.marker([-6.869374, 109.394864]).bindPopup('Nilla Collection').addTo(mymap);
L.marker([-6.890105, 109.380705]).bindPopup('Alun-Alun Pemalang').addTo(mymap);
L.marker([-6.888103, 109.386499]).bindPopup('Hotel Kencana Pemalang').addTo(mymap);
</script>
</body>
</html>
Mungkin cukup sekian artikel tentang Cara Menampilkan Multiple Marker pada LeafletJS, jika bermanfaat silahkan share keteman-teman kalian supaya mereka tau apa yang kalian tau. Jika ada kesulitan silahkan tinggalkan komentar.
Gagas Sangga Pratama
Sabtu, 08 Agustus 2020
3.652 View
Website