สร้างแผนที่แสดงค่าฝุ่น PM2.5 ประเทศไทย

bysemicon -
0

 


ใช้ดัชนีคุณภาพอากาศตามมาตรฐานของ US-EPA 2016 standard (US AQI)  สีแดง ค่า AQI มากกว่า 150 

1. สมัครรับ API Token ฟรี

คลิก >>  Air Quality Open Data Platform: API Token Request Form

2. คัดลอก CODE

     

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PM2.5 Map of Thailand</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            width: 600px;
            height: 82vh;
            border: 2px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .box {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media only screen and (max-width: 600px) {
            #map {
                width: 100%;
            }
        }
    </style>
</head>

<body>
        <div style="text-align: center; padding: 10px;">
            <p style="font-size: 1.5rem;">ค่าฝุ่น PM2.5 ในประเทศไทย</p>
            <p style="font-size: 1rem;">ข้อมูลจากสถานีวัดคุณภาพอากาศทั่วประเทศ</p>
        </div>

        <div class="box">
            <div id="map"></div>
        </div>



    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const apiToken = "xxxxxxxxxxxx"; // ใส่ API Token ของคุณ

        // URL ของ API สำหรับดึงข้อมูลสถานีในประเทศไทย
        const apiUrl = 'https://api.waqi.info/map/bounds/?latlng=5.5,97.5,20.5,105.8&token=' + apiToken;

        // กำหนดพิกัดขอบเขตของประเทศไทย (bounding box)
        const thailandBounds = [
            [5.5, 97.5],  // พิกัดตะวันตกเฉียงใต้ (Southwest)
            [20.5, 105.8] // พิกัดตะวันออกเฉียงเหนือ (Northeast)
        ];

        // สร้างแผนที่และตั้งค่าให้อยู่ในขอบเขตประเทศไทย
        const map = L.map('map').fitBounds(thailandBounds);
        L.tileLayer('https://mt1.google.com/vt/lyrs=m&hl=th&x={x}&y={y}&z={z}', {
            maxZoom: 18,
            attribution: 'แผนที่ © Google'
        }).addTo(map);

        // ฟังก์ชันกำหนดสีของ Marker ตามค่า AQI
        function getMarkerColor(aqi) {
            if (aqi <= 50) return 'green'; // ดีมาก
            if (aqi <= 100) return 'yellow'; // ปานกลาง
            if (aqi <= 150) return 'orange'; // เริ่มมีผลต่อสุขภาพ
            return 'red'; // อันตราย
        }

        // ฟังก์ชันสร้าง Marker พร้อมสี
        function createColoredIcon(color) {
            return L.divIcon({
                className: "custom-icon",
                html: `<div style="background-color: ${color}; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white;"></div>`,
                iconSize: [20, 20],
                iconAnchor: [10, 10],
            });
        }

        // ดึงข้อมูลสถานีทั้งหมดในประเทศไทย
        async function fetchAllStations() {
            try {
                const response = await fetch(apiUrl);
                const data = await response.json();

                if (data.status === "ok" && data.data.length > 0) {
                    data.data.forEach(station => {
                        const { lat, lon, aqi, station: stationInfo } = station;

                        const markerColor = getMarkerColor(aqi); // กำหนดสีจากค่า AQI
                        const customIcon = createColoredIcon(markerColor); // สร้าง Marker

                        // เพิ่ม Marker บนแผนที่
                        L.marker([lat, lon], { icon: customIcon }).addTo(map)
                            .bindPopup(`
                <strong>สถานที่:</strong> ${stationInfo.name}<br>
                <strong>ค่าฝุ่น PM2.5 (AQI):</strong> ${aqi || "ไม่ทราบค่า"}<br>
                <strong>ตำแหน่ง:</strong> (${lat}, ${lon})
              `);
                    });
                } else {
                    alert("ไม่พบข้อมูลสถานีในพื้นที่ประเทศไทย");
                }
            } catch (error) {
                console.error("Error fetching data:", error);
                alert("เกิดข้อผิดพลาดในการเชื่อมต่อ API!");
            }
        }

        fetchAllStations();
    </script>
</body>

</html>



Version 2



 

     

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PM2.5 Map of Thailand</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
  
    /* ตั้งค่าโครงสร้าง */
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }

    /* สำหรับตาราง */
    .box table {
        width: 100%;
        border-collapse: collapse;
    }

    .box table th, .box table td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }

    .box table th {
        background-color: #f4f4f4;
    }

    /* สำหรับแผนที่ */
    #map {
        width: 100%;
        height: 80vh;
        border: 1px solid #ddd;
    }

    /* สำหรับหน้าจอเล็ก */
    @media (max-width: 768px) {
        .container {
            grid-template-columns: 1fr; /* เปลี่ยนเป็นแนวตั้ง */
        }

        .box {
            margin-bottom: 20px;
        }
    }

    </style>
</head>

