Calidad del aire y polen en áreas y rutas

Objetivo

Las APIs de Air Quality y Pollen ofrecen grandes oportunidades para agregar más estadísticas a un viaje o mapa en cualquier ubicación. Existen dos maneras de consumir los datos disponibles de esas APIs: indexar como texto o mosaicos de mapas de calor como imágenes ráster.

Cuando uses los extremos de las APIs de tiles de mapa de calor, es posible que te enfrentes a algunos desafíos cuando cargues las tarjetas de ráster individuales, como los siguientes:

• ¿Cómo cargar las tarjetas en un mapa de Google en la Web? (también para cumplir con las Condiciones de Uso de las APIs).
• ¿Cómo administrar la cantidad de solicitudes durante la experiencia?
• ¿Cómo leer los valores de las tarjetas?

Ejemplos de casos de uso

Se te presentarán casos de uso de muestra para intentar responder las preguntas anteriores.

• Calidad del aire y polen en un área: Visualiza los datos de ráster de tiles de mapa de calor (condiciones actuales) en uno o varios polígonos personalizados.
• Calidad del aire y polen a lo largo de la ruta: Visualiza los datos de ráster de mosaicos de mapa de calor (condiciones actuales) asignados a los puntos de referencia de las rutas.

Implementación

Descubrirás qué tarjetas están disponibles y cómo se pueden cargar en una experiencia web. También verás qué se puede hacer para administrar la cantidad de solicitudes en una situación en la que las tarjetas se cargan en un mapa. Por último, se te mostrará cómo leer las tarjetas.

Tarjetas de mapa de calor disponibles por tipo

API de Air Quality

- UAQI_RED_GREEN (ICA universal, paleta rojo-verde): Es la paleta rojo-verde del Índice de calidad del aire universal.
- UAQI_INDIGO_PERSIAN (ICA, paleta índigo-persa): Es la paleta índigo-persa del Índice de calidad del aire universal.
- PM25_INDIGO_PERSIAN: Paleta índigo-persa del índice PM2.5.
- GBR_DEFRA: Es la paleta de colores del índice diario de calidad del aire (Reino Unido).
- DEU_UBA: Paleta de colores del índice de calidad del aire local de Alemania.
- CAN_EC: Paleta de colores del Índice de Salud de la Calidad del Aire de Canadá.
- FRA_ATMO: Paleta de colores del índice de calidad del aire de Francia.
- US_AQI: Es la paleta de colores del Índice de calidad del aire de EE.UU.

API de Pollen

- TREE_UP: El tipo de mapa de calor representará un mapa gráfico de índice de árbol.
- GRASS_UPI: El tipo de mapa de calor representará un mapa gráfico del índice de vegetación.
- WEED_UPI: El tipo de mapa de calor representará un mapa gráfico del índice de malezas.

Cómo mostrar mosaicos de mapas de calor en la Web

Carga las tarjetas y aplica una máscara vectorial para mostrar solo las áreas deseadas del viewport del mapa.

Cómo cargar las tarjetas

• Usa la API de Maps JavaScript para cargar el mapa base de Google y la biblioteca de deckgl para prepararte para cargar imágenes de mosaicos de tramas.
• Usa TileLayer de deck.gl para cargar tarjetas de mapa de calor de Calidad del aire . Esto mostrará las etiquetas del mapa base de Google Maps sobre las tarjetas del mapa de calor (a diferencia de las superposiciones personalizadas de Maps JavaScript).

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

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

Cómo aplicar una máscara vectorial

Puedes ocultar o mostrar visualmente cualquier parte de las tarjetas del mapa de calor. Importante: Deberás adquirir los datos que se usarán para crear la máscara vectorial aplicada a las tarjetas del mapa de calor.

• En un área:

Usa deck.gl GeoJson para crear una máscara sobre la capa de mosaicos de calidad del aire.

En el siguiente ejemplo, se usa un geojson multipoligonal de Francia.

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

Esta es una referencia para la implementación de deckgl:

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]

• A lo largo de una ruta: Usa deck.gl con su TripsLayer para crear una máscara sobre el TileLayer de calidad del aire.

Tarjeta del mapa de calor de la calidad del aire durante un viaje

Administra las solicitudes de API y el costo

Si bien el comportamiento predeterminado del navegador suele ser almacenar en caché todas las tarjetas cargadas en el almacenamiento local (dentro de la misma sesión), puedes optimizar aún más lo siguiente:

• Restringir el área de carga: Crea un cuadro delimitador (en rojo) y asígnale la capa. Solo se cargarán las tarjetas del mapa de calor (en azul) que cubran el cuadro delimitador en cualquier nivel de zoom determinado.

Bounding Box (en rojo) y mosaicos de mapa de calor (en azul)

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

• Establece el tamaño de la tarjeta de visualización visual para que cubra toda la vista en cualquier nivel de zoom determinado. Se recomienda un tamaño de entre 256 y 1024.

  Importante: Las tarjetas de las APIs se mantienen en una resolución de 256 x 256, pero el ajuste de la visualización visual te permitirá aumentar o disminuir la cantidad de solicitudes de tarjetas para cubrir todo el viewport del mapa.

  (asegúrate de que funcione con minZoom y maxZoom del mapa de Google, es decir, tilesize:1024 no cargará mosaicos en el zoom 0 o 1).

Vista con mosaicos de 256 x 256 píxeles en comparación con 512 x 512 píxeles

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

Sugerencia: Define mejor la configuración de renderización de tarjetas de capas con refinementStrategy:'no-overlap' en lugar de "best-available" para evitar colisiones visuales entre las tarjetas.

Lee los valores de píxeles

Advertencia: Puedes leer y almacenar en caché durante 1 hora (no de forma indefinida) las tarjetas del mapa de calor o cualquier valor leído de píxeles individuales contenidos en las tarjetas de la API de Air Quality o Pollen. Consulta los Términos específicos de la API que se detallan en la sección "16 API de Air Quality" para validar tu implementación.

Para mostrar el valor correspondiente en una escala de colores

Puedes usar la biblioteca Luma.gl y su método readPixelsToArray en un evento onClick asignado como propiedad a la capa deck.gl.

Valor de píxel: rgba(128,0,0,255)

BAJO ALTO

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

Conclusión

Descubriste cómo los extremos de la API de mosaicos de mapas de calor de Air Quality y Pollen pueden ser los siguientes:

• cargados en un mapa de Google en la Web, y también asegúrate de cumplir con las Condiciones de uso.
• optimizados para adaptarse a tu caso de uso
• Lee los valores de las tarjetas

Acciones siguientes

Lecturas adicionales sugeridas:

• Sensibilización sobre la calidad del aire para Places con la API de Air Quality

Colaboradores

Autores principales:

Thomas Anglaret | Ingeniero de Soluciones de Google Maps Platform