อินเตอร์เนต

พยากรณ์อากาศสำหรับวันพรุ่งนี้

เว็บไซด์สำหรับดูพยากรณ์อากาศสำหรับวันพรุ่งนี้ โดยเอา api มาจากกรมอุตุนิยมวิทยา จากนั้นเขียนโค๊ดให้แสดงแผนที่ประเทศไทย และมือคลิ๊กลงบนแผนที่ประเทศไทย จะแสดงการพยากรณ์อากาศสำหรับวันพรุ่งนี้ ตามแลตติจูดและลองติจูด ที่ทำการคลิ๊ก โดยมีข้อมูลที่แสดงการพยากรณ์อากาศเฉพาะประเทศไทยเท่านั้น

ทดลองใช้งานได้ที่ Weather Map (radarstudio.online)

Code index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Map</title>
    <!-- Include Leaflet CSS and JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 900px;"></div>

    <script>
        var map = L.map("map").setView([13.40, 100.10], 6.5); // Set the initial view to Thailand
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "© OpenStreetMap contributors"
        }).addTo(map);

        // Add a click event listener to the map
        map.on('click', function(e) {
            var lat = e.latlng.lat.toFixed(2);
            var lon = e.latlng.lng.toFixed(2);

            // Call the PHP script with the lat and lon values
            fetch('your_php_script.php?lat=' + lat + '&lon=' + lon)
                .then(response => response.text())
                .then(data => {
                    // Output the result (if needed)
                    console.log(data);

                    // Clear existing markers
                    map.eachLayer(function (layer) {
                        if (layer instanceof L.Marker) {
                            map.removeLayer(layer);
                        }
                    });

                    // Add a new marker at the clicked location
                    var marker = L.marker([lat, lon]).addTo(map);

                    // Add a popup with the data from the API response
                    marker.bindPopup(data).openPopup();
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
	<center><b>การใช้งาน :</b>ใช้เมาส์คลิ๊กบนแผนที่เพื่อดูการพยากรณ์อากาศสำหรับวันพรุ่งนี้ ตรงตำแหน่งนั้น (<b>มีข้อมูลเฉพาะประเทศไทยเท่านั้น</b>) </center>
	</body>
</html>

Code your_php_script.php

<?php
$lat = $_GET['lat'];
$lon = $_GET['lon'];
// Get the current date
//$currentDate = date("Y-m-d");
$tomorrowDate = date("Y-m-d", strtotime($currentDate . ' +1 day'));
// Check if lat and lon are within the specified range
if ($lat < 5.61 || $lat > 20.47 || $lon < 97.34 || $lon > 105.64) {
    echo "ไม่มีข้อมูล";
    exit;
}

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => "https://data.tmd.go.th/nwpapi/v1/forecast/location/daily/at?lat=$lat&lon=$lon&fields=tc,tc_max,tc_min,rh,slp,rain,cond&date=$tomorrowDate&duration=1",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => array(
       "accept: application/json",
    "authorization: Bearer YourAPIกรมอุตุฯ",
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);

if ($err) {
    echo "cURL Error: $err";
} else {
    $data = json_decode($response, true);

    if ($data && isset($data['WeatherForecasts'][0]['forecasts'])) {
        $popupContent = '';

        foreach ($data['WeatherForecasts'][0]['forecasts'] as $forecast) {
            $timestamp = strtotime($forecast['time']);
            $formattedTime = date('l, j F Y H:i:s', $timestamp + (7 * 3600));
            $temperature = $forecast['data']['tc'];
            $temperatureMAX = $forecast['data']['tc_max'];
            $temperatureMIN = $forecast['data']['tc_min'];
            $humidity = $forecast['data']['rh'];
            $pressure = $forecast['data']['slp'];
            $rainfall = $forecast['data']['rain'];
            $conditionCode = $forecast['data']['cond'];

            switch ($conditionCode) {
                case 1:
                    $conditionText = 'ท้องฟ้าแจ่มใส';
                    break;
                case 2:
                    $conditionText = 'มีเมฆบางส่วน';
                    break;
                case 3:
                    $conditionText = 'เมฆเป็นส่วนมาก';
                    break;
                case 4:
                    $conditionText = 'มีเมฆมาก';
                    break;
                case 5:
                    $conditionText = 'ฝนตกเล็กน้อย';
                    break;
                case 6:
                    $conditionText = 'ฝนปานกลาง';
                    break;
                case 7:
                    $conditionText = 'ฝนตกหนัก';
                    break;
                case 8:
                    $conditionText = 'ฝนฟ้าคะนอง';
                    break;
                case 9:
                    $conditionText = ' อากาศหนาวจัด';
                    break;
                case 10:
                    $conditionText = 'อากาศหนาว';
                    break;
                case 11:
                    $conditionText = 'อากาศเย็น ';
                    break;
                case 12:
                    $conditionText = 'อากาศร้อนจัด';
                    break;
                default:
                    $conditionText = 'ไม่มีข้อมูล';
                    break;
            }

            $popupContent .= "<table style='border-collapse: collapse; width: 100%; border: 1px solid #ddd;'>" .
                "<tr style='background-color: #f2f2f2;'><td colspan='2' style='padding: 10px; text-align: center;'><b style='color: #333;'>พรุ่งนี้ : $formattedTime</b></td></tr>" .
                "<tr><td style='padding: 10px;'><b>อุณหภูมิสูงสุด:</b></td><td style='padding: 10px; color: #e44d26;'>$temperatureMAX °C</td></tr>" .
                "<tr><td style='padding: 10px;'><b>อุณหภูมิต่ำสุด: </b></td><td style='padding: 10px; color: #2f9e44;'>$temperatureMIN °C</td></tr>" .
                "<tr><td style='padding: 10px;'><b>ความชื้นสัมพัทธ์: </b></td><td style='padding: 10px; color: #007bff;'>$humidity%</td></tr>" .
                "<tr><td style='padding: 10px;'><b>ความกดอากาศ:</b></td><td style='padding: 10px; color: #ff9800;'>$pressure hPa</td></tr>" .
                "<tr><td style='padding: 10px;'><b>ปริมาณฝน:</b></td><td style='padding: 10px; color: #795548;'>$rainfall mm</td></tr>" .
                "<tr><td style='padding: 10px;'><b>สภาพอากาศทั่วไป:</b></td><td style='padding: 10px; color: #673ab7;'>$conditionText</td></tr>" .
                "</table><br>";

        }

       echo $popupContent;
    } else {
        echo "No data available";
    }
}
?>

เรื่องน่าสนใจ