Press "Enter" to skip to content

Cara Menghitung Luas Area di Google Maps API

Pada artikel ini saya akan membahas tutorial Google Maps 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.

Tutorial Google Maps – Menghitung Luas Area di Google Maps

Studi kasus kali ini akan melibatkan beberapa aktivitas yaitu menampilkan peta Google Maps, menghitung luas area pada Polygon dan menampilkan polygon di Google Maps.

Untuk menghitung luas area di Google Maps Pada studi kasus 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 lalu menampilkan polygon di Google Maps beserta informasi luas area tersebut.

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 untuk menampilkan peta Google Maps 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 dan menampilkan polygon di 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 sebagai berikut

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

Sekian tutorial Google Maps 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.

One Comment

  1. Yanto Yanto Januari 27, 2020

    Saya mencoba mengukur dengan mendapatkan array dari polygon yang saya buat dengan DrawingManager.
    koordinat sudah saya dapat, akan tetapi dengan isi Array [(lat1,lng1),(lat2,Long),dst..)
    ada simbol ( ) “kurung buka tutup” di dalam Array saya sehingga saya tidak bisa mengkonversi luas area dengan turf.js.
    bagaimana mendapatkan array dalam bentuk normal => Array [a,b,c,d,dst..]
    karena turf.js tidak bisa mengkonversi hasil dari koordinat yang saya dapat dari xpath =event.overlay.getPath().getArray();

    Mohon bantuannya,

    ini code saya:

    google.maps.event.addListener(drawingManager, ‘overlaycomplete’, function(event) {
    var encodedPath = google.maps.geometry.encoding.encodePath(event.overlay.getPath());
    console.log(encodedPath);
    document.getElementById(“koordinat”).value =encodedPath;
    xpath =event.overlay.getPath().getArray();

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

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

    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')
    }

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *