Dashboard monitoringu jakości powietrza w czasie rzeczywistym

Dashboard ArcGIS Online

Interaktywny dashboard publikowany w ArcGIS Online, pokazujący w czasie rzeczywistym jakość powietrza w Warszawie. Dane pobierane są automatycznie z API GIOŚ, a wizualizacja obejmuje stężenia PM10, PM2.5 i NO2 z dokładnością godzinową. Zawiera mapę z punktami pomiarowymi, wykresy trendów oraz klasyfikacje kategorii jakości.

Miejsca na kod z dashboarda

Kod z ArcGIS Notebooks

Python • ArcGIS Notebook

import requests
from arcgis.gis import GIS
from arcgis.features import FeatureLayer
from datetime import datetime

gis = GIS("home")
LAYER_URL = "https://services9.arcgis.com/XzFo5ArWiIwKyBgo/arcgis/rest/services/GIOS_Warszawa_Live/FeatureServer/0"
feature_layer = FeatureLayer(LAYER_URL)

def get_category(val, p_type):
    if val is None:
        return "Brak danych"
    
    if p_type == "PM10":
        if val <= 20: return "Bardzo dobry"
        if val <= 50: return "Dobry"
        if val <= 80: return "Umiarkowany"
        if val <= 110: return "Dostateczny"
        return "Zły / B. Zły"
    
    elif p_type == "PM2.5":
        if val <= 13: return "Bardzo dobry"
        if val <= 35: return "Dobry"
        if val <= 55: return "Umiarkowany"
        if val <= 75: return "Dostateczny"
        return "Zły / B. Zły"
    
    elif p_type == "NO2":
        if val <= 40: return "Bardzo dobry"
        if val <= 100: return "Dobry"
        if val <= 150: return "Umiarkowany"
        if val <= 200: return "Dostateczny"
        return "Zły / B. Zły"
    
    return "N/A"
    
def get_live_gios_data():
    base_url = "https://api.gios.gov.pl/pjp-api/v1/rest"
    stations_resp = requests.get(f"{base_url}/station/findAll?size=500").json()
    all_stations = stations_resp.get('Lista stacji pomiarowych', [])
    warsaw = [s for s in all_stations if isinstance(s, dict) and s.get('Nazwa miasta') == 'Warszawa']

    features = []
    for s in warsaw:
        s_id = s['Identyfikator stacji']
        sensors_resp = requests.get(f"{base_url}/station/sensors/{s_id}").json()
        sensors_list = sensors_resp.get('Lista stanowisk pomiarowych dla podanej stacji', [])
        obs = {"pm10": None, "pm25": None, "no2": None}
        
        for sn in sensors_list:
            if not isinstance(sn, dict): continue
            
            kod = str(sn.get('Wskaźnik - kod', ''))
            sn_id = sn.get('Identyfikator stanowiska')
            
            target_field = None
            if kod == 'PM10': target_field = "pm10"
            elif kod == 'PM2.5': target_field = "pm25"
            elif kod == 'NO2': target_field = "no2"
            
            if target_field and sn_id:
                d_resp = requests.get(f"{base_url}/data/getData/{sn_id}").json()
                measurements = d_resp.get('Lista danych pomiarowych', [])
                for m in measurements:
                    val = m.get('Wartość') if m.get('Wartość') is not None else m.get('value')
                    if val is not None:
                        obs[target_field] = float(val)
                        break 

        features.append({
            "attributes": {
                "station_id": s_id,
                "nazwa_stacji": s['Nazwa stacji'],
                "pm10": obs["pm10"],
                "pm25": obs["pm25"],
                "no2": obs["no2"],
                "kat_pm10": get_category(obs["pm10"], "PM10"),
                "kat_pm25": get_category(obs["pm25"], "PM2.5"),
                "kat_no2": get_category(obs["no2"], "NO2"),
                "last_update": int(datetime.now().timestamp() * 1000)
            },
            "geometry": {
                "x": float(s['WGS84 λ E']), 
                "y": float(s['WGS84 φ N']), 
                "spatialReference": {"wkid": 4326}
            }
        })
    return features

final_features = get_live_gios_data()
if final_features:
    feature_layer.delete_features(where="1=1")
    feature_layer.edit_features(adds=final_features)

Kod stylu listy z dashboarda

Arcade Expression • Lista

// 1. Pobranie kategorii PM10 z warstwy
var kat = $datapoint.kat_pm10;

