Leaflet地図：「OpenWeatherMap」の天気予報表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、Leaflet地図に「OpenWeatherMap」の天気予報を表示してみた。

「OpenWeatherMap」のAPIを使用するには、APIキーが必要になるので、取得しておく。

【当日の天気取得URL】

https://api.openweathermap.org/data/2.5/weather?lat=緯度&lon=経度&units=metric&lang=ja&appid=｛APIキー｝

【1週間分の天気予報取得URL】

https://api.openweathermap.org/data/2.5/onecall?lat=緯度&lon=経度&units=metric&lang=ja&appid=｛APIキー｝

風向の日本語表記などで以下のWebページを参考にさせてもらった。

APIキーが見えてしまうので、作成したページはとりあえず非公開。

【サンプルソース抜粋】

地図でクリックした地点の3日分の天気予報を表示。

map.on('click', onMapClick);
function onMapClick(e) {
	lat = e.latlng.lat;
	lng = e.latlng.lng;
	var src = 'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lng + '&units=metric&lang=ja&appid=?????';
	fetch(src)
	.then((response) => {
		return response.text();
	})
	.then((text) => {
		var data = JSON.parse(text);
		var week_date = ['', '', ''];
		var week_icon = ['', '', ''];
		var week = ['', '', ''];
		for (i=0; i<3; i++) {
			week_date[i] += get_date_string(data.daily[i].dt);
			week_icon[i] += '<img src="https://openweathermap.org/img/w/' + data.daily[i].weather[0].icon + '.png">';
			week_icon[i] += '<br>' + data.daily[i].weather[0].description;
			week[i] = '気温：' + round_val(data.daily[i].temp.day) + ' ℃';
			week[i] += '<br>最高：<span class="hi">' + round_val(data.daily[i].temp.max) + '</span> ℃';
			week[i] += '<br>最低：<span class="lo">' + round_val(data.daily[i].temp.min) + '</span> ℃';
			week[i] += '<br>気圧：' + data.daily[i].pressure + ' hPa';
			week[i] += '<br>湿度：' + data.daily[i].humidity + ' %';
			week[i] += '<br>風向：' + get_deg_string(data.daily[i].wind_deg);
			week[i] += '<br>風速：' + data.daily[i].wind_speed + ' m/s';
		}
		var src = 'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lng + '&units=metric&lang=ja&appid=?????';
		fetch(src)
		.then((response) => {
			return response.text();
		})
		.then((text) => {
			var data = JSON.parse(text);
			var pos_addr = '<p>－　' + data.name + '　－</p>';	// 地点名
			var popHtml = pos_addr;
			popHtml += '<table class="weather"><tr><th>' + week_date[0] + '</th><th>' + week_date[1] + '</th><th>' + week_date[2] + '</th></tr>';
			popHtml += '<tr><th>' + week_icon[0] + '</th><th>' + week_icon[1] + '</th><th>' + week_icon[2] + '</th></tr>';
			popHtml += '<tr><td>' + week[0] + '</td><td>' + week[1] + '</td><td>' + week[2] + '</td></tr></table>';
			clickMarker = L.marker(e.latlng).on('click', onMarkerClick).addTo(map).bindPopup(popHtml).openPopup();
		})
	})
}
var get_deg_string = function(deg) {
	var r = '北';
	if (deg>=11.25) r = '北北東';
	if (deg>=33.75) r = '北東';
	if (deg>=56.25) r = '東北東';
	if (deg>=78.75) r = '東';
	if (deg>=101.25) r = '東南東';
	if (deg>=123.75) r = '南東';
	if (deg>=146.25) r = '南南東';
	if (deg>=168.75) r = '南';
	if (deg>=191.25) r = '南南西';
	if (deg>=213.75) r = '南西';
	if (deg>=236.25) r = '西南西';
	if (deg>=258.75) r = '西';
	if (deg>=281.25) r = '西北西';
	if (deg>=303.75) r = '北西';
	if (deg>=326.25) r = '北北西';
	return r+'の風';
};
var round_val = function(n) {
	return Math.round(n*10)/10;
};
var get_date_string = function(dt) {
	var date = new Date(dt*1000);
	var week = ['日','月','火','水','木','金','土'];
	var s = date.getMonth()+1+'月';
	s += date.getDate()+'日';
	s += '（'+week[date.getDay()]+'）';
	return s;
}

【画面イメージ】

天気予報の精度としては気象庁に比べて信頼できないかもしれない。気象庁の予報では神戸の明日(6月20日)、明後日(6月21日)は「晴時々曇」の予報。

f:id:art2nd:20210619143923j:plain