Visualisasi: Geomap

  1. Ringkasan
  2. Contoh
  3. Memuat
  4. Format Data
  5. Opsi Konfigurasi
  6. Metode
  7. Peristiwa
  8. Kebijakan Data
  9. Notes

Ringkasan

Peta geografi adalah peta negara, benua, atau wilayah, dengan warna dan nilai yang ditetapkan ke wilayah tertentu. Nilai ditampilkan sebagai skala warna, dan Anda dapat menentukan teks mengambang opsional untuk wilayah. Peta dirender di browser menggunakan pemutar Flash tersemat. Perhatikan bahwa peta tidak dapat di-scroll atau ditarik, tetapi dapat dikonfigurasi untuk memungkinkan zoom.

Contoh

Kita memiliki dua contoh di sini: satu yang menggunakan gaya tampilan wilayah, dan satu lagi yang menggunakan gaya tampilan penanda.

Contoh Region

Gaya wilayah mengisi seluruh wilayah (biasanya negara) dengan warna yang sesuai dengan nilai yang Anda tetapkan. Tentukan gaya wilayah dengan menetapkan options['dataMode'] = 'regions' dalam kode Anda.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Contoh Penanda

Gaya "penanda" menampilkan lingkaran, berukuran, dan berwarna untuk menunjukkan nilai, di atas wilayah yang Anda tentukan. 

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Memuat

Nama paket google.charts.load adalah "geomap"

  google.charts.load('current', {'packages': ['geomap']});

Nama class visualisasi geomap adalah google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Format Data

Dua format alamat didukung, yang masing-masing mendukung jumlah kolom yang berbeda, dan jenis data yang berbeda untuk setiap kolom. Semua alamat dalam tabel harus menggunakan salah satunya; Anda tidak dapat menggabungkan jenis.

  • Format 1: Lokasi Lintang/Bujur. Format ini hanya berfungsi jika opsi dataMode adalah 'penanda'. Jika format ini digunakan, Anda tidak perlu menyertakan JavaScript Google Maps. Lokasi dimasukkan dalam dua kolom, ditambah dua kolom opsional:
    1. [Angka, Wajib] Lintang. Angka positif adalah utara, angka negatif adalah selatan.
    2. [Angka, Wajib] Bujur. Angka positif adalah timur, angka negatif adalah barat.
    3. [Angka, Opsional] Nilai numerik yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini. Jika kolom 4 digunakan, kolom ini wajib diisi.
    4. [String, Opsional] Teks string tambahan yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini.
  • Format 2: Alamat, nama negara, lokasi nama wilayah, atau kode area metropolitan AS. Format ini berfungsi dengan opsi dataMode yang ditetapkan ke 'penanda' atau 'region'. Lokasi dimasukkan dalam satu kolom, ditambah dua kolom opsional:
    1. [String, Wajib] Lokasi peta. Format berikut diterima:
      • Alamat spesifik (misalnya, "1600 Pennsylvania Ave").
      • Nama negara sebagai string (misalnya, "Inggris"), atau kode ISO-3166 huruf besar atau setara dalam teks bahasa Inggris (misalnya, "GB" atau "Inggris Raya").
      • Nama kode wilayah ISO-3166-2 dalam huruf besar atau padanan teks bahasa Inggrisnya (misalnya, "US-NJ" atau "New Jersey"). Catatan: Region hanya dapat ditentukan jika opsi dataMode ditetapkan ke ' regions'.
      • Kode area metropolitan. Ini adalah kode metro tiga digit yang digunakan untuk menentukan berbagai wilayah; kode AS hanya didukung. Perhatikan bahwa kode ini tidak sama dengan kode area telepon.
    2. [Angka, Opsional] Nilai numerik yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini. Jika kolom 3 digunakan, kolom ini wajib diisi.
    3. [String, Opsional] Teks string tambahan yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini.

Catatan: Peta dapat menampilkan maksimal 400 entri; jika DataTable atau DataView menampung lebih dari 400 baris, hanya 400 entri pertama yang akan ditampilkan. Mode tercepat adalah dataMode='regions' dengan lokasi yang ditetapkan sebagai kode ISO, dan dataMode='markers' dengan kait lintang/bujur. Mode paling lambat adalah dataMode='markers' dengan alamat string.

Penting: DataTable harus menyertakan setiap kolom opsional sebelum kolom yang ingin Anda gunakan. Jadi, misalnya, jika Anda ingin menentukan tabel lintang/bujur, dan hanya ingin menggunakan kolom 1, 2, dan 4, DataTable Anda tetap harus menentukan kolom 3 (meskipun Anda tidak perlu menambahkan nilai apa pun ke kolom tersebut):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Opsi Konfigurasi

Name Jenis Default Deskripsi
region string 'dunia'

Area yang akan ditampilkan di peta. (Area sekitarnya juga akan ditampilkan.) Dapat berupa kode negara (dalam format ISO-3166 huruf besar), atau salah satu string berikut:

  • world - (Seluruh dunia)
  • us_metro - (Amerika Serikat, area metro)
  • 005 - (Amerika Selatan)
  • 013 - (Amerika Tengah)
  • 021 - (Amerika Utara)
  • 002 - (Seluruh Afrika)
  • 017 - (Afrika Tengah)
  • 015 - (Afrika Utara)
  • 018 - (Afrika Selatan)
  • 030 - (Asia Timur)
  • 034 - (Asia Selatan)
  • 035 - (Wilayah Asia/Pasifik)
  • 009 - (Oseania)
  • 145 - (Timur Tengah)
  • 143 - (Asia Tengah)
  • 151 - (Asia Utara)
  • 154 - (Eropa Utara)
  • 155 - (Eropa Barat)
  • 039 - (Eropa Selatan)

Geomap tidak mengaktifkan perilaku scroll atau penarikan, dan hanya membatasi perilaku zoom. Perkecil dasar dapat diaktifkan dengan menyetel properti showZoomOut.
dataMode string 'wilayah'

Cara menampilkan nilai pada peta. Dua nilai didukung:

  • regions - Mewarnai seluruh wilayah dengan warna yang sesuai. Opsi ini tidak dapat digunakan dengan alamat lintang/bujur. Lihat Contoh Wilayah.
  • markers - Menampilkan titik di atas wilayah, dengan warna dan ukuran yang menunjukkan nilai. Lihat Contoh Penanda.
width string '556px' Lebar visualisasi. Jika tidak ada unit yang diberikan, satuan defaultnya adalah piksel.
height string '347px' Ketinggian visualisasi. Jika tidak ada unit yang diberikan, satuan defaultnya adalah piksel.
colors Array angka RGB dalam format 0xRRGGBB [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] Gradien warna untuk ditetapkan ke nilai dalam visualisasi. Anda harus memiliki setidaknya dua nilai; gradien akan mencakup semua nilai Anda, ditambah nilai perantara yang dihitung, dengan warna paling terang sebagai nilai terkecil, dan warna paling gelap sebagai nilai tertinggi.
showLegend boolean true Jika true (benar), tampilkan legenda untuk peta.
showZoomOut boolean false Jika true (benar), tampilkan tombol dengan label yang ditentukan oleh properti zoomOutLabel. Perhatikan bahwa tombol ini tidak melakukan apa pun saat diklik, kecuali menampilkan peristiwa zoomOut. Untuk menangani zoom, tangkap peristiwa ini dan ubah opsi region. Anda hanya dapat menentukan showZoomOut jika opsi region lebih kecil dari tampilan dunia. Salah satu cara untuk mengaktifkan perilaku zoom adalah dengan memproses peristiwa regionClick, mengubah properti region ke wilayah yang sesuai, dan memuat ulang peta.
zoomOutLabel string 'Perkecil' Label untuk tombol zoom.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) Tidak ada Menggambar peta. Dapat ditampilkan sebelum menggambar selesai (lihat peristiwa drawingDone()).
getSelection() Array elemen pemilihan Implementasi getSelection() standar. Elemen yang dipilih adalah baris. Metode ini hanya berfungsi jika opsi dataMode adalah 'region'. Anda hanya dapat memilih wilayah dengan nilai yang ditetapkan.
setSelection(selection) Tidak ada Implementasi setSelection() standar. Memperlakukan pilihan sebagai pilihan baris, dan mendukung beberapa pilihan baris. Hanya region yang telah ditetapkan yang dapat dipilih.

Acara

Name Deskripsi Properti
error Diaktifkan saat terjadi error saat mencoba merender diagram. id, pesan
select

Diaktifkan saat pengguna mengklik wilayah dengan nilai yang ditetapkan. Untuk mempelajari apa yang telah dipilih, panggil getSelection(). Hanya tersedia jika opsi dataMode ditetapkan ke 'region'.

Catatan: Karena batasan tertentu, peristiwa select tidak ditampilkan jika Anda mengakses halaman di browser sebagai file (misalnya, "file://") bukan dari server (misalnya, "http://www").

 Tidak ada
regionClick

Dipanggil saat wilayah diklik. Berfungsi baik untuk 'wilayah' dan 'penanda' dataMode. Namun, dalam mode penanda, nilai ini tidak akan ditampilkan untuk negara tertentu yang ditetapkan dalam opsi 'region' (jika negara tertentu tercantum).

Catatan: Karena batasan tertentu, peristiwa regionClick tidak ditampilkan jika Anda mengakses halaman di browser sebagai file (mis., "file://") bukan dari server (misalnya, "http://www").

 Objek dengan satu properti, region, yang merupakan string dalam format ISO-3166 yang mendeskripsikan wilayah yang diklik.
zoomOut

Dipanggil saat tombol perkecil diklik. Untuk menangani zoom, tangkap peristiwa ini dan ubah opsi region.

Catatan: Karena batasan tertentu, peristiwa zoomOut tidak ditampilkan jika Anda mengakses halaman di browser sebagai file (misalnya, "file://") bukan dari server (misalnya, "http://www").

 Tidak ada
drawingDone Dipanggil saat geomap telah selesai menggambar. Tidak ada

Kebijakan Data

Lokasi di-geocode oleh Google Maps. Data apa pun yang tidak memerlukan geocoding tidak akan dikirim ke server mana pun. Lihat Persyaratan Layanan Google Maps untuk mengetahui informasi selengkapnya tentang kebijakan data mereka.

Catatan

Karena setelan keamanan Flash, ini (dan semua visualisasi berbasis Flash) mungkin tidak berfungsi dengan benar saat diakses dari lokasi file di browser (misalnya file:///c:/webhost/myhost/myviz.html), bukan dari URL server web (misalnya, http://www.myhost.com/myviz.html). Masalah ini biasanya hanya merupakan masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Macromedia.