Bekerja dengan popups pada leafletjs

apa sih popup itu? popup berupa jendela kecil yang muncul pada saat aktifitas dikerjakan. Pada leaflet biasa popup akan ditampilkan pada saat melakukan klik pada objek di peta. Untuk menggunakan popup dapat menggunakan fungsi .bindPopup(). Sebagai contoh untuk menambahkan popup pada marker dapat menggunakan kode berikut

L.marker([51.513, -0.06]).addTo(map).bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

atau kalian dapat membaginya menjadi beberapa variable untuk dapat bekerja secara optimal, perhatikan kode berikut

var marker = L.marker([51.513, -0.06]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

Kode tersebut akan tetap menampilkan popup pada saat aplikasi dijalan walaupun belum melakukan klik. Untuk tidak menggunakan fungsi tersebut cukup dengan menghapus fungsi .openPopup() dari kode kalian.

Sama seperti maker, pada poligon dan circle juga sama,

circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

Atau kalian bisa menggunakan L.popup() sebagai Layer. Popup ini akan tampil pada kordinat yang telah ditentukan tanpa terhubung ke objek tertentu

var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

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.503, -0.06],13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);
            var marker = L.marker([51.513, -0.06]).addTo(map);
            var circle = L.circle([51.505, -0.09], {
                         color: 'red',
                         fillColor: '#f03',
                         fillOpacity: 0.5,
                         radius: 500
             });
             circle.addTo(map);
             var polygon = L.polygon([
                                     [51.509, -0.08],
                                     [51.503, -0.06],
                                     [51.51, -0.047]
                                     ]);
            polygon.addTo(map);
            
            marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
            circle.bindPopup("I am a circle.");
            polygon.bindPopup("I am a polygon.");

            var popup = L.popup()
                        .setLatLng([51.513, -0.09])
                        .setContent("I am a standalone popup.")
                        .openOn(map);
        </script>
    </body>
</html>

Bekerja dengan popups pada leafletjs

Lainnya

Tinggalkan komentar Batalkan balasan