Visualização: mapa geográfico

  1. Visão geral
  2. Exemplos
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados
  9. Observações

Visão geral

Um mapa geográfico é um mapa de um país, continente ou região, com cores e valores atribuídos a regiões específicas. Os valores são exibidos como uma escala de cores, e você pode especificar um texto alternativo para as regiões. O mapa é renderizado no navegador usando um player de Flash incorporado. Não é possível rolar ou arrastar o mapa, mas ele pode ser configurado para permitir zoom.

Exemplos

Temos dois exemplos aqui: um que usa o estilo de exibição das regiões e outro que usa o estilo de exibição dos marcadores.

Exemplo de regiões

O estilo da região preenche regiões inteiras (normalmente países) com cores correspondentes aos valores atribuídos. Especifique o estilo das regiões atribuindo options['dataMode'] = 'regions' no código.

 
<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>

Exemplo de marcadores

O estilo "marcadores" exibe um círculo, dimensionado e colorido, para indicar um valor, nas regiões que você especificar. 

<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>

Carregando

O nome do pacote google.charts.load é "geomap".

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

O nome da classe de visualização do mapa geográfico é google.visualization.GeoMap

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

Formato de dados

Dois formatos de endereço são compatíveis, cada um com um número diferente de colunas e diferentes tipos de dados para cada coluna. Todos os endereços da tabela precisam usar um dos dois tipos. Não é possível misturar tipos.

  • Formato 1: locais de latitude/longitude. Esse formato só funciona quando a opção dataMode é "marcadores". Se esse formato for usado, não é necessário incluir o JavaScript do Google Maps. O local é inserido em duas colunas, além de duas colunas opcionais:
    1. [Número, obrigatório] Uma latitude. Números positivos são o norte, números negativos são o sul.
    2. [Número, obrigatório] Uma longitude. Os números positivos são leste, e os negativos são oeste.
    3. [Número, opcional] Um valor numérico exibido quando o usuário passa o cursor sobre essa região. Se a coluna 4 for usada, esta coluna é obrigatória.
    4. [String, opcional] Texto de string adicional exibido quando o usuário passa o cursor sobre essa região.
  • Formato 2: endereço, nome do país, locais do nome da região ou códigos de área metropolitana dos EUA. Esse formato funciona com a opção dataMode definida como "marcadores" ou "regiões". O local é inserido em uma coluna, além de duas colunas opcionais:
    1. [String, obrigatório] Um local no mapa. Os seguintes formatos são aceitos:
      • Um endereço específico, por exemplo, "Av. Brasil, 120".
      • O nome de um país como uma string (por exemplo, "Inglaterra") ou um código ISO-3166 em letra maiúscula ou o equivalente em texto em inglês (por exemplo, "GB" ou "Reino Unido").
      • Um nome de código da região ISO-3166-2 em letra maiúscula ou o equivalente em inglês (por exemplo, "US-NJ" ou "New Jersey"). Observação: as regiões só podem ser especificadas quando a opção dataMode está definida como "regiões".
      • Código de área metropolitana. Esses são os códigos de área metropolitana de três dígitos usados para designar várias regiões. Só é possível usar códigos dos EUA. Eles não são iguais aos códigos de área telefônicos.
    2. [Número, opcional] Um valor numérico exibido quando o usuário passa o cursor sobre essa região. Se a coluna 3 for usada, esta coluna é obrigatória.
    3. [String, opcional] Texto de string adicional exibido quando o usuário passa o cursor sobre essa região.

Observação:um mapa pode exibir no máximo 400 entradas. Se o DataTable ou o DataView tiver mais de 400 linhas, apenas as primeiras 400 serão exibidas. Os modos mais rápidos são dataMode='regions' com locais especificados como códigos ISO e dataMode='markers' com entidades de latitude/longitude. O modo mais lento é dataMode='markers', com um endereço de string.

Importante:seu DataTable precisa incluir todas as colunas opcionais que precedem qualquer coluna que você queira usar. Por exemplo, se você quiser especificar uma tabela lat/long e quiser usar apenas as colunas 1, 2 e 4, o DataTable ainda vai definir a coluna 3, embora você não precise adicionar valores a ela:

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!");

Opções de configuração

Nome Tipo Padrão Descrição
region string "mundo"

A área que será exibida no mapa. As áreas ao redor também serão exibidas. Pode ser um código de país (no formato ISO-3166 em maiúsculas) ou uma das seguintes strings:

  • world: mundo inteiro
  • us_metro - (Estados Unidos, áreas metropolitanas)
  • 005 – (América do Sul)
  • 013 – (América Central)
  • 021 – (América do Norte)
  • 002 – (Toda a África)
  • 017 – (África Central)
  • 015 – Norte da África
  • 018 – (África do Sul)
  • 030 – (Ásia Oriental)
  • 034: sul da Ásia
  • 035: (Ásia/Pacífico)
  • 009 – (Oceania)
  • 145: (Oriente Médio)
  • 143 – (Ásia Central)
  • 151 – (Norte da Ásia)
  • 154 – Norte da Europa
  • 155: Europa Ocidental
  • 039 (Sul da Europa)

O geomapa não permite comportamento de rolagem ou arrastar, apenas comportamento de zoom limitado. Para diminuir um zoom básico, defina a propriedade showZoomOut.
dataMode string "regiões"

Como exibir valores no mapa. Há suporte para dois valores:

  • regions: colore uma região inteira com a cor apropriada. Essa opção não pode ser usada com endereços de latitude/longitude. Consulte Exemplo de região.
  • markers: exibe um ponto em uma região, com a cor e o tamanho indicando o valor. Consulte Exemplo de marcadores.
width string "556 px" Largura da visualização. Se nenhuma unidade for informada, a unidade padrão será pixels.
height string "347 px" É a altura da visualização. Se nenhuma unidade for informada, a unidade padrão será pixels.
colors Matriz de números RGB no formato 0xRRGGBB [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] Gradiente de cor a ser atribuído a valores na visualização. É necessário ter pelo menos dois valores. O gradiente incluirá todos os valores, além dos valores intermediários calculados, com a cor mais clara como o menor valor e a cor mais escura como a mais alta.
showLegend boolean verdadeiro Se verdadeiro, exibe uma legenda para o mapa.
showZoomOut boolean false Se for verdadeiro, exiba um botão com o rótulo especificado pela propriedade zoomOutLabel. Esse botão não faz nada quando clicado, exceto o lançamento do evento zoomOut. Para gerenciar o zoom, capture esse evento e mude a opção region. Só será possível especificar showZoomOut se a opção region for menor que a visualização mundial. Uma maneira de ativar o comportamento de zoom seria detectar o evento regionClick, mudar a propriedade region para a região apropriada e recarregar o mapa.
zoomOutLabel string "Diminuir zoom" Etiqueta do botão de zoom.

Métodos

Método Tipo de retorno Descrição
draw(data, options) Nenhum Desenha o mapa. Pode retornar antes que o desenho seja concluído. Consulte o evento drawingDone().
getSelection() Matriz de elementos de seleção Implementação padrão do getSelection(). Os elementos selecionados são linhas. Esse método só funciona quando a opção dataMode é "regiões". Só é possível selecionar uma região com um valor atribuído.
setSelection(selection) Nenhum Implementação padrão de setSelection(). Trata uma seleção como uma seleção de linhas e aceita várias seleções de linhas. Somente regiões com valores atribuídos podem ser selecionadas.

Eventos

Nome Descrição Propriedades
error Disparado quando ocorre um erro ao tentar renderizar o gráfico. ID, mensagem
select

Disparado quando o usuário clica em uma região com um valor atribuído. Para saber o que foi selecionado, chame getSelection(). Disponível apenas quando a opção dataMode estiver definida como "regiões".

Observação: devido a certas limitações, o evento select não será gerado se você acessar a página do navegador como um arquivo. Por exemplo, "file://") em vez de um servidor (por exemplo, "http://www").

 Nenhum
regionClick

Chamado quando uma região é clicada. Funciona tanto para "regiões" quanto para "marcadores" dataMode. No entanto, no modo de marcador, isso não será gerado para o país específico atribuído na opção "região" (se um país específico estiver listado).

Observação: devido a certas limitações, o evento regionClick não será gerado se você acessar a página do navegador como um arquivo (por exemplo, "file://") em vez de um servidor (por exemplo, "http://www").

 Um objeto com uma única propriedade, region, que é uma string no formato ISO-3166 que descreve a região clicada.
zoomOut

Chamado quando o botão de diminuir o zoom é clicado. Para gerenciar o zoom, capture esse evento e mude a opção region.

Observação: devido a certas limitações, o evento zoomOut não será gerado se você acessar a página do navegador como um arquivo. Por exemplo, "file://") em vez de um servidor (por exemplo, "http://www").

 Nenhum
drawingDone Chamado quando o geomapa termina a desenho. Nenhum

Política de dados

Os locais são geocodificados pelo Google Maps. Os dados que não exigem geocodificação não são enviados aos servidores. Consulte os Termos de Serviço do Google Maps para mais informações sobre a política de dados deles.

Observações:

Por causa das configurações de segurança de Flash, isso (e todas as visualizações baseadas em Flash) pode não funcionar corretamente quando acessado no local de um arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html), em vez de usar o URL de um servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Geralmente, isso é apenas um problema de teste. É possível resolver esse problema conforme descrito no site da Macromedia.