Layer Peta Panas

1. Ringkasan
2. Memuat pustaka visualisasi
3. Menambahkan Titik Data Berbobot
4. Menyesuaikan Layer Peta Panas

Layer Peta Panas menyediakan rendering peta panas pada klien.

Ringkasan

Peta panas adalah visualisasi yang digunakan untuk menggambarkan intensitas data pada titik-titik geografis. Bila Layer Peta Panas diaktifkan, overlay yang berwarna akan muncul di atas peta. Secara default, area yang berintensitas lebih tinggi akan berwarna merah, dan area yang berintensitas lebih rendah akan tampak hijau.

Google Maps JavaScript API bisa merender data peta panas pada klien melalui Layer Peta Panas, atau server-side melalui Fusion Table. Beberapa perbedaan utama antara kedua metode tersebut adalah:

Layer Peta Panas	Layer Fusion Table
Titik data berjumlah besar bisa mengakibatkan kinerja berkurang.	Semakin banyak titik data, semakin kecil dampaknya pada kinerja.
Mampu menyesuaikan penampilan peta panas dengan mengubah opsi seperti: gradien warna, radius titik data, dan intensitas setiap titik data.	Tidak mampu menyesuaikan penampilan peta panas.
Mampu mengontrol apakah data peta panas akan menghilang pada tingkat zoom yang lebih tinggi atau tidak.	Semua data peta panas akan menghilang saat Anda memperbesar tampilan.
Data bisa disimpan bersama HTML Anda, disimpan di server, atau dihitung sambil-jalan. Data bisa diubah pada waktu proses.	Semua data harus disimpan dalam Fusion Table. Data sulit diubah pada waktu proses.

Memuat pustaka visualisasi

Layer Peta Panas merupakan bagian dari pustaka google.maps.visualization, dan tidak dimuat secara default. Kelas Visualization adalah pustaka mandiri yang terpisah dari kode Google Maps JavaScript API utama. Untuk menggunakan fungsi yang ada dalam pustaka ini, Anda harus memuatnya terlebih dulu menggunakan parameter libraries di URL bootstrap Maps JavaScript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Menambahkan Layer Peta Panas

Untuk menambahkan Layer Peta Panas, terlebih dahulu Anda harus membuat objek HeatmapLayer baru, dan melengkapinya dengan data geografis dalam bentuk larik atau objek MVCArray[]. Data bisa berupa objek LatLng atau objek WeightedLocation. Setelah membuat instance objek HeatmapLayer, tambahkan ke peta dengan memanggil metode setMap().

Contoh berikut menambahkan 14 titik data ke peta San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Menambahkan Titik Data Berbobot

Sebuah peta panas bisa merender objek LatLng atau WeightedLocation, atau kombinasi keduanya. Kedua objek mewakili satu titik data pada peta, namun objek WeightedLocation memungkinkan Anda menetapkan bobot titik data tersebut. Menerapkan bobot ke titik data akan menyebabkan WeightedLocation dirender dengan intensitas lebih besar daripada objek LatLng sederhana. Bobot merupakan skala linier, yang setiap objek LatLng-nya memiliki bobot implisit 1 - menambahkan satu WeightedLocation dari {location: new google.maps.LatLng(37.782, -122.441), weight: 3} akan sama efeknya dengan menambahkan google.maps.LatLng(37.782, -122.441) tiga kali. Anda bisa mencampur objek weightedLocation dan LatLng dalam satu larik.

Penggunaan objek WeightedLocation sebagai pengganti LatLng bisa berguna saat:

• Menambahkan sejumlah besar data pada satu lokasi. Merender satu objek WeightedLocation berbobot 1000 akan lebih cepat daripada merender 1000 objek LatLng.
• Menerapkan penekanan pada data Anda berdasarkan nilai-nilai arbitrary. Misalnya, Anda bisa menggunakan objek LatLng saat merencanakan data gempa, namun Anda mungkin perlu menggunakan WeightedLocation untuk mengukur kekuatan setiap gempa pada skala richter.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Menyesuaikan Layer Peta Panas

Anda bisa menyesuaikan cara merender peta panas dengan opsi peta panas berikut ini. Lihat dokumentasi HeatmapLayerOptions untuk informasi selengkapnya.

• dissipating: Menetapkan apakah peta panas akan menghilang saat diperbesar. Bila disipasi bernilai false, radius pengaruhnya akan bertambah sesuai tingkat zoom untuk memastikan intensitas warna terjaga pada lokasi geografis yang diberikan. Default-nya adalah false.
• gradient: Warna gradien peta panas, ditetapkan sebagai larik string warna CSS. Semua warna CSS3 — termasuk RGBA — didukung kecuali untuk warna tambahan yang telah dinamai dan nilai-nilai HSL(A).
• maxIntensity: Intensitas maksimum peta panas. Secara default, warna peta panas diskalakan secara dinamis sesuai dengan konsentrasi titik terbanyak pada piksel tertentu di peta. Properti ini memungkinkan Anda menetapkan nilai maksimum tetap. Mengatur intensitas maksimum bisa membantu bila kumpulan data Anda berisi beberapa outlier dengan intensitas yang biasanya tidak tinggi.
• radius: Radius pengaruh untuk setiap titik data, dalam piksel.
• opacity: Opasitas peta panas, dinyatakan berupa angka antara 0 dan 1.

Contoh di bawah ini menampilkan beberapa opsi penyesuaian yang tersedia.

Aplikasi contoh mungkin tidak tersedia di region Anda.

Lihat Contoh Layer Peta Panas