Tutorial Leaflet #2: Menampilkan Multiple Marker pada Peta

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/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.6.0/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   Gagas Sangga Pratama Sabtu, 08 Agustus 2020 194 View Website

Komentar
grinLOLcheesesmilewinksmirkrolleyesbig surprise
tongue laughohhgrrroh ohdownerred facesickshut eye
hmmmmadangrykisscool smirkcool mad