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:- [Número, obrigatório] Uma latitude. Números positivos são o norte, números negativos são o sul.
- [Número, obrigatório] Uma longitude. Os números positivos são leste, e os negativos são oeste.
- [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.
- [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:- [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.
- [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.
- [String, opcional] Texto de string adicional exibido quando o usuário passa o cursor sobre essa região.
- [String, obrigatório] Um local no mapa. Os seguintes formatos são aceitos:
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:
O geomapa não permite comportamento
de rolagem ou arrastar, apenas comportamento de zoom limitado. Para diminuir um zoom básico, defina a propriedade |
dataMode |
string | "regiões" | Como exibir valores no mapa. Há suporte para dois valores:
|
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 Observação: devido a certas limitações, o evento |
Nenhum |
regionClick |
Chamado quando uma região é clicada. Funciona tanto para "regiões" quanto para "marcadores" Observação: devido a certas limitações, o evento |
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 Observação: devido a certas limitações, o evento |
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.