はじめに
初めてアドベントカレンダーなるものに参加させて頂きました。プログラムを書くことは好きですが、独学のため（と言うか基本サンプルコードを書き換えるだけ）ですが、自分へのメモとして書きたいと思います。
目的
雨雲レーダーを表示する
取得するデータ
気象庁の「雨雲の動き」を使用する。
タイルのURLは下記を参考に取得した。
気象庁のデータを使用するので、ライセンスは利用規約を読むと、政府標準利用規約(第2.0版)に準拠およびCC BYのようです。
ソースコード
map.html
<!DOCTYPE html>
<html lang="jp">
<head>
<title>雨雲レーダー</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//非同期で気象庁APIを叩く
async function call_api(url) {
const request = await fetch(url);
const response = await request.json();
return response
}
const url =
"https://www.jma.go.jp/bosai/himawari/data/satimg/targetTimes_jp.json";
//非同期チェーン
call_api(url).then(function init(time) {
const map = new maplibregl.Map({
container: 'map',
zoom: 5,
center: [138, 37],
minZoom: 1,
maxZoom: 22,
//maxBounds: [122, 20, 154, 50],
style: {
version: 8,
sources: {
// 背景地図ソース
osm: {
type: 'raster',
tiles: [
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
],
tileSize: 256,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
},
},
layers: [
{
id: 'osm-layer',
source: 'osm',
type: 'raster',
minZoom: 0,
maxZoom: 18,
}
]
}
});
map.on('load', function () {
map.addSource(
' rain_map', {
type: 'raster',
tiles: [
"https://www.jma.go.jp/bosai/jmatile/data/nowc/" +
time[1]["basetime"] +
"/none/" +
time[1]["validtime"] +
"/surf/hrpns/{z}/{x}/{y}.png",
],
minzoom: 1,
maxzoom: 16,
tileSize: 256,
attribution: "<a href='https://www.jma.go.jp/bosai/nowc/' target='_blank'>雨雲の動き</a>"
}
);
map.addLayer({
id: 'rain_map',
source: 'rain_map',
type: 'raster',
paint: {
'raster-opacity': 0.7
},
});
// NavigationControl
let nc = new maplibregl.NavigationControl();
map.addControl(nc, 'top-left');
// スケール表示
map.addControl(new maplibregl.ScaleControl({
maxWidth: 200,
unit: 'metric'
}));
});
});
</script>
</body>
</html>
参考