<body>
    <div style="text-align: center; padding: 10px;">
        <h2>ค่าฝุ่น PM2.5 ในประเทศไทย</h2>
        <p style="font-size: 1.25rem;">ข้อมูลจากสถานีวัดคุณภาพอากาศทั่วประเทศ</p>
    </div>
    
    <div class="container">
        <div class="box">
            <h2 style="text-align: center;">ค่าฝุ่น PM 2.5 ทั่วไทย 10 อันดับแรก</h2>
            <table>
                <thead>
                    <tr>
                        <th>อันดับ</th>
                        <th>ค่า PM2.5 (AQI)</th>
                        <th>สถานี</th>
                    </tr>
                </thead>
                <tbody id="airQualityTableBody">
                    <!-- รายการข้อมูลจะแสดงที่นี่ -->
                </tbody>
            </table>
        </div>
        <div class="box">
            <div id="map"></div>
        </div>
    </div>



    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const apiToken = "xxxxxxxxxxxxxxxxxxxxxxxx";

        // URL ของ API สำหรับดึงข้อมูลสถานีในประเทศไทย
        const apiUrl = 'https://api.waqi.info/map/bounds/?latlng=5.5,97.5,20.5,105.8&token=' + apiToken;

        // กำหนดพิกัดขอบเขตของประเทศไทย (bounding box)
        const thailandBounds = [
            [5.5, 97.5],  // พิกัดตะวันตกเฉียงใต้ (Southwest)
            [20.5, 105.8] // พิกัดตะวันออกเฉียงเหนือ (Northeast)
        ];

        // สร้างแผนที่และตั้งค่าให้อยู่ในขอบเขตประเทศไทย
        const map = L.map('map').fitBounds(thailandBounds);
        L.tileLayer('https://mt1.google.com/vt/lyrs=m&hl=th&x={x}&y={y}&z={z}', {
            maxZoom: 18,
            attribution: 'แผนที่ © Google'
        }).addTo(map);

        // ฟังก์ชันกำหนดสีของ Marker ตามค่า AQI
        function getMarkerColor(aqi) {
            if (aqi <= 50) return 'green'; // ดีมาก
            if (aqi <= 100) return 'yellow'; // ปานกลาง
            if (aqi <= 150) return 'orange'; // เริ่มมีผลต่อสุขภาพ
            return 'red'; // อันตราย
        }

        // ฟังก์ชันสร้าง Marker พร้อมสี
        function createColoredIcon(color) {
            return L.divIcon({
                className: "custom-icon",
                html: `<div style="background-color: ${color}; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white;"></div>`,
                iconSize: [20, 20],
                iconAnchor: [10, 10],
            });
        }


        // ดึงข้อมูลสถานีทั้งหมดในประเทศไทย
        async function fetchAllStations() {
            try {
                const response = await fetch(apiUrl);
                const data = await response.json();
                // ดึงข้อมูลสถานีจาก API
                const stations = data.data;

                // กรองเฉพาะสถานีที่มีค่า AQI และชื่อสถานีที่มีคำว่า "Thailand"
                const sortedStations = stations
                    .filter(station =>
                        station.aqi !== "-" &&
                        station.station.name && // ตรวจสอบว่า station.name มีค่า
                        station.station.name.includes("Thailand")
                    )
                    .sort((a, b) => parseInt(b.aqi) - parseInt(a.aqi)) // เรียงตามค่าฝุ่น PM2.5
                    .slice(0, 10); // เลือกเฉพาะ 10 อันดับแรก

                // แสดงผลข้อมูลที่กรองแล้วใน Console
                console.log(sortedStations);

                if (data.status === "ok" && data.data.length > 0) {
                    stations.forEach(station => {
                        const { lat, lon, aqi, station: stationInfo } = station;

                        const markerColor = getMarkerColor(aqi); // กำหนดสีจากค่า AQI
                        const customIcon = createColoredIcon(markerColor); // สร้าง Marker

                        // เพิ่ม Marker บนแผนที่
                        L.marker([lat, lon], { icon: customIcon }).addTo(map)
                            .bindPopup(`
                        <strong>สถานที่:</strong> ${stationInfo?.name || "ไม่ระบุ"}<br>
                        <strong>ค่าฝุ่น PM2.5 (AQI):</strong> ${aqi || "ไม่ทราบค่า"}<br>
                        <strong>ตำแหน่ง:</strong> (${lat}, ${lon})
                    `);
                    });

                    displayTopStations(sortedStations);
                } else {
                    alert("ไม่พบข้อมูลสถานีในพื้นที่ประเทศไทย");
                }
            } catch (error) {
                console.error("Error fetching data:", error);
                alert("เกิดข้อผิดพลาดในการเชื่อมต่อ API!");
            }
        }



        function displayTopStations(stations) {
            const tableBody = document.getElementById("airQualityTableBody");
            tableBody.innerHTML = "";

            stations.forEach((station, index) => {
                // ใช้ RegEx เพื่อดึงข้อความในวงเล็บ
                const stationName = station.station.name;
                const nameInParentheses = stationName.match(/\((.*?)\)/);
                const extractedName = nameInParentheses 
                    ? nameInParentheses[1] 
                    : stationName.split("Thailand")[0].replace(/,\s*$/, "").trim() || "ไม่มีข้อมูล";
                const row = document.createElement("tr");
                row.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${station.aqi}</td>
                    <td>${extractedName}</td>
                `;
                tableBody.appendChild(row);
            });
        }

        document.addEventListener("DOMContentLoaded", fetchAllStations);

    </script>
</body>

</html>


3. ตั้งต่า API

แทนค่า xxxxxxxxxxxx ใน const apiToken = "xxxxxxxxxxxxxxxxxxxxxxxx"; ด้วย API Token ของคุณ

แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า