Leaflet地図：国土地理院のハザードマップを重ねて表示。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

以下の7つを重ねて表示できるようにした。

洪水浸水想定区域（想定最大規模）
浸水継続時間（想定最大規模）
高潮浸水想定区域
津波浸水想定
土砂災害警戒区域（土石流）
土砂災害警戒区域（急傾斜地の崩壊）
土砂災害警戒区域（地すべり）

現時点では、全国すべてをカバーしていないマップもある。

var Overlay_Map = new Array();
Overlay_Map[ 4 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/01_flood_l2_shinsuishin_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：洪水浸水想定区域（想定最大規模）'
});
Overlay_Map[ 5 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/01_flood_l2_keizoku_data/{z}/{x}/{y}.png', {
	opacity: 0.3, maxNativeZoom: 17,
	attribution: '国土地理院：浸水継続時間（想定最大規模）'
});
Overlay_Map[ 6 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/03_hightide_l2_shinsuishin_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：高潮浸水想定区域'
});
Overlay_Map[ 7 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/04_tsunami_newlegend_data/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：津波浸水想定'
});
Overlay_Map[ 8 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_dosekiryukeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：土砂災害警戒区域（土石流）'
});
Overlay_Map[ 9 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_kyukeishakeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：土砂災害警戒区域（急傾斜地の崩壊）'
});
Overlay_Map[ 10 ] = L.tileLayer('https://disaportaldata.gsi.go.jp/raster/05_jisuberikeikaikuiki/{z}/{x}/{y}.png', {
	opacity: 0.5, maxNativeZoom: 17,
	attribution: '国土地理院：土砂災害警戒区域（地すべり）'
});
var overlay = {
	...
	...
	...
	'ハザードマップ 洪水浸水想定区域': Overlay_Map[ 4 ],
	'ハザードマップ 浸水継続時間': Overlay_Map[ 5 ],
	'ハザードマップ 高潮浸水想定区域': Overlay_Map[ 6 ],
	'ハザードマップ 津波浸水想定': Overlay_Map[ 7 ],
	'ハザードマップ 土石流': Overlay_Map[ 8 ],
	'ハザードマップ 急傾斜地の崩壊': Overlay_Map[ 9 ],
	'ハザードマップ 地すべり': Overlay_Map[ 10 ]
};
L.control.layers(baseMap, overlay).addTo(map);