MapLibreで今昔地図を表示
過去の地図を重ねる意味
現在の地図と過去の地図を重ねて表示することで、都市や地域の変遷を視覚的に確認することができます。これは都市開発の歴史を学ぶためや、古い建物や自然の変化を追跡するために有用です。地理や歴史の研究において、今昔地図のようなツールは、変わりゆく地形や建造物の変化を理解するための強力な手段となります。
今昔地図とは
「今昔地図」とは、過去の地図と現在の地図を比較し、都市の変遷や自然環境の変化を視覚的に確認できるツールです。例えば、古い地図と現在の地図を重ねることで、建物やインフラがどのように変化してきたのかを追跡することができます。多くの場合、古地図と現代の衛星写真などを組み合わせて表示します。
MapLibreで実装時の注意
MapLibreを使用して今昔地図を実装する際の注意点として、特に重要なのは、使用するタイルの座標系が「南西」基準である場合です。例えば、今昔地図の多くは「TMS形式」を使用しており、標準のタイル座標系とは異なるため、カスタム設定が必要です。MapLibreでは、この形式をサポートするために scheme: 'tms' を指定する必要があります。
タイル座標系の設定例:
{
type: 'raster',
tiles: ['https://example.com/tiles/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms'
}ソースコード
以下は、MapLibreを使用して今昔地図を表示する提供されたソースコードの例です。このコードでは、浜松駅を中心に複数の時代の地図をオーバーレイすることができます。また、オーバーレイの透過度を調整する機能も含まれています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>表示/非表示切り替え</title>
<meta name="description" content="sample" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
}
#layerControl {
position: absolute;
top: 20px;
left: 20px;
padding: 20px;
margin-bottom: 20px;
width: 15%;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
#opacityControl {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="layerControl">
<span>背景地図: </span>
<select name="layer-control" onChange="changeMap(this.value)">
<option value="pale-layer">淡色地図</option>
<option value="photo-layer">写真</option>
<option value="std-layer">標準地図</option>
</select>
<br>
<span>オーバーレイ: </span>
<select name="overlay-control" onChange="changeOverlay(this.value)">
<option value="none">なし</option>
<option value="1889-layer">1889-1890年</option>
<option value="1916-layer">1916-1918年</option>
<option value="1938-layer">1938-1950年</option>
<option value="1956-layer">1956-1959年</option>
<option value="1975-layer">1975-1988年</option>
<option value="1988-layer">1988-1995年</option>
<option value="1996-layer">1996-2010年</option>
</select>
<br>
<div id="opacityControl">
<label for="opacitySlider">透明度: </label>
<input type="range" id="opacitySlider" min="0" max="1" step="0.01" value="0.5" onInput="updateOpacity(this.value)">
</div>
</div>
<script>
let currentOverlay = null;
const map = new maplibregl.Map({
container: 'map',
center: [137.73447, 34.704171],
zoom: 15,
style: {
version: 8,
sources: {
pale: {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: "地図の出典：<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
},
photo: {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'],
tileSize: 256,
attribution: "地図の出典：<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
},
std: {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: "地図の出典：<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
},
'1889': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/2man/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1916': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/00/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1938': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/01/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1956': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/02/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1975': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/03/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1988': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/04/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
},
'1996': {
type: 'raster',
tiles: ['https://ktgis.net/kjmapw/kjtilemap/hamamatsu/05/{z}/{x}/{y}.png'],
tileSize: 256,
scheme: 'tms',
attribution: "今昔マップ on the web"
}
},
layers: [
{
id: 'pale-layer',
type: 'raster',
source: 'pale'
},
{
id: 'photo-layer',
type: 'raster',
source: 'photo',
layout: {
visibility: 'none'
}
},
{
id: 'std-layer',
type: 'raster',
source: 'std',
layout: {
visibility: 'none'
}
},
{
id: '1889-layer',
type: 'raster',
source: '1889',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1916-layer',
type: 'raster',
source: '1916',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1938-layer',
type: 'raster',
source: '1938',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1956-layer',
type: 'raster',
source: '1956',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1975-layer',
type: 'raster',
source: '1975',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1988-layer',
type: 'raster',
source: '1988',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
},
{
id: '1996-layer',
type: 'raster',
source: '1996',
layout: {
visibility: 'none'
},
paint: {
'raster-opacity': 0.5
}
}
]
}
});
function changeMap(selectedMap) {
['pale-layer', 'photo-layer', 'std-layer'].forEach(layer => {
map.setLayoutProperty(layer, 'visibility', layer === selectedMap ? 'visible' : 'none');
});
}
function changeOverlay(selectedOverlay) {
['1889-layer', '1916-layer', '1938-layer', '1956-layer', '1975-layer', '1988-layer', '1996-layer'].forEach(layer => {
map.setLayoutProperty(layer, 'visibility', 'none');
});
if (selectedOverlay !== 'none') {
map.setLayoutProperty(selectedOverlay, 'visibility', 'visible');
currentOverlay = selectedOverlay;
} else {
currentOverlay = null;
}
}
function updateOpacity(opacity) {
if (currentOverlay) {
map.setPaintProperty(currentOverlay, 'raster-opacity', parseFloat(opacity));
}
}
</script>
</body>
</html>
出典と作成者
今昔地図は、埼玉大学教育学部の谷謙二教授によって開発された「今昔マップ on the web」を元にしています。このツールは、複数の時代の地図を視覚的に比較することができ、都市の変遷を追跡するための非常に有用なリソースです。
詳細は今昔マップ on the webをご覧ください。
#今昔地図 #古地図 #MapLibre #WebGIS #地理教育 #都市変遷 #国土地理院 #GIS #地図比較 #オープンデータ
コメント