Concientización sobre la calidad del aire en Places con la API de Air Quality

En este documento, verás cómo usar la API de Air Quality para crear experiencias de búsqueda de lugares enriquecidas. Mostraremos cómo la calidad del aire puede ser un indicador de valor para los usuarios desde el principio hasta el final del embudo, y cómo se pueden incorporar los datos de la API de Air Quality en las experiencias existentes.

Casos de uso y valor agregado

Los indicadores de la API de Air Quality pueden adaptarse a diversas experiencias de búsqueda, por ejemplo, cuando los usuarios buscan una ubicación para visitar. La API de Air Quality ofrece lo siguiente:

  • Datos en tiempo real * y datos históricos: Datos precisos y actualizados que representan el estado actual y los datos históricos dentro de un período de 30 días con una resolución por hora. (* un resumen por hora de la calidad del aire exterior)
  • Datos globales y locales: Los datos de la API de Air Quality abarcan áreas completas en más de 100 países y, a la vez, están altamente localizados (hasta 500 m), lo que proporciona indicadores clave para que los usuarios comparen y tomen decisiones sobre el lugar más adecuado.

La calidad del aire puede ser muy diferente incluso en ubicaciones cercanas

Explicación de ejemplo

Mostrar los datos de calidad del aire al principio de la experiencia

Existen dos formas principales de mostrar los datos de la API de Air Quality:

Cómo mostrar los datos de la API de Air Quality en los pines de ubicación

  • Elige tu índice de ubicación: ICA universal o ICA local (hay disponibles hasta 70 índices de calidad del aire (ICA) diferentes). Un índice de calidad del aire (ICA) es la escala con la que un país determinado, por ejemplo, la EPA de EE.UU., categoriza los diferentes niveles de calidad del aire según diferentes métodos de cálculo, fuentes de datos y fines designados.
  • Comienza a visualizar el valor principal y el código de color de la API de Air Quality directamente desde la experiencia de búsqueda de lugares.

La pantalla predeterminada podría incluir solo el código de color.


Mostrar más información de la API de Air Quality cuando se selecciona una chincheta:

  • Significado del ICA universal y del ICA local
  • Niveles de contaminación, que son una medida de las partículas y los gases en el aire: Contaminante dominante, concentración, fuentes y efectos
  • Recomendaciones de salud, que son acciones recomendadas para las condiciones actuales de calidad del aire
  • Puedes ajustar el nivel de información que se muestra de forma predeterminada para satisfacer tus necesidades. Ten en cuenta que los datos de una ubicación suelen ser útiles en comparación con los de otras ubicaciones.

Ejemplo de visualización de la sección de calidad del aire

Respuesta de Calidad del aire

{
    "dateTime": "2023-08-09T10:00:00Z",
    "regionCode": "fr",
    "indexes": [
       {
            "code": "uaqi",
            "displayName": "Universal AQI",
            "aqi": 76,
            "aqiDisplay": "76",
            "color": {
                "red": 0.4117647,
                "green": 0.77254903,
                "blue": 0.20392157
            },
            "category": "Good air quality",
            "dominantPollutant": "pm10"
        },
       …
    ],
    "pollutants": [
       {
            "code": "co",
            "displayName": "CO",
            "fullName": "Carbon monoxide",
            "concentration": {
                "value": 95.18,
                "units": "PARTS_PER_BILLION"
            }...
        },
       …
    ],
    "healthRecommendations": -{
        "generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!",
        "elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...",
        "lungDiseasePopulation": …
    }
}

  • También puedes consultar los datos de calidad del aire solo cuando interactúas con una ubicación.

  • Puedes usar el índice de la API de Air Quality para filtrar lugares cercanos, es decir, si buscas parques en tu área, solo se mostrarán los parques con buena calidad del aire.

Respuesta de Calidad del aire

...
"color":{
  "red": 0.9490196,
  "green": 0.98039216,
  "blue": 0.019607844
}
...
Convierte a RGB
  var red = parseInt(colorResponse.red*255)|| 1;
  var green = parseInt(colorResponse.green*255)|| 1;
  var blue = parseInt(colorResponse.blue*255)|| 1; 
  // --> output rgb(241,250,5)

Cómo mostrar la capa del mapa de calor de la API de Air Quality en un mapa

Los mosaicos coloreados del mapa de calor son una excelente manera de hacer lo siguiente:

  • para proporcionar una vista general de un área grande.
  • para mostrar rápidamente los matices dentro de esa área.

Usa la API de Maps JavaScript con ImateMapType para mostrar las tarjetas individuales necesarias para cubrir toda la ventana gráfica de tu mapa de Google Maps. Las tarjetas del mapa de calor se actualizarán a medida que los usuarios interactúen con el mapa desplazándose lateralmente, aplicando zoom o cambiando de ubicación.

Ten en cuenta que el valor permitido del nivel de zoom es de hasta 16.
Es posible que la capa de mosaicos del mapa de calor de la API de Air Quality desaparezca en la búsqueda hiperlocal.

Puedes seleccionar Tipos de mapas de calor dentro de un conjunto limitado de índices de calidad del aire:

  • UAQI_RED_GREEN: Es la paleta de colores rojo y verde del Índice de Calidad del Aire Universal.
  • UAQI_INDIGO_PERSIAN: Paleta de colores índigo y persa del Índice Universal de Calidad del Aire.
  • PM25_INDIGO_PERSIAN: Paleta de color índigo persa del índice de 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 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.

  • Asegúrate de indicar la escala de colores para que los usuarios comprendan el valor y su clasificación de color:

    • Escala de gradiente del UAQI (0 a 100): Malo / Excelente

    Fragmento de código CSS de la paleta de colores:

    .gradient-scale { 
    background: linear-gradient(to right, 
        rgb(99, 20, 161) 0%, /* purple */
        rgb(149, 0, 25) 20%, /* red */
        rgb(248, 47, 21) 40%, /* orange */
        rgb(255, 248, 35) 60%, /* yellow */
        rgb(34,163,120) 80%, /* steelblue */
        rgb(255,255,255) 100% /* white */
       );
    }

    • Colores sólidos para representar puntos clave en la escala del UAQI (0-100): Malo / Excelente

    Recuento de consultas y costo asociado

    • API de Maps JavaScript: 1 mapa en la carga de la experiencia
    • API de Air Quality:
      • 1 búsqueda por cada lugar (todo en la carga del mapa o solo en la selección del usuario).
      • Capa de mosaicos de mapa de calor: Cada imagen de mosaico es de 256 x 256 px, y, para cubrir un mapa estándar presentado en un dispositivo móvil o en la Web, necesitas entre 12 y 14 mosaicos. Cada tarjeta extraída se cuenta como 1 unidad de SKU.
    • API de Nearby Search (nuevo): 1 búsqueda por cada 20 lugares que se muestran. La facturación varía según los datos de Place que forman parte de la respuesta de la búsqueda.

    Conclusión

    Demostramos que la API de Air Quality puede ser un punto de datos importante para que los usuarios decidan qué lugar visitar. Por lo tanto, los datos de calidad del aire deben ser visibles lo antes posible en la experiencia de búsqueda, con cuidado en la cantidad de información que se muestra a la vez y cómo se hace visible.

    Próximas acciones

    Lecturas adicionales sugeridas:

    Colaboradores

    Google mantiene este artículo. Los siguientes colaboradores escribieron el texto original.
    Autor principal:

    Thomas Anglaret | Ingeniero de soluciones