Home » Javascript » Membuat Lingkaran (Circle) Dan Persegi Panjang(Rectangle) Pada Peta Leaflet WebGIS dengan Leaflet #3:

Membuat Lingkaran (Circle) Dan Persegi Panjang(Rectangle) Pada Peta Leaflet WebGIS dengan Leaflet #3:

by Syarifullah Abdi
by Syarifullah Abdi

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/[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>
#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: '&copy; <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/[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>
#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: '&copy; <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.

You may also like