Pada dasarnya cara membuat lingkaran dan persegi panjang di Leaflet JS mirip seperti cara membuat marker seperti tutorial sebelumnya. Pada saat membuat marker kita menggunakan L.Marker sedangkan saat membuat lingkaran kita menggunakan L.circle, dan menggunakan L.rectangle untuk membuat persegi panjang.
Lingkaran (Circle) di Leaflet JS
Berikut contoh kode untuk membuat lingkaran:
L.circle([[-6.2008024,106.830451,12, 400,{color:'yellow',opacity:1,fillColor: 'blue',fillOpacity:.4}).addTo(map);Penjelasan kode:
L.circle= Method untuk membuat lingkaran;
[-6.2008024,106.830451,12= titik pusat lingkaran;
400=Radius lingkaran(m)
Berikut Kode lengkapnya:
<!DOCTYPE html> <html> <head> <title>Leaflet Web Map</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> #map { width: 960px; height:500px; } </style> </head> <body> <h1>Peta Leaflet Pertama ku</h1> <div id="map"></div> <script> var map = L.map('map',{ center: [-6.2008024,106.830451,12], zoom: 15 }); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.circle([[-6.2008024,106.830451,12, 400,{color:'yellow',opacity:1,fillColor: 'blue',fillOpacity:.4}).addTo(map); </script> </body> </html>
Kalian juga bisa menambahkan . bindPopup di L.circle:
L.circle([[-6.2008024,106.830451,12, 400,{color:'yellow',opacity:1,fillColor: 'blue',fillOpacity:.4}).bindPopup('Belajar Leaflet JS di DosenIT.com').addTo(map);Persegi Panjang di Leaflet JS
Berikut contoh kode untuk membuat persegi panjang:
var bounds = [[-6.2008024,106.830451,12], [-6.202224,106.820]];
L.rectangle(bounds, {color: "red", weight: 1}). addTo(map);Penjelasan kode:
Pertama kita buat dulu batasan atau titik luar untuk persegi panjang yang akan dibuat. Seperti pada contoh kita memberi nama bounds untuk titik luar tersebut, setelah itu kita gunakan L.rectangle untuk membuat persegi panjang dengan memanggil bounds sebagai titik luar atau batasannya.
Kode lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</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>
#map {
width: 960px;
height:500px;
}
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [-6.2008024,106.830451,12],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var bounds = [[-6.2008024,106.830451,12], [-6.202224,106.820]];
L.rectangle(bounds, {color: "red", weight: 1}). addTo(map);
</script>
</body>
</html>Kalian juga bisa menambahkan . bindPopup di L.rectangle:
L.rectangle(bounds, {color: "red", weight: 1}).bindPopup('Belajar Leaflet JS di DosenIT.com').addTo(map);Sampai disini dulu tutorial singkat ini, tutorial berikutnya akan membahas Polygon dan Polyline di leaflet JS.
