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

alt_text

Cuando usas los extremos de las APIs de mosaicos de mapas de calor, es posible que te enfrentes a algunos desafíos mientras cargas los mosaicos rasterizados individuales, como los siguientes:

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

Ejemplos de casos de uso

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

Implementación

Descubrirás qué mosaicos 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 los mosaicos se cargan en un mapa. Por último, se te mostrará cómo leer los mosaicos.

Tipos de mosaicos de mapas de calor disponibles

API de Air Quality

- UAQI_RED_GREEN (UAQI, paleta rojo-verde): Paleta rojo-verde del Índice Universal de Calidad del Aire.
- UAQI_INDIGO_PERSIAN (UAQI, paleta índigo-persa): Paleta índigo-persa del Índice Universal de Calidad del Aire.
- PM25_INDIGO_PERSIAN: Paleta índigo-persa del índice PM2.5.
- GBR_DEFRA: Paleta de colores del Índice Diario de Calidad del Aire (Reino Unido).
- DEU_UBA: Paleta de colores del Índice de Calidad del Aire Local Alemán.
- CAN_EC: Paleta de colores del Índice de Calidad del Aire y Salud Canadiense.
- FRA_ATMO: Paleta de colores del Índice de Calidad del Aire de Francia.
- US_AQI: 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 del índice de árboles.
- GRASS_UPI: El tipo de mapa de calor representará un mapa gráfico del índice de pasto.
- 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 los mosaicos y aplica una máscara vectorial para mostrar solo las áreas deseadas del viewport del mapa.

Cómo cargar los mosaicos 

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 los mosaicos de mapas de calor. Importante: Deberás adquirir los datos que se usarán para crear la máscara vectorial aplicada a los mosaicos de mapas de calor.

  • En un área:

    • Usa deck.gl GeoJson para crear una máscara sobre Air Quality TileLayer.

alt_text

En el siguiente ejemplo, se usa un geojson multipolígono 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 Air Quality TileLayer.

Mosaico de mapa de calor de Air Quality sobre un viaje

alt_text

Cómo administrar las solicitudes y el costo de la API

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

  • Restringe el área de carga: Crea un cuadro delimitador (en rojo) y asígnalo a la capa. Solo se cargarán los mosaicos de mapas de calor (en azul) que cubran el cuadro delimitador en cualquier nivel de zoom.

Cuadro delimitador (en rojo), mosaicos de mapas de calor (en azul)

alt_text 

 // 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 del mosaico de visualización para cubrir todo el viewport en cualquier nivel de zoom. Recomendado: entre 256 y 1024.

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

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

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

alt_text alt_text 



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

Cómo leer los valores de los píxeles

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 prop a la capa deck.gl.

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

alt_text

BAJO alt_text 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 pueden ser los extremos de la API de mosaicos de mapas de calor de Air Quality y Pollen:

  • Cargados en un mapa de Google Maps en la Web y también asegurándose de que estén en línea con las Condiciones de Uso
  • Optimizados para que coincidan con tu caso de uso
  • Leer los valores de los mosaicos

Próximas acciones

Lecturas adicionales sugeridas:

Colaboradores

Autores principales:

Thomas Anglaret | Ingeniero de soluciones de Google Maps Platform