Visualizar dados com a Plataforma Google Maps e o deck.gl

Sobre este codelab

Último dez. 3, 2021 atualizado

Escrito por um Googler

1. Antes de começar

Neste codelab, você vai aprender a criar uma visualização de um grande volume de dados geoespaciais usando a API Maps JavaScript e o deck.gl, um framework de visualização de dados de código aberto, otimizado pelo WebGL.

Pré-requisitos

Atividades deste laboratório

Integrar a Plataforma Google Maps ao deck.gl
Importar um conjunto de dados para um mapa do BigQuery
Definir os pontos de dados no mapa

Recursos necessários

Uma Conta do Google
Um editor de texto ou ambiente de desenvolvimento integrado de sua escolha
Conhecimento básico de JavaScript, HTML e CSS

2. Configurar o ambiente

Como começar a usar a Plataforma Google Maps

Se você nunca usou a Plataforma Google Maps, siga estas etapas:

Fazer o download do Node.js

Caso ainda não tenha esse software, acesse https://nodejs.org/, faça o download do ambiente de execução do Node.js e instale-o no computador.

O Node.js inclui o NPM, que é um gerenciador de pacotes necessário para a instalação das dependências deste codelab.

Configurar o projeto inicial

Para economizar tempo, o projeto inicial deste codelab inclui todo o código boilerplate necessário para instanciar um mapa.

Para começar, siga estas etapas:

Copie ou faça o download deste repositório.
Na linha de comando, acesse o diretório /starter, que contém a estrutura de arquivos básica necessária para concluir este codelab.
Instale as dependências do NPM com o comando a seguir:

npm install

Execute o projeto inicial no navegador com o Webpack Dev Server usando este comando:

npm start

    The starter app opens in your browser and displays a map.

Abra o projeto no seu ambiente de desenvolvimento integrado e navegue até o diretório /starter/src.
Abra o arquivo app.js.

Você escreverá toda a programação nesta seção do código no arquivo:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Não é preciso fazer nada com o restante do código no arquivo, que carrega a API Maps JavaScript e o mapa:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Substitua YOUR API KEY pela sua chave de API real, gerada quando você configurou o ambiente:

const googleMapsAPIKey = 'YOUR API KEY';

3. Exportar dados do BigQuery

O BigQuery oferece vários conjuntos de dados públicos que podem ser usados para análise de dados ou fins experimentais.

Use o BigQuery para exportar um conjunto de dados disponível publicamente que inclui dados de local para o Citi Bike na cidade de Nova York, um programa de compartilhamento de bicicletas com 14.500 bicicletas e 900 locais. Para isso, siga estas etapas:

Acesse o Console do Cloud.
Clique em Menu de navegação > BigQuery.
No Editor de consultas, insira a seguinte consulta e clique em Executar:

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

Após a conclusão da consulta, clique em Salvar resultados e selecione JSON (arquivo local) para exportar o conjunto de resultados. Nomeie o arquivo stations.json e salve-o no diretório /src.

Agora que você já tem os dados, crie sua primeira visualização com o deck.gl.

4. Definir a visualização

O deck.gl é um framework de visualização de dados de código aberto que usa o WebGL para gerar renderizações 2D e 3D em alta resolução de conjuntos de dados muito grandes. Ele consegue processar centenas de milhares de pontos de dados e, quando otimizado, pode chegar a milhões.

Para criar uma visualização, você precisa de duas classes: GoogleMapsOverlay e uma das muitas camadas de visualização do deck.gl.

Para começar, crie uma instância de ScatterplotLayer, que renderiza pontos de dados como círculos no mapa:

Importe a classe ScatterplotLayer do deck.gl adicionando o seguinte trecho na parte superior de app.js:

import { ScatterplotLayer } from '@deck.gl/layers';

Defina as propriedades da camada escolhendo um dos dois tipos de propriedade disponíveis para a camada de dispersão do deck.gl.

As propriedades do setter fornecem à visualização as informações necessárias para a renderização, como a posição e o raio dos pontos de dados. As propriedades do estilizador permitem personalizar o estilo da visualização.

Veja os detalhes das propriedades usadas no snippet de código a seguir:

id permite que o renderizador identifique camadas por vários motivos, como novos layouts e outras atualizações na visualização. Todas as camadas do deck.gl exigem um ID exclusivo, atribuído por você.
data especifica a origem de dados da visualização. Defina-o como ‘./stations.json' para usar o conjunto de dados que você exportou do BigQuery.
getPosition recupera a posição de cada objeto da fonte de dados. O valor da propriedade é uma função, que é usada pelo deck.gl para iterar cada linha do conjunto de dados. A função informa ao renderizador como acessar a latitude e a longitude do ponto de dados em cada linha. Nesse conjunto, os dados em cada linha são um objeto JSON com a posição definida nas propriedades de latitude e longitude. Assim, a função que você fornece para getPosition é d => [parseFloat(d.longitude), parseFloat(d.latitude)].
getRadius define o raio de cada objeto em metros. Nesse caso, o raio é definido como d => parseInt(d.capacity), o que estabelece o tamanho dos pontos de dados com base na capacidade de cada estação.
stroked define se os pontos de dados renderizados têm um traço nas extremidades externas.
getFillColor define a cor de preenchimento de cada ponto de dados como um código de cor RGB.
getLineColor define a cor do traço de cada ponto de dados como um código de cor RGB.
radiusMinPixels define a largura mínima de pixels para cada ponto de dados. À medida que os usuários aumentam e diminuem o zoom, o deck.gl redimensiona automaticamente a escala dos pontos de dados para manter a clareza da visualização do mapa. Essa propriedade permite controlar a extensão em que ocorre o redimensionamento.
radiusMaxPixels define a largura máxima de pixels para cada ponto de dados.

const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};

Crie uma instância da classe ScatterplotLayer do deck.gl:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Depois que você concluir a seção, seu código terá este formato:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Aplicar a visualização ao mapa

Agora, é possível aplicar sua instância de ScatterplotLayer ao mapa com a classe GoogleMapsOverlay, que usa a API Maps JavaScript OverlayView para injetar um contexto WebGL na parte de cima do mapa.

Depois disso, você pode transmitir qualquer uma das camadas de visualização do deck.gl para GoogleMapsOverlay, que renderiza a camada e a sincroniza com o mapa.

Para aplicar seu ScatterplotLayer ao mapa, siga estas etapas:

Importe a classe GoogleMapsOverlay do deck.gl:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';

Crie uma instância da classe GoogleMapsOverlay e transmita a ela a instância scatterplotLayer que você criou anteriormente na propriedade layers de um objeto:

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

Aplique a sobreposição ao mapa:

 googleMapsOverlay.setMap(map);

Depois que você concluir a seção, seu código terá este formato:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

Volte ao navegador e você terá uma ótima visualização de dados de todas as estações do Citi Bike na cidade de Nova York.

6. Parabéns

Parabéns! Você gerou a visualização de um grande volume de dados do Citi Bike na cidade de Nova York com a Plataforma Google Maps e o deck.gl.

Saiba mais

Com a API Maps JavaScript, você tem acesso a tudo que a Plataforma Google Maps oferece para a Web. Consulte estes links para saber mais sobre como usar a plataforma na Web:

O deck.gl oferece várias camadas de visualização de dados que podem servir para exibir dados aos usuários. Saiba mais sobre como utilizar o deck.gl com a API Maps JavaScript nestes links:

Informar um erro