Apa itu Polygon?
Polygon adalah adalah geometri yang membentuk luasan, sehingga geometri ini umumnya digunakan untuk merepresentasikan objek-objek yang memiliki luasan seperti: badan air, desa, bangunan, persil tanah, petak sawah dan lain sebagainya. Pada dasarnya geometri polygon terdiiri dari titik-titik pembentuk polyline. Namun pada polygon titik awal dan titik akhir sama, sehingga membentuk polyline tertutup.
Pada posting sebelumnya telah dibahas cara membuat polyline pada google map, tentu ada yang bertanya bagaimana membuat polygon?
Membuat Polygon di Google Map
Untuk membuat polygon hampir sama dengan polyline, namun di sini yang dipanggil adalah objek polygon. Berikut penggalan kode untuk membuat objek polygon.
var polygon = new google.maps.Polygon({
path: list objek koordinat,
strokeColor:warna garis polygon
strokeOpacity:transparansi garis
strokeWeight:lebar garis
fillColor:warna polygon
fillOpacity:transparansi polygon
});
Pada penggalan kode di atas dapat dilihat struktur kode untuk membuat polygon hampir sama dengan polyline dengan dua properti tambahan yaitu:
- fillColor: untuk menentukan warna polygon
- fillOpacity: untuk mengatur transparansi polygon dengan skala 0-1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width:100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(4.027433,97.267278),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
var blang=new google.maps.LatLng(4.001778,97.343417);
var bna=new google.maps.LatLng(5.541320,95.372996);
var pidie=new google.maps.LatLng(5.379189,95.955742);
var rute_terbang=[blang,bna,pidie];
var poly=new google.maps.Polygon({
path:rute_terbang,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
poly.setMap(map);
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
 |
| Gambar 1. Tampilan polygon pada google map |
Demikianlah tutorial singkat tentang membuat polygon pada google map. Dokumentasi lengkap dapat ditemukan di situs google developer. Semoga bermanfaat.
