はじめに

国土数値情報の高速道路時系列データを用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）のタイムスライダー機能で表示してみました。

高速道路時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html
背景地図にはMapboxを使用しているため、別途、Mapboxにてアクセストークンの取得及びstyleのURLが必要になります。

★★★↓鉄道バージョンはこちらの記事を参照願います。★★★
日本の旅客鉄道の変遷をMapbox GL JSで表示してみました

アウトプットイメージ

関西の高速道路整備の変遷（1963～2020年）。データの出典は国土数値情報の高速道路時系列データ。関西出身やけど、路線名はよくわからない🙇‍♂️MapboxGLJSのタイムスライダーは時系列データを表示する際に便利な機能でごわす📝🧐#BuiltWithMapbox #Mapbox #高速道路整備の変遷 pic.twitter.com/z1WXysO0I1
— shi_works🌓 (@syanseto) August 23, 2021

※「高速道路時系列データ」(国土交通省)
(https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html) を用いて作成

前提条件

高速道路時系列データは令和2年の「N06-20_HighwaySection.geojson」を用いています。
下記のコードでMapboxのアクセストークン、styleのURL及びN06-20_HighwaySection.geojsonのパスを入力してください。
なお、フィルタにはN06-20_HighwaySection.geojsonの属性の「設置期間（開始年）（N06_002）」を用いています。
また、ラベル（高速道路の名称）にはN06-20_HighwaySection.geojsonの属性の「路線名（N06_007）」を用いています。

html、CSS、JavaScript

highway_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">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
    <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, #006400, #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">
            <h1>日本の高速道路整備の変遷</h1>
            使用データ：<br>
            <a href="https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html" target="_blank" rel="noopener">
                国土数値情報, 高速道路時系列データ（国土交通省）</a><br><br>
            <label id="year_label"></label>
            <input id="slider" type="range" min="1962" max="2020" step="1" value="1962">
        </div>
        <div class="map-overlay-inner">
            <div id="legend" class="legend">
                <div class="bar"></div>
                <div align="center">昔（1962年）← → 最近（2020年）</div>
            </div>
        </div>
    </div>

    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>
        mapboxgl.accessToken = 'Mapboxのアクセストークンを入力してください';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'styleのURLを入力してください', // 例）mapbox://styles/mapbox/satellite-v9
            center: [139.7527995, 35.685175],
            zoom: 8
        });

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

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

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

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

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

        map.on('load', () => {
            // jsonCallback(highway);
            d3.json(
                'N06-20_HighwaySection.geojsonのパスを入力してください', // 例）data/N06-20_HighwaySection.geojson
                jsonCallback
            );
        });

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

            // ライン
            map.addLayer({
                'id': 'highway-lines',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        '#006400',
                        2020,
                        '#00ff00'
                    ],
                    'line-width': 7,
                    'line-opacity': 0.5
                }
            });

            // ラベル（高速道路の名称）
            map.addLayer({
                'id': 'highway-labels',
                'type': 'symbol',
                'source': 'highway',
                'layout': {
                    'text-field': ['concat', ['to-string', ['get', 'N06_007']]],
                    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
                    'text-size': 12
                },
                'paint': {
                    'text-color': 'rgba(0,0,0,0.5)'
                }
            });

            // フィルター実行
            filterBy(1962); // 初期表示
            document.getElementById('slider').addEventListener('input', (e) => {
                const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化
                filterBy(year);
            });
        }
    </script>

</body>

</html>

参考文献