Latihan - Menampilkan data kualitas udara di peta

7 menit

Dalam unit ini, Anda mengambil data kualitas udara dari API dan mengonversinya ke GeoJSON. Kemudian, Anda dapat menggunakan data di aplikasi peta Anda sebagai lapisan gelembung informasi untuk lokasi.

Mendapatkan data kualitas udara

Indeks Kualitas Udara Dunia menggabungkan data kualitas udara dari seluruh dunia. Data tersedia melalui API gratis sebagai pembacaan Indeks Kualitas Udara (AQI) saat ini dari beberapa stasiun rekaman di seluruh dunia. Anda dapat menggunakan data di aplikasi Anda.

Saat meminta data, Anda memiliki dua opsi. Anda dapat:

Minta data untuk satu lokasi, untuk mendapatkan pembacaan terdekat untuk kota atau lokasi.
Minta data untuk semua stasiun dalam persegi yang ditentukan dengan menggunakan koordinat utara-timur dan barat daya persegi panjang.

Peta harus memplot data sebanyak mungkin berdasarkan area peta yang terlihat. Data AQI hanya dapat diminta untuk stasiun yang berada di area peta yang terlihat. Mempersempit permintaan Anda membuat panggilan API lebih cepat karena hanya data yang diperlukan yang diminta.

Format data AQI

Data AQI berada pada format JOSN berikut ini:

{
    "status": "ok",
    "data": [
        {
            "lat": 42.290094,
            "lon": -123.2321,
            "uid": 68,
            "aqi": "12",
            "station": {
                "name": "Applegate Valley, Oregon, USA",
                "time": "2020-04-21T17:00:00-07:00"
            }
        },
        ...
    ]
}

Properti data berisi array objek JSON untuk semua stasiun pengukur yang diminta. Objek memiliki lokasi yang ditentukan oleh garis bujur, garis lintang, dan pengukuran AQI. Data tidak dapat diplot pada peta dalam format yang Anda terima. Aplikasi Anda harus terlebih dahulu mengonversi data ke koleksi fitur GeoJSON.

Langkah-langkah berikut adalah gambaran umum langkah-langkah yang Anda ambil untuk mengonversi data AQI ke koleksi fitur. Nanti di unit ini, Anda menerapkan langkah-langkah ini dalam kode.

Untuk mengonversi data AQI ke koleksi fitur GeoJSON:

Buat koleksi fitur kosong.
Untuk setiap item dalam data array, buat fitur baru:
1. Geometri fitur adalah lokasi Point, dengan koordinat diatur ke bujur lon dan lintang lat.
2. Alih-alih merencanakan pengukuran AQI secara langsung, lebih mudah untuk mewakili data sebagai gelembung berwarna. Konversi pengukuran AQI menjadi nilai warna sebagai string heksa RGB. Kemudian, tambahkan nilai warna yang dikonversi ke array fitur properties.
Berikut adalah GeoJSON untuk data dalam contoh ini:
```
{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-123.2321, 42.290094]
            },
            "properties": {
                "color": "#009966"
            }
        }
    ]
}
```

Mendapatkan token API

Untuk menggunakan WAQI API, daftarkan kunci API. Kemudian, Anda menambahkan kunci ke variabel lingkungan untuk aplikasi.

Untuk mendapatkan kunci WAQI API:

Buka halaman permintaan token Air Quality Open Data Platform di situs web WAQI.
Masukkan alamat email dan nama Anda.
Tinjau dan setujui ketentuan layanan penggunaan API.
Pilih kirim.
Periksa kotak masuk email Anda untuk pesan konfirmasi dari situs web WAQI. Di pesan email, pilih tautan Konfirmasi alamat email Anda.
Setelah mengonfirmasi alamat email, Anda dialihkan ke halaman web baru yang menampilkan token Anda. Salin dan simpan token Anda.

Token adalah nilai kunci WAQI API yang Anda gunakan di langkah selanjutnya.

Memperbarui aplikasi untuk menggunakan token API

Saat Anda memiliki token WAQI API, tambahkan nilai kunci token ke variabel lingkungan untuk aplikasi Anda:

Di Visual Studio Code, buka file .env di folder kode aplikasi Anda.
Tambahkan pernyataan berikut di akhir file .env:
```
WAQI_API_KEY=<your waqi key>
```
Ganti <your waqi key> dengan nilai kunci WAQI API Anda.
Simpan perubahan pada file .env.
Di Visual Studio Code, buka file app.py Anda.
Dalam kode app.py, temukan pernyataan yang memuat nilai MAP_KEY. Setelah pernyataan tersebut, tambahkan pernyataan berikut untuk memuat kunci WAQI API. Kode menentukan konstanta WAQI_API_KEY untuk URL API:
```
# Load the World Air Quality Index key from the .env file.
WAQI_API_KEY = os.environ["WAQI_API_KEY"]
WAQI_API_URL = "https://api.waqi.info/map/bounds/?latlng={},{},{},{}&token={}"
```
mendefinisikan WAQI_API_URL panggilan untuk mendapatkan semua pembacaan kualitas udara untuk wilayah persegi panjang yang ditentukan oleh koordinat lon dan lat .
Simpan perubahan pada file app.py.

Tambahkan sumber data ke peta

Langkah terakhir adalah menambahkan sumber data ke peta untuk merender data AQI. Azure Maps menggunakan sumber data untuk memplot lapisan. Sumber data bisa mendapatkan datanya dari kumpulan fitur GeoJSON.

Di Visual Studio Code, buka file home.html di folder template untuk aplikasi Anda.

Dalam file ini, temukan pernyataan yang menangani peristiwa ready untuk peta. Kode ini akan muncul pada baris 46 hingga 52:

// When the map is ready, center the map on the user's location.
map.events.add('ready', function () {
    map.setCamera({
        center: map_center,
        zoom: 5
    })
})

Ganti bagian kode ini dengan pernyataan berikut, lalu simpan file:

// When the map is ready, center the map on the user's location.
map.events.add('ready', function () {
    // Declare a data source for the AQI data.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Declare a function to update the AQI data.
    function updateAQIData(e) {
        // Get the current bounds on the screen.
        bounds = map.getCamera().bounds

        // Set the data source data to results of the AQI call.
        // This is a feature collection that contains the AQI measurements.
        fetch('./aqi?bounds=' + bounds)
            .then(res => {
                return res.json()
            }).then(response => {
                datasource.clear()
                datasource.setShapes(response)
            })
    }

    // Add a bubble layer.
    map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
        radius: 10,
        opacity: 0.5,
        strokeOpacity: 0,
        // Get the color from the color property.
        color: ['get', 'color']
    }));

    // Handle any events that change the bounds of the map.
    map.events.add('zoomend', updateAQIData)
    map.events.add('dragend', updateAQIData)
    map.events.add('pitchend', updateAQIData)

    map.setCamera({
        center: map_center,
        zoom: 5
    })
})

Sumber data ini digunakan untuk membuat lapisan gelembung yang memperlihatkan lingkaran di peta. Lapisan ini menunjukkan satu gelembung untuk setiap fitur dalam koleksi fitur, menggunakan koordinat geometri. Gelembung memiliki ukuran tetap dan opasitas, tetapi warnanya tidak tetap. Sebaliknya, kode ['get', 'color'] memberi tahu peta untuk memuat warna dari properti fitur yang disebut color.

Fungsi updateAQIData ditambahkan ke tiga peristiwa peta yang diaktifkan saat peta diperbesar atau dipindahkan, atau nada diubah. Setiap kali pengguna memindahkan peta, fungsi dipanggil. Fungsi ini mendapatkan batas saat ini dari kamera Peta; yaitu, dari koordinat utara-barat dan tenggara dari bagian peta yang terlihat di layar. Fungsi kemudian meneruskan batas ini ke panggilan ke api rute, memanggil ke kode Python untuk memuat data AQI. Terakhir, kumpulan fitur ditambahkan ke sumber data.

Memuat data kualitas udara

Aplikasi Flask perlu memanggil API untuk memuat data untuk bagian peta yang terlihat.

Buka file app.py.

Tambahkan kode berikut ke bagian bawah file:

def get_color(aqi):
    # Convert the AQI value to a color.
    if aqi <= 50: return "#009966"
    if aqi <= 100: return "#ffde33"
    if aqi <= 150: return "#ff9933"
    if aqi <= 200: return "#cc0033"
    if aqi <= 300: return "#660099"
    return "#7e0023"

def load_aqi_data(lon1, lat1, lon2, lat2):
    # Load the air quality data.
    url = WAQI_API_URL.format(lat1, lon1, lat2, lon2, WAQI_API_KEY)
    aqi_data = requests.get(url)

    # Create a GeoJSON feature collection from the data.
    feature_collection = {
        "type" : "FeatureCollection",
        "features" : []
    }

    for value in aqi_data.json()["data"]:
        # Filter out empty values.
        if value["aqi"] != "-":
            feature_collection["features"].append({
                "type" : "Feature",
                "properties" : {
                    "color" : get_color(int(value["aqi"]))
                },
                "geometry" : {
                    "type":"Point",
                    "coordinates":[value['lon'], value['lat']]
                }
                })

    return feature_collection

@app.route("/aqi", methods = ["GET"])
def get_aqi():
    # Get the bounds from the request.
    bounds = request.args["bounds"].split(",")

    # Load the AQI data and create the GeoJSON for the specified bounds.
    return json.dumps(load_aqi_data(bounds[0], bounds[1], bounds[2], bounds[3]))

Simpan file.

Kode ini menerapkan panggilan API di dalam aplikasi Flask yang memuat data AQI dari API untuk serangkaian koordinat tertentu. Data AQI kemudian dikonversi ke koleksi fitur dan dikembalikan sebagai string JSON. Kemudian, API dapat dipanggil dari halaman web.

Menampilkan data kualitas udara di peta

Koleksi fitur yang Anda buat dari data WAQI siap ditampilkan di peta.

Di Visual Studio Code, pastikan file app.py Anda terbuka. Pilih ikon Jalankan di Bilah Aktivitas untuk membuka tampilan Jalankan. Kemudian, pilih panah hijau untuk menjalankan aplikasi Flask dan membukanya di browser.

Anda akan melihat lingkaran berwarna (gelembung) di peta yang memperlihatkan data WAQI:

Bergerak di sekitar peta dan melihat pembaruan gelembung agar sesuai dengan area yang Anda lihat.

Lihatlah warna yang berbeda untuk melihat area kualitas udara yang buruk atau berbahaya. Pikirkan tentang mengapa kualitas udara sangat buruk di daerah-daerah ini. Beberapa alasan jelas, seperti di daerah dengan sejumlah besar stasiun listrik atau pabrik pembakaran bahan bakar fosil. Tempat lain yang tidak begitu jelas. Temukan yang ada di dekat Anda dan pikirkan tentang apa yang dapat menyebabkan polusi.

Lanjutkan