日本の旅客鉄道の変遷および日本の高速道路整備の変遷をMapLibre GL JSで表示してみました

# はじめに

国土数値情報の[鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)と[高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v2_0.html)を用いて、日本の旅客鉄道の変遷（1872～2021年）および日本の高速道路整備の変遷（1963～2021年）をMapLibre GL JSで表示してみました。

- 鉄道時系列データおよび高速道路時系列データは、以下の国土数値情報の提供サイトよりgeojsonファイル（令和3年）をダウンロードして使用しています。

- 国土数値情報-鉄道時系列データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html

- 国土数値情報-高速道路時系列データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v2_0.html

- 背景地図には[MapTiler](https://www.maptiler.com/copyright/)を使用しているため、別途、MapTilerにてAPI Keyの取得が必要になります。

★★★↓Mapbox GL JS(v2)はこちらの記事を参照願います。★★★
[日本の旅客鉄道の変遷をMapbox GL JSで表示してみました](https://qiita.com/syanseto/items/39fe2b52b6366c1b511c)
[日本の高速道路整備の変遷をMapbox GL JSで表示してみました](https://qiita.com/syanseto/items/43bfc797e0508c10c0e3)

# アウトプットイメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Day 25 of <a href="https://twitter.com/hashtag/30DayMapChallenge?src=hash&amp;ref_src=twsrc%5Etfw">#30DayMapChallenge</a> - Colour Friday: 2 colours<br>日本の旅客鉄道🚆および日本の高速道路整備🚙の変遷を2色で表現。2色でボカシを入れて光らせるのは難しい📝<a href="https://twitter.com/hashtag/MapLibre?src=hash&amp;ref_src=twsrc%5Etfw">#MapLibre</a> <a href="https://twitter.com/hashtag/MapTiler?src=hash&amp;ref_src=twsrc%5Etfw">#MapTiler</a> <a href="https://t.co/jOpAlTHrYk">pic.twitter.com/jOpAlTHrYk</a></p>&mdash; shi_works🌔 (@syanseto) <a href="https://twitter.com/syanseto/status/1596125720677613568?ref_src=twsrc%5Etfw">November 25, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 前提条件
- [鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)は、令和3年の「N05-21_RailroadSection2.geojson」を用いています※。
- ※ただし、フィルタで使用する、geojsonファイルの属性の供用開始年（N05_004）と設置期間（設置終了）（N05_005e）が文字列のため、あらかじめQGIS等で整数に変換したものを用いています。
- [高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v2_0.html)は、令和3年の「N06-21_HighwaySection.geojson」を用いています。
- 下記のコード内のMapTilerのAPI Key、geojsonファイルのパスを入力してください。

# html、CSS、JavaScript
```html:highway&railroad_transition.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>日本の旅客鉄道および日本の高速道路整備の変遷</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <style>
        .map-overlay {
            font: 18px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 25%;
            top: 0;
            left: 0;
            padding: 10px;
        }

        .map-overlay .map-overlay-inner {
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .map-overlay h2 {
            line-height: 24px;
            display: block;
            margin: 0 0 10px;
        }

        .map-overlay .legend .bar {
            height: 10px;
            width: 100%;
            background: linear-gradient(to right, #CCFFCC, #00ff00);
        }

        .map-overlay input {
            background-color: transparent;
            display: inline-block;
            width: 100%;
            position: relative;
            margin: 0;
            cursor: ew-resize;
        }
    </style>
    <div id="map"></div>
    <div class="map-overlay top">
        <div class="map-overlay-inner">
            <h3>日本の旅客鉄道および日本の高速道路整備の変遷</h3>
            使用データ：<br>
            <a href="https://nlftp.mlit.go.jp/index.html" target="_blank" rel="noopener">
                国土数値情報, 鉄道時系列データ及び高速道路時系列データ（国土交通省）</a><br><br>
            <label id="year_label"></label>
            <input id="slider" type="range" min="1872" max="2021" step="1" value="1872">
        </div>
    </div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/darkmatter/style.json?key=MapTilerのAPI Keyを入力してください',
            center: [139.6226196, 35.4660694], // 中心座標
            zoom: 8, // ズームレベル
            pitch: 0 // 傾き
        })

        // ズーム・回転
        map.addControl(new maplibregl.NavigationControl());

        // フルスクリーンモードのオンオフ
        map.addControl(new maplibregl.FullscreenControl());

        // スケール表示
        map.addControl(new maplibregl.ScaleControl({
            maxWidth: 200,
            unit: 'metric'
        }));

        function filterBy(year) {
            const filter1 = ['all', ['<=', 'N06_002', year]]; // 設置期間（開始年）
            map.setFilter('highway-lines-1', filter1);
            map.setFilter('highway-lines-2', filter1);
            map.setFilter('highway-lines-3', filter1);

            const filter2 = ['all', ['<=', 'N05_004_int', year], ['>=', 'N05_005e_int', year]]; // 供用開始年と設置期間（設置終了）
            map.setFilter('railroad-lines-1', filter2);
            map.setFilter('railroad-lines-2', filter2);
            map.setFilter('railroad-lines-3', filter2);

            // スライダー表示用ラベル
            document.getElementById('year_label').textContent = year.toString() + '年';
        }

        map.on('load', () => {
            d3.json(
                'data/N06-21_HighwaySection.geojson',
                json1Callback
            );
            d3.json(
                'data/N05-21_RailroadSection2_int.geojson',
                json2Callback
            );
        });

        function json2Callback(data) {
            map.addSource('railroad', {
                'type': 'geojson',
                'data': data
            });

            // ライン
            map.addLayer({
                'id': 'railroad-lines-1',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(25, 0, 101, 0.3)',
                        2021,
                        'rgba(25, 0, 101, 0.3)'
                    ],
                    'line-width': 18,
                    'line-blur': 0.8
                }
            });
            map.addLayer({
                'id': 'railroad-lines-2',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 0, 203, 0.6)',
                        2021,
                        'rgba(0, 0, 203, 0.6)'
                    ],
                    'line-width': 6,
                    'line-blur': 0.4
                }
            });
            map.addLayer({
                'id': 'railroad-lines-3',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(204, 242, 255, 1)',
                        2021,
                        'rgba(204, 242, 255, 1)'
                    ],
                    'line-width': 1.5,
                }
            });
            // フィルター実行
            // filterBy(1962); // 初期表示
            filterBy(1872); // 初期表示
            document.getElementById('slider').addEventListener('input', (e) => {
                const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化
                filterBy(year);
            });
        }

        function json1Callback(data) {
            map.addSource('highway', {
                'type': 'geojson',
                'data': data
            });

            // ライン
            map.addLayer({
                'id': 'highway-lines-1',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 112, 32, 0.3)',
                        2021,
                        'rgba(0, 112, 32, 0.3)'
                    ],
                    'line-width': 18,
                    'line-blur': 0.8
                }
            });
            map.addLayer({
                'id': 'highway-lines-2',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 172, 64, 0.6)',
                        2021,
                        'rgba(0, 172, 64, 0.6)'
                    ],
                    'line-width': 6,
                    'line-blur': 0.4
                }
            });
            map.addLayer({
                'id': 'highway-lines-3',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(220, 236, 220, 1)',
                        2021,
                        'rgba(220, 236, 220, 1)'
                    ],
                    'line-width': 1.5,
                }
            });

            // フィルター実行
            // filterBy(1962); // 初期表示
            filterBy(1872); // 初期表示
            document.getElementById('slider').addEventListener('input', (e) => {
                const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化
                filterBy(year);
            });
        }
    </script>
</body>
</html>
```
# 参考文献
タイムスライダーを作成
https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/