Visualiza datos con Google Maps Platform y deck.gl

1. Antes de comenzar

Este codelab te enseña a crear una visualización de datos geoespaciales de gran volumen con la API de Maps JavaScript y deck.gl, un framework de visualización de datos de código abierto acelerado con WebGL.

d01802e265548be1.png

Requisitos previos

Actividades

  • Integrarás Google Maps Platform con deck.gl.
  • Importarás un conjunto de datos a un mapa desde BigQuery.
  • Definirás los datos en el mapa.

Otros requisitos

  • Una Cuenta de Google
  • El editor de texto o IDE que prefieras
  • Conocimientos básicos de JavaScript, HTML y CSS

2. Configura tu entorno

Cómo comenzar a utilizar Google Maps Platform

Si nunca usaste Google Maps Platform, sigue estos pasos:

  1. Crea una cuenta de facturación.
  2. Crea un proyecto.
  3. Habilita las API y los SDK de Google Maps Platform.
  4. Genera una clave de API.

Descarga Node.js

Si todavía no lo tienes, ve a https://nodejs.org/ para descargar y, luego, instalar el entorno de ejecución de Node.js en tu computadora.

Node.js incluye npm, un administrador de paquetes que necesitas para instalar las dependencias que requiere este codelab.

Configura el proyecto inicial

A fin de que ahorres tiempo, el proyecto inicial de este codelab incluye todo el código estándar que necesitas para crear una instancia de un mapa.

Para comenzar, sigue estos pasos:

  1. Clona o descarga este repositorio.
  2. Desde la línea de comandos, navega hasta el directorio /starter, que contiene la estructura de archivos básica que necesitas para completar este codelab.
  3. Ejecuta el siguiente comando para instalar las dependencias con npm:
npm install
  1. Utiliza el siguiente comando para ejecutar el proyecto inicial en tu navegador con webpack-dev-server:
npm start
    The starter app opens in your browser and displays a map.
  1. Abre el proyecto en tu IDE y navega hasta el directorio /starter/src.
  2. Abre el archivo app.js.

Todo el código que introduzcas irá en la sección del archivo que se muestra a continuación:

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

No tendrás que hacer nada con el resto del código del archivo, que carga la API de Maps JavaScript y el 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);
}
  1. Reemplaza YOUR API KEY por tu clave de API real, que generaste cuando configuraste el entorno:
const googleMapsAPIKey = 'YOUR API KEY';

3. Exporta los datos desde BigQuery

BigQuery ofrece muchos conjuntos de datos públicos que puedes usar para el análisis de datos o fines experimentales.

Utiliza BigQuery para exportar un conjunto de datos de acceso público que incluya los datos de ubicación de Citi Bike en Nueva York, un programa de bicicletas compartidas con 14,500 bicicletas y 900 ubicaciones. Para eso, sigue estos pasos:

  1. Ve a Cloud Console.
  2. Haz clic en Menú de navegación 41e8e87b85b0f93.png > BigQuery.
  3. En el Editor de consultas, ingresa la siguiente consulta y haz clic en Ejecutar:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. Una vez que se completa la consulta, haz clic en Guardar los resultados (SAVE RESULTS) y, luego, selecciona JSON (archivo local) [JSON (local file)] para exportar el conjunto de resultados. Al archivo, asígnale el nombre stations.json y guárdalo en el directorio /src.

2f4932829f7e1f78.png

Ahora que ya tienes los datos, puedes crear tu primera visualización con deck.gl.

4. Define la visualización

deck.gl es un framework de visualización de datos de código abierto que utiliza WebGL para generar renderizaciones en 2D y 3D de alta resolución a partir de conjuntos de datos sumamente grandes. Puede procesar cientos de miles de datos, y hasta millones si se lo optimiza para tal fin.

Para crear una visualización, necesitas dos clases: GoogleMapsOverlay y una de las muchas capas de visualización de deck.gl.

Para comenzar, crea una instancia de ScatterplotLayer, que renderiza los datos como círculos en el mapa:

  1. Agrega lo siguiente en la parte superior del archivo app.js para importar la clase ScatterplotLayer de deck.gl:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. Establece las propiedades de capa. Para eso, elige uno de los dos tipos de propiedades disponibles para la capa de diagrama de dispersión de deck.gl.

Las propiedades del método set le proporcionan a la visualización la información que necesita para la renderización, como la posición y el radio de los datos. Las propiedades de estilo te permiten personalizar el estilo de la visualización.

A continuación, se incluye un desglose de las propiedades que se utilizan en el fragmento de código siguiente:

  • id permite que el procesador identifique las capas por varios motivos, como las modificaciones del aspecto y otras actualizaciones de la visualización. Todas las capas de deck.gl requieren un ID único, asignado por ti.
  • data especifica la fuente de datos de la visualización. Configúralo en ‘./stations.json' para usar el conjunto de datos que exportaste desde BigQuery.
  • getPosition recupera la posición de cada objeto de la fuente de datos. Ten en cuenta que el valor de la propiedad es una función. deck.gl usa esa función para iterar en cada fila del conjunto de datos. La función le indica al procesador cómo acceder a la latitud y longitud de los datos en cada fila. En este conjunto de datos, los datos de cada fila constituyen un objeto JSON con la posición establecida en las propiedades de latitud y longitud, por lo que la función que proporcionas a getPosition equivale a d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius define el radio de cada objeto en metros. En este caso, el radio se configura en d => parseInt(d.capacity), que establece el tamaño de los datos según la capacidad de cada estación.
  • stroked determina si los datos renderizados incluyen un trazo en sus bordes externos.
  • getFillColor establece el color de relleno de cada dato como un código de color RGB.
  • getLineColor establece el color de trazo de cada dato como un código de color RGB.
  • radiusMinPixels establece el ancho mínimo en píxeles para cada dato. Cuando los usuarios acercan o alejan la imagen, deck.gl modifica automáticamente el tamaño de los datos para que la visualización en el mapa siempre sea clara. Esta propiedad te permite controlar hasta qué punto se cambia el tamaño.
  • radiusMaxPixels establece el ancho máximo en píxeles para cada dato.
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
};
  1. Crea una instancia de la clase ScatterplotLayer de deck.gl:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

Cuando hayas completado esta sección, tu código debería verse así:

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. Aplica la visualización al mapa

Ahora puedes aplicar tu instancia de ScatterplotLayer al mapa con la clase GoogleMapsOverlay, que utiliza la API de Maps JavaScript OverlayView para insertar un contexto de WebGL sobre el mapa.

Luego, puedes pasarle cualquiera de las capas de visualización de deck.gl a GoogleMapsOverlay, que renderiza la capa y la sincroniza con el mapa.

Para aplicar tu ScatterplotLayer al mapa, sigue estos pasos:

  1. Importa la clase GoogleMapsOverlay de deck.gl:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. Crea una instancia de la clase GoogleMapsOverlay y pásale la instancia de scatterplotLayer que creaste antes en la propiedad layers de un objeto:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Aplica la superposición al mapa:
 googleMapsOverlay.setMap(map);

Cuando hayas completado esta sección, tu código debería verse así:

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);
}

Regresa al navegador. Allí deberías ver una visualización increíble de los datos de todas las estaciones de Citi Bike en la ciudad de Nueva York.

d01802e265548be1.png

6. Felicitaciones

¡Felicitaciones! Creaste una visualización de datos de gran volumen con los datos de Citi Bike en la ciudad de Nueva York utilizando Google Maps Platform y deck.gl.

Más información

La API de Maps JavaScript te brinda acceso a todo el contenido de Google Maps Platform para la Web. Consulta estos vínculos para obtener más información sobre cómo trabajar con Google Maps Platform en la Web:

deck.gl ofrece varias capas de visualización de datos que puedes usar para mostrarles datos a tus usuarios. Para obtener más información sobre el uso de deck.gl con la API de Maps JavaScript, consulta estos vínculos: