Cara Membuat Polygon Peta Library Leaflet

republic code – Polygon merupakan bentuk geometri lintasan luas, umunya geometri ini untuk mempresentasikan objek – objek yang memiliki luas luasan seperti:

badan air, desa, bangunan, persil tanah, petak sawah dan lain sebagainya.

Pada dasarnya geometri polygon terdiiri dari titik-titik pembentuk polyline.

Cara Membuat Polygon peta menggunakan libarary leaflet js, dengan cara mengambil titik demi titik untuk membuat suatu bidang wilayah.

sebelumnya kita sudah membuat sebuah peta dengan marker

baca juga Membuat Peta Dengan Library Leaflet Js agar tidak ketinggalan tutorial

dan juga kita sebelumnya sudah membuat marker pada sebuah peta

baca juga Cara menambahkan marker pada sebuah peta dengan library leaflet JS

kita akan mengambil code documnentation dari leaflet link https://leafletjs.com/reference-1.7.1.html#polygon

code ini disi dengan titik titik koordinat latitude dan longitude, sehingga menjadi suatu bentuk.

var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

bagin code untuk menambahkan dan menampilkan polygon

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

dan bagian code ini untuk melakukan zoom peta

map.fitBounds(polygon.getBounds());

pembuatan polygon pada nyatanya, turun kelapangan untuk menandai titik tertentu dengan GPS.

untuk pembelajaran kali ini, penulis menggunakan google maps, untuk mencari titik latitude dan longitude.

sebagai asumsi telah turun kelapangan, untuk mengambil titik.

sebagai conoth dan studi kasus penulis akan membuat sebuah polygon kota pelaihari.

klik sebuah titik untuk memulai

ambil latitude dan longitude yan muncul, ketika klik sebuah titik

hasil titik yang telah dikumpulkan

-3.722951, 114.641599
-3.707026, 114.653919
-3.700517, 114.669711
-3.700517, 114.680011
-3.703258, 114.687908
-3.702915, 114.724300
-3.705313, 114.733226
-3.705313, 114.760692
-3.699831, 114.777515
-3.683386, 114.796054
-3.679617, 114.807384
-3.679275, 114.819400
-3.676534, 114.824893
-3.663857, 114.834163
-3.658032, 114.851672
-3.660431, 114.851672
-3.674478, 114.844463
-3.682701, 114.843433
-3.689211, 114.840343
-3.708054, 114.834850
-3.716619, 114.826267
-3.724499, 114.813907
-3.726897, 114.820087
-3.727582, 114.825923
-3.728917, 114.828019
-3.728917, 114.835717
-3.730454, 114.837256
-3.733833, 114.833869
-3.756263, 114.825247
-3.759950, 114.825247
-3.771012, 114.812315
-3.785759, 114.806772
-3.789139, 114.788297
-3.796099, 114.789531
-3.796441, 114.803607
-3.803635, 114.803951
-3.805691, 114.791934
-3.810829, 114.792964
-3.814597, 114.816997
-3.819051, 114.818713
-3.825902, 114.814250
-3.830355, 114.814250
-3.835493, 114.807727
-3.828300, 114.799487
-3.831383, 114.793994
-3.858102, 114.797427
-3.860842, 114.802234
-3.872831, 114.811504
-3.877284, 114.803607
-3.885847, 114.798801
-3.921470, 114.785068
-3.902974, 114.758289
-3.894753, 114.734256
-3.893726, 114.720180
-3.885505, 114.694774
-3.888588, 114.686534
-3.878997, 114.686534
-3.868720, 114.691684
-3.815625, 114.692371
-3.798154, 114.674518
-3.742314, 114.660098
-3.726897, 114.650485

masukkan titik yang telah dikumpulkan kedalam code, jadikan titik kedalam sebuah array yang telah didefiniskan pada variabel latlngs sebelumnya.