// 2. Definicja kolorów tła (delikatne)
var bgColor = decode(kat, 
    "Bardzo dobry", "#E8F5E9", 
    "Dobry", "#F1F8E9",        
    "Umiarkowany", "#FFFDE7",  
    "Dostateczny", "#FFF3E0",  
    "Zły / B. Zły", "#FFEBEE", 
    "#F5F5F5");                

// 3. Kolor akcentu (Pasek boczny - nasycony)
var accentColor = decode(kat, 
    "Bardzo dobry", "#4CAF50", 
    "Dobry", "#8BC34A", 
    "Umiarkowany", "#FBC02D", 
    "Dostateczny", "#EF6C00", 
    "Zły / B. Zły", "#C62828", 
    "#9E9E9E");

return {
  textColor: "#333333",
  backgroundColor: bgColor,
  separatorColor: "#FFFFFF",
  selectionColor: "#EEEEEE",
  selectionTextColor: "#000000",
  attributes: {
      barColor: accentColor,
      statusLabel: Upper(kat)
  }
}

Kod tabelki z dashboarda

HTML • Tabela informacyjna

<div style="font-family:Arial, sans-serif;padding:10px;">
    <h3 style="color:#333;text-align:center;">
        Klasyfikacja Jakości Powietrza (GIOŚ)
    </h3>
    <p style="color:#666;font-size:0.9rem;margin-bottom:15px;text-align:center;">
        Poniższa tabela przedstawia normy stężeń godzinnych (1h) dla kluczowych parametrów.
    </p>
    <figure class="table" style="width:100%;">
        <table style="border-collapse:collapse;font-size:0.85rem;">
            <thead>
                <tr style="background-color:#f2f2f2;border-bottom:2px solid #ddd;">
                    <th style="padding:8px;text-align:left;">
                        Kategoria
                    </th>
                    <th style="padding:8px;text-align:center;">
                        PM10
                    </th>
                    <th style="padding:8px;text-align:center;">
                        PM2.5
                    </th>
                    <th style="padding:8px;text-align:center;">
                        NO2
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        <span style="color:#009966;"><strong>●</strong></span> Bardzo dobry
                    </td>
                    <td style="padding:8px;text-align:center;">
                        0 – 20
                    </td>
                    <td style="padding:8px;text-align:center;">
                        0 – 13
                    </td>
                    <td style="padding:8px;text-align:center;">
                        0 – 40
                    </td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        <span style="color:#99cc00;"><strong>●</strong></span> Dobry
                    </td>
                    <td style="padding:8px;text-align:center;">
                        20,1 – 50
                    </td>
                    <td style="padding:8px;text-align:center;">
                        13,1 – 35
                    </td>
                    <td style="padding:8px;text-align:center;">
                        40,1 – 100
                    </td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        <span style="color:#ffde33;"><strong>●</strong></span> Umiarkowany
                    </td>
                    <td style="padding:8px;text-align:center;">
                        50,1 – 80
                    </td>
                    <td style="padding:8px;text-align:center;">
                        35,1 – 55
                    </td>
                    <td style="padding:8px;text-align:center;">
                        100,1 – 150
                    </td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        <span style="color:#ff9933;"><strong>●</strong></span> Dostateczny
                    </td>
                    <td style="padding:8px;text-align:center;">
                        80,1 – 110
                    </td>
                    <td style="padding:8px;text-align:center;">
                        55,1 – 75
                    </td>
                    <td style="padding:8px;text-align:center;">
                        150,1 – 200
                    </td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        <span style="color:#cc0033;"><strong>●</strong></span> Zły / B. Zły
                    </td>
                    <td style="padding:8px;text-align:center;">
                        > 110,1
                    </td>
                    <td style="padding:8px;text-align:center;">
                        > 75,1
                    </td>
                    <td style="padding:8px;text-align:center;">
                        > 200,1
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
    <div style="background-color:#f9f9f9;border-radius:5px;font-size:0.8rem;margin-top:15px;padding:10px;">
        <strong>Uwaga:</strong> Wszystkie wartości podane są w <strong>µg/m³</strong>. Dane aktualizowane automatycznie co 18h na podstawie API GIOŚ.
    </div>
</div>

Kod Arcade wyświetlania stylu stacji na mapie

Arcade Expression • Symbolizacja mapy

// 1. Pobierz kategorię wyłącznie dla PM10
var kat = $feature.kat_pm10;

// 2. Obsługa pustych danych
if (IsEmpty(kat) || kat == "") {
    return "Brak danych";
}

// 3. Zwróć kategorię (używaną do symbolizacji/legendy)
return kat;