เว็บไซด์สำหรับดูพยากรณ์อากาศสำหรับวันพรุ่งนี้ โดยเอา 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";
}
}
?>