var latlngs = [
[-3.722951, 114.641599],
[-3.707026, 114.653919],
[-3.700517, 114.669711],
[-3.700517, 114.680011],
[-3.703258, 114.687908],
[-3.702915, 114.724300],
[-3.705313, 114.733226],
[-3.705313, 114.760692],
[-3.699831, 114.777515],
[-3.683386, 114.796054],
[-3.679617, 114.807384],
[-3.679275, 114.819400],
[-3.676534, 114.824893],
[-3.663857, 114.834163],
[-3.658032, 114.851672],
[-3.660431, 114.851672],
[-3.674478, 114.844463],
[-3.682701, 114.843433],
[-3.689211, 114.840343],
[-3.708054, 114.834850],
[-3.716619, 114.826267],
[-3.724499, 114.813907],
[-3.726897, 114.820087],
[-3.727582, 114.825923],
[-3.728917, 114.828019],
[-3.728917, 114.835717],
[-3.730454, 114.837256],
[-3.733833, 114.833869],
[-3.756263, 114.825247],
[-3.759950, 114.825247],
[-3.771012, 114.812315],
[-3.785759, 114.806772],
[-3.789139, 114.788297],
[-3.796099, 114.789531],
[-3.796441, 114.803607],
[-3.803635, 114.803951],
[-3.805691, 114.791934],
[-3.810829, 114.792964],
[-3.814597, 114.816997],
[-3.819051, 114.818713],
[-3.825902, 114.814250],
[-3.830355, 114.814250],
[-3.835493, 114.807727],
[-3.828300, 114.799487],
[-3.831383, 114.793994],
[-3.858102, 114.797427],
[-3.860842, 114.802234],
[-3.872831, 114.811504],
[-3.877284, 114.803607],
[-3.885847, 114.798801],
[-3.921470, 114.785068],
[-3.902974, 114.758289],
[-3.894753, 114.734256],
[-3.893726, 114.720180],
[-3.885505, 114.694774],
[-3.888588, 114.686534],
[-3.878997, 114.686534],
[-3.868720, 114.691684],
[-3.815625, 114.692371],
[-3.798154, 114.674518],
[-3.742314, 114.660098],
[-3.726897, 114.650485],
];

code lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

    <title>Peta</title>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

	var mymap = L.map('mapid').setView([-3.9372941, 114.775563], 10);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

    // create a red polygon from an array of LatLng points
var latlngs = [
[-3.722951, 114.641599],
[-3.707026, 114.653919],
[-3.700517, 114.669711],
[-3.700517, 114.680011],
[-3.703258, 114.687908],
[-3.702915, 114.724300],
[-3.705313, 114.733226],
[-3.705313, 114.760692],
[-3.699831, 114.777515],
[-3.683386, 114.796054],
[-3.679617, 114.807384],
[-3.679275, 114.819400],
[-3.676534, 114.824893],
[-3.663857, 114.834163],
[-3.658032, 114.851672],
[-3.660431, 114.851672],
[-3.674478, 114.844463],
[-3.682701, 114.843433],
[-3.689211, 114.840343],
[-3.708054, 114.834850],
[-3.716619, 114.826267],
[-3.724499, 114.813907],
[-3.726897, 114.820087],
[-3.727582, 114.825923],
[-3.728917, 114.828019],
[-3.728917, 114.835717],
[-3.730454, 114.837256],
[-3.733833, 114.833869],
[-3.756263, 114.825247],
[-3.759950, 114.825247],
[-3.771012, 114.812315],
[-3.785759, 114.806772],
[-3.789139, 114.788297],
[-3.796099, 114.789531],
[-3.796441, 114.803607],
[-3.803635, 114.803951],
[-3.805691, 114.791934],
[-3.810829, 114.792964],
[-3.814597, 114.816997],
[-3.819051, 114.818713],
[-3.825902, 114.814250],
[-3.830355, 114.814250],
[-3.835493, 114.807727],
[-3.828300, 114.799487],
[-3.831383, 114.793994],
[-3.858102, 114.797427],
[-3.860842, 114.802234],
[-3.872831, 114.811504],
[-3.877284, 114.803607],
[-3.885847, 114.798801],
[-3.921470, 114.785068],
[-3.902974, 114.758289],
[-3.894753, 114.734256],
[-3.893726, 114.720180],
[-3.885505, 114.694774],
[-3.888588, 114.686534],
[-3.878997, 114.686534],
[-3.868720, 114.691684],
[-3.815625, 114.692371],
[-3.798154, 114.674518],
[-3.742314, 114.660098],
[-3.726897, 114.650485],
];

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(mymap);

// zoom the map to the polygon
mymap.fitBounds(polygon.getBounds());

    L.marker([-3.8011986,114.7630298]).addTo(mymap);

</script>



</body>
</html>

hasil