מוּדעוּת לאיכות האוויר במקומות באמצעות ממשק ה-API של איכות האוויר

במאמר הזה נסביר איך להשתמש ב-Air Quality API כדי ליצור חוויות חיפוש מקומות עשירות. נראה איך איכות האוויר יכולה להיות אות לערך למשתמשים מההתחלה ועד לסוף המשפך, ואיך אפשר להטמיע נתונים מ-Air Quality API בחוויות קיימות.

תרחישים לדוגמה וערך מוסף

אותות מ-Air Quality API יכולים להתאים לחוויות חיפוש שונות, למשל כשמשתמשים מחפשים מיקום לבקר בו. ‫Air Quality API מציע:

  • נתונים בזמן אמת * ונתונים היסטוריים – נתונים עדכניים ומדויקים שמייצגים את המצב הנוכחי וגם נתונים היסטוריים בחלון של 30 יום ברזולוציה של שעה. (* תמונת מצב שעתית של איכות האוויר בחוץ)
  • נתונים גלובליים ומקומיים – הנתונים מכסים אזורים שלמים ביותר מ-100 מדינות, אבל הם גם מאוד מקומיים (עד 500 מטרים). נתוני Air Quality API מספקים למשתמשים אותות חשובים להשוואה ולקבלת החלטות לגבי המקום המתאים ביותר.

איכות האוויר יכולה להיות שונה באופן משמעותי גם במיקומים סמוכים

הדרכה מפורטת לדוגמה

הצגת נתוני איכות האוויר בשלב מוקדם בתהליך

יש שתי דרכים עיקריות להצגת הנתונים של Air Quality API:

הצגת נתונים של Air Quality API בסיכות מיקום

  • בוחרים את המדד למיקום שלכם: מדד AQI אוניברסלי או מדד AQI מקומי (יש עד 70 מדדים שונים של איכות האוויר (AQI)). מדד איכות האוויר (AQI) הוא סולם שבאמצעותו מדינה מסוימת, למשל הסוכנות להגנת הסביבה בארה"ב (EPA), מסווגת רמות שונות של איכות האוויר, על סמך שיטות חישוב שונות, מקורות נתונים שונים ומטרות ייעודיות.
  • התחילו להציג את הערך העיקרי של Air Quality API ואת קוד הצבעים ישירות מתוך חוויית החיפוש של מקומות.

תצוגת ברירת המחדל יכולה לכלול רק את קוד הצבע.


הצגת מידע נוסף על Air Quality API כשבוחרים סיכה:

  • המשמעות של מדד איכות האוויר (AQI) האוניברסלי או המקומי.
  • רמות הזיהום, שהן מדד של חלקיקים וגזים באוויר: המזהם הדומיננטי, הריכוז, המקורות וההשפעות.
  • המלצות בריאותיות, שהן פעולות מומלצות בהתאם לתנאי איכות האוויר הנוכחיים.
  • אתם יכולים לשנות את רמת המידע שמוצגת כברירת מחדל בהתאם לצרכים שלכם. חשוב לזכור שנקודות נתונים של מיקום מסוים שימושיות לרוב בהשוואה למיקומים אחרים.

דוגמה לתצוגה של קטע איכות האוויר

תגובה לאיכות האוויר

{
    "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": …
    }
}
  • אפשר גם לשלוח שאילתה לגבי נתוני איכות האוויר רק כשמתבצעת אינטראקציה עם מיקום.

  • אתם יכולים להשתמש במדד של Air Quality API כדי לסנן מקומות בקרבת מקום, כלומר: אם אתם מחפשים פארקים באזור שלכם, יוצגו רק פארקים עם איכות אוויר טובה.

תגובה לאיכות האוויר

...
"color":{
  "red": 0.9490196,
  "green": 0.98039216,
  "blue": 0.019607844
}
...
 המרה ל-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)

הצגת שכבת מפת חום של Air Quality API במפה

אחת הדרכים הטובות לעשות זאת היא באמצעות אריחים צבעוניים של מפת חום:

  • כדי לספק סקירה כללית של אזור גדול.
  • כדי להציג במהירות ניואנסים באזור הזה.

משתמשים ב-Maps JavaScript API עם ImateMapType כדי להציג את המשבצות הנפרדות שנדרשות לכיסוי כל אזור התצוגה של מפת Google. המשבצות של מפת החום יתעדכנו כשהמשתמשים יבצעו פעולות במפה כמו הזזה, שינוי מרחק התצוגה או שינוי המיקום.

חשוב לזכור שהערך המקסימלי המותר של רמת הזום הוא 16.
יכול להיות ששכבת המשבצות של מפת החום של Air Quality API תיעלם בחיפוש היפר-לוקאלי.

אפשר לבחור סוגי מפות של מפת חום מתוך קבוצה מוגבלת של מדדי איכות אוויר:

  • UAQI_RED_GREEN – פלטת צבעים אדום-ירוק של מדד איכות האוויר האוניברסלי.
  • UAQI_INDIGO_PERSIAN - Universal Air Quality Index indigo-persian palette.
  • PM25_INDIGO_PERSIAN - PM2.5 index indigo-persian palette.
  • ‫GBR_DEFRA – לוח צבעים של מדד איכות האוויר היומי (בריטניה).
  • DEU_UBA – לוח צבעים של מדד איכות האוויר המקומי בגרמניה.
  • CAN_EC – לוח הצבעים של מדד איכות האוויר והבריאות בקנדה.
  • ‫FRA_ATMO – לוח הצבעים של מדד איכות האוויר בצרפת.
  • ‫US_AQI – לוח צבעים של מדד איכות האוויר בארה"ב.

    • חשוב לציין את סולם הצבעים כדי שהמשתמשים יוכלו להבין את הערך ואת דירוג הצבעים שלו:

    • סולם גרדיאנט של איכות האוויר (0-100): גרועה / מצוינת

    קטע קוד CSS של לוח צבעים: 

    .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 */
   );
}

    • צבעים אחידים שמייצגים נקודות מרכזיות בסולם UAQI ‏ (0-100): גרוע / מצוין

    מספר השאילתות והעלות המשויכת

    • ‫Maps JavaScript API: מפה אחת בטעינת החוויה.
    • ‫Air Quality API:
      • שאילתה אחת לכל מקום (הכל בהצגה של מפה או רק בבחירת המשתמש).
      • שכבת משבצות של מפת חום: כל תמונה של משבצת היא בגודל 256x256 פיקסלים, וכדי לכסות מפה רגילה שמוצגת במכשיר נייד או באינטרנט צריך 12-14 משבצות. כל אריח שנשלף נספר כיחידת מק"ט אחת.
    • חיפוש בקרבת מקום (חדש) API: שאילתה אחת לכל 20 מקומות שמוצגים. חיוב שונה בהתאם לנתוני המקום שכלולים בתשובת השאילתה.

    סיכום

    הראינו ש-Air Quality API יכול להיות נקודת נתונים חשובה למשתמשים שרוצים להחליט לאן לנסוע. לכן, נתוני איכות האוויר צריכים להיות גלויים מוקדם ככל האפשר בתהליך החיפוש, תוך הקפדה על כמות המידע שמוצגת בכל פעם ועל האופן שבו הוא מוצג.

    הפעולות הבאות

    הצעות לקריאה נוספת:

    תורמים

    Google היא זו שכותבת את המאמר הזה. הוא נכתב במקור על ידי התורמים הבאים.
    המחבר הראשי:

    Thomas Anglaret | Solutions Engineer