はじめに
国土数値情報の高速道路時系列データを用いて、高速道路整備の変遷（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>
参考文献