cara menghitung luas area di google maps api

Cara Menghitung Luas Area di Google Maps API

Pada artikel ini saya akan membahas tentang cara menghitung luas area di Google Maps API. Area pada Google Maps API yang kita maksud adalah Polygon yang berfungsi untuk menampilkan suatu area yang terdiri dari array yang memuat beberapa titik koordinat.

Menghitung Luas Area di Google Maps

Pada contoh kasus kali ini saya akan menggunakan sebuah library khusus yaitu Turf.js. Turf.js adalah sebuah library javascript yang khusus digunakan untuk analisis pada geospasial.

Salah satu fitur pada Turf.js yang akan kita gunakan pada tutorial ini adalah untuk menghitung luas polygon yang ada di dalam peta Google Maps.

Sebagai contoh, saya akan membuat sebuah Polygon di wilayah Bojongsoang, Bandung. Output yang saya inginkan adalah luas area dari Polygon yang saya buat dengan format hektar.

Menampilkan Peta Google Maps

Pertama, kita buat terlebih dahulu halaman untuk menampilkan peta Google Maps seperti pada kode berikut.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Menghitung Luas Area Pada Google Maps</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: -6.979, lng: 107.641}
        });
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=API-KEY-KAMU&callback=initMap"></script>
  </body>
</html>

Untuk mendapatkan API Key kamu dapat mengakses Google Console API dan mengaktifkan Google Maps API untuk Javascript. Perlu diperhatikan bahwa sekarang terdapat kebijakan baru pada Google Maps yang mewajibkan kita untuk memasukan info penagihan melalui kartu kredit.

Kita masih bisa menggunakan Google Maps API tanpa memasukkan info penagihan namun peta yang akan tampil pada halaman web kita akan tertutup dengan watermark khusus.

Setelah kita membuat halaman untuk menampilkan peta Google Maps sekarang kita buat sebuah array berisi koordinat yang nantinya akan kita gunakan untuk membuat polygon pada Google Maps.

var coord = [
              [-6.973,107.636],
              [-6.973,107.636],
              [-6.980,107.634],
              [-6.986,107.645],
              [-6.988,107.652],
              [-6.973, 107.636]
            ];

Polygon diatas akan menampilkan sebuah area pada peta, yang akan kita hitung luasnya. Untuk melakukan ini kita akan menggunakan library dari Turf.js. Kita tambahkan library tersebut pada halaman peta yang sudah kita buat seperti berikut

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Menghitung Luas Area Pada Google Maps</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  </head>

Setelah itu kita buat sebuah object polygon dengan standar format dari Turf.js seperti dibawah ini

function initMap() {
  // membuat sebuah map dengan koordinat tertentu
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -6.979, lng: 107.641}
  });

  // buat sebuah array polygon
  var coord = [
    [-6.973,107.636],
    [-6.973,107.636],
    [-6.980,107.634],
    [-6.986,107.645],
    [-6.988,107.652],
    [-6.973,107.636]
  ];

  // inisiasi polygon dengan turf.js
  var turf_polygon = turf.polygon([coord]);
}

Setelah itu kita gunakan method dari Turf.js untuk menghitung luas area di Google Maps untuk polygon yang sudah kita konversi ke format Turf.js.

// inisiasi polygon dengan turf.js
var turf_polygon = turf.polygon([coord]);

// hitung luas area pada polygon
var turf_area = turf.area(turf_polygon);

Turf.js akan secara otomatis menghitung luas area pada objek Polygon tersebut.

Menampilkan Polygon di Google Maps

Sekarang kita akan menampilkan polygon di Google Maps dengan cara mengkonversikan array polygon yang kita buat menjadi format standar Google Maps.

function initMap() {
  // membuat sebuah map dengan koordinat tertentu
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: -6.979,
      lng: 107.641
    }
  });

  // buat sebuah array polygon
  var coord = [
    [-6.973, 107.636],
    [-6.973, 107.636],
    [-6.980, 107.634],
    [-6.986, 107.645],
    [-6.988, 107.652],
    [-6.973, 107.636]
  ];

  // inisiasi polygon dengan turf.js
  var turf_polygon = turf.polygon([coord]);

  // hitung luas area pada polygon
  var turf_area = turf.area(turf_polygon);

  // buat array baru
  var points = [];

  // konversi array polygon agar sesuai dengan standar format Google Maps API
  for (var i = 0; i < coord.length; i++) {
    points.push({
      lat: coord[i][0],
      lng: coord[i][1]
    });
  }

  // buat polygon dengan Google Maps API menggunakan array yang sudah kita buat
  var g_polygon = new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  // tampilkan polygon pada peta
  g_polygon.setMap(map);
}

Langkah terakhir, kita tinggal membulatkan hasil kalkulasi dari Turf.js. Hasil output dari perhitungan tersebut menggunakan satuan meter persegi. Kita akan mengkonversi hasil tersebut menjadi satuan hektar dengan rumus perhitungan ha = m2 / 10000.

function initMap() {
  // membuat sebuah map dengan koordinat tertentu
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: -6.979,
      lng: 107.641
    }
  });

  // buat sebuah array polygon
  var coord = [
    [-6.973, 107.636],
    [-6.973, 107.636],
    [-6.980, 107.634],
    [-6.986, 107.645],
    [-6.988, 107.652],
    [-6.973, 107.636]
  ];

  // inisiasi polygon dengan turf.js
  var turf_polygon = turf.polygon([coord]);

  // hitung luas area pada polygon
  var turf_area = turf.area(turf_polygon);

  // buat array baru
  var points = [];

  // konversi array polygon agar sesuai dengan standar format Google Maps API
  for (var i = 0; i < coord.length; i++) {
    points.push({
      lat: coord[i][0],
      lng: coord[i][1]
    });
  }

  // buat polygon dengan Google Maps API menggunakan array yang sudah kita buat
  var g_polygon = new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  // tampilkan polygon pada peta
  g_polygon.setMap(map);

  // ketika polygon diklik, tampilkan output berupa luas area.
  g_polygon.addListener('click', function () {
    if ((turf_area / 10000).toFixed(2) <= 1) {
      alert('Luas Area : ' + (turf_area).toFixed(2) + ' m2')
    } else {
      alert('Luas Area : ' + (turf_area / 10000).toFixed(2) + ' ha')
    }
  });
}

Dengan kode diatas,maka output hasil dari cara menghitung luas area di Google Maps API adalah adalah sebagai berikut

cara menghitung luas area di google maps api output
cara menghitung luas area di google maps api output

Sekian tutorial dari saya tentang cara menghitung luas area di Google Maps API, kamu bisa melihat tutorial Google Maps di blog ini sebagai referensi.

Silahkan dicoba dan semoga bermanfaat.

Tinggalkan komentar