Calidad del aire y polen en áreas y rutas

Objetivo

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

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 de trama individuales. Estos son algunos ejemplos:

• ¿Cómo puedo cargar las tarjetas en un mapa de Google Maps 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 se leen los valores de las tarjetas?

Ejemplos de casos de uso

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

• Calidad del aire y Polen en un área: Visualiza datos de trama de mosaicos de mapas de calor (condiciones actuales) dentro de uno o varios polígonos personalizados.
• Calidad del aire y Polen en la ruta: visualizar datos de trama de mosaicos de mapas de calor (condiciones actuales) asignados a 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 lo que 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 las tarjetas.

Mosaicos de mapas de calor disponibles por tipo

API de Air Quality

- UAQI_RED_GREEN (UAQI, paleta de rojo y verde): Paleta de color rojo y verde del índice de calidad del aire universal.
- UAQI_INDIGO_PERSIAN (UAQI, paleta índigo-persiana): Paleta del índice universal de calidad del aire índigo-persiana.
- PM25_INDIGO_PERSIAN: Paleta de índice índigo-persiana PM2.5.
- GBR_DEFRA: Paleta de colores del índice de calidad del aire diario (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: 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 arbóreo.
- GRASS_UPI: el tipo de mapa de calor representará un mapa gráfico de índice de césped.
- WEED_UPI: El tipo de mapa de calor representará un mapa de índice de malezas gráficamente.

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 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 trama.
• Usa TileLayer de deck.gl para cargar mosaicos de mapas de calor de Calidad del aire . Se mostrarán las etiquetas del mapa base de Google Maps sobre los mosaicos de mapas de calor (a diferencia de las superposiciones personalizadas de JavaScript de Maps).

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

• En un área:

usa GeoJson de deck.gl para crear una máscara en la capa TileLayer de Air Quality.

El siguiente ejemplo 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
  ...
  })
  ]

• En una ruta: Usa deck.gl con su TripsLayer para crear una Mask en la TileLayer de Air Quality

Tarjeta de mapa de calor de Air Quality durante un viaje

Administra los costos y las solicitudes a la API

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

• Restringe el área de carga: crea un cuadro de límite (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 con un nivel de zoom determinado.

Cuadro delimitador (en rojo), mosaicos de mapas 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
    ...
 })

• configurar el tamaño de mosaico de la visualización visual para cubrir todo el viewport a un nivel de zoom determinado; recomendado: entre 256 y 1,024.

  Importante: Los mosaicos de APIs mantienen una resolución de 256 x 256, pero el ajuste de visualización de la pantalla 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 de Google Maps; p. ej., tilesize:1024 no cargará mosaicos con el zoom 0 o 1).

Ventana de visualización con mosaicos de 256 x 256 píxeles frente a 512 x 512 píxeles

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

Sugerencia: Define mejor el parámetro de configuración de renderización de mosaicos de capas con definamentStrategy:'no-overlap' sobre "mejor disponible" para evitar una colisión visual entre los mosaicos.

Cómo leer los valores de píxeles

Advertencia: Puedes leer y almacenar en caché por 1 hora (no indefinidamente), los mosaicos de mapas de calor o los valores leídos de píxeles individuales contenidos en los mosaicos de Air Quality o de la API de Pollen. Consulta los términos específicos de la API detallados 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 prop a la capa deck.gl.

Valor de píxeles: 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 los mosaicos de mapas de calor de Air Quality y Pollen pueden ser:

• cargar en un mapa de Google en la Web, además de cumplir con las Condiciones de uso
• optimizado para que se adapte a tu caso de uso
• leer los valores de las tarjetas

Acciones siguientes

Lecturas adicionales sugeridas:

• Concientizació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