はじめに

初めてアドベントカレンダーなるものに参加させて頂きました。プログラムを書くことは好きですが、独学のため（と言うか基本サンプルコードを書き換えるだけ）ですが、自分へのメモとして書きたいと思います。

目的

雨雲レーダーを表示する

取得するデータ

気象庁の「雨雲の動き」を使用する。
タイルの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: '&copy; <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>

【MapLibre】雨雲レーダーを表示してみた

はじめに

目的

取得するデータ

ソースコード

参考