Tutorial Leaflet sebelumnya kita hanya menambahkan tile atau peta dasar pada peta web, sekarang kita akan mencoba menambahkan objek lain seperti, titik, lingkaran, dan poligon.
Membuat titik
Untuk membuat titik tinggal tambahkan
var marker = L.marker([-7.77, 110.37]).addTo(map);
untuk membuat lingkaran caranya sama dengan membuat titik, hanya berbeda dalam menentukan radiusnya dan kita juga dapat mengatur warna dari lingkaran.
var circle = L.circle([-7.78, 110.39], 500, {
color: ‘red’,
fillColor: ‘#f03’,
fillOpacity: 0.5
}).addTo(map);
Menambahkan polygon juga hampir sama,
var polygon = L.polygon([
[-7.76376, 110.37],
[-7.76572, 110.37],
[-7.77325, 110.37],
[-7.77563, 110.37],
[-7.77661, 110.38],
[-7.76844, 110.38]
]).addTo(map);
Menampilkan Popup pada objek.
Popup digunakan jika kita ingin menampilkan sebuah informasi dari objek. Leaflet dapat melakukannya dengan sederhana, seperti di bawah.
marker.bindPopup(“Assalamualaikum!
Saya titik.”).openPopup();
circle.bindPopup(“Saya Lingkaran.”);
polygon.bindPopup(“Saya Polygon.”);
bindPopup digunakan untuk memunculkan popup jika kita meng-klik objek, dan openPopup digunakan untuk memunculkan popup secara langsung ketika kita membuka web.
Popup juga dapat ditampilkan dalam bentuk layer, jika kita ingin memunculkan popup tapi tidak pada objek.
var popup = L.popup()
.setLatLng([-7.75661, 110.39])
.setContent(“Saya popup.”)
.openOn(map);
Kita menggunakan openOn dari pada addTo karena popup akan menutup secara otomatis jika kita membuka popup pada objek lain.
Sekarang jika kita ingin memunculkan lokasi koordinat kita, yang berfungsi sebagai penanda, maka kita dapat memunculkan koordinat lokasi ketika kita mengklik pada peta, maka kita dapat menghunakan onMapClick
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent(“Anda mengklik peta pada koordinat ” + e.latlng.toString())
.openOn(map);
}
map.on(‘click’, onMapClick);
Klik disini untuk mengetahui peta secara keseluruhan.
Sumber : Leafletjs.com
*** SEMOGA BERMANFAAT ***
