html,jsでleafletjsを使って防災地図の塗りつぶしがしたい
- 引越し先を選ぶときに、地震・洪水・土砂崩れ・津波などなど日本を襲う数多の災害をなるべく避けられるような土地を選びたい！
- だが、防災マップは自治体が発表していたり、洪水は国交省が管理していたり、データがバラバラすぎる
- 特に東京都さんの地震防災マップ！地図で表示されていないので、見にくすぎる！
- 洪水は国交省さんの重ねるハザードマップが普通に見やすいです。
- ということでleafletjsを使って地震危険度と洪水と土砂崩れが簡単に見られるようにしてみましょう。
東京都の町番地レベルでのgeojsonデータの取得
こちらの素晴らしいサイト様からデータをダウンロード
- 住所LOD GeoJSON ダウンローダー
htmlの準備
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>危険度マップ</title>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<div id='map'></div>
<script type="module" src="./index.js"> </script>
</body>
</html>
地震危険度データの取得＆加工
頑張ってデータを取得しました。
geojsonのpropertiesに危険度情報を格納し、geojsonとして保存します。
javascriptでのgeojsonの読み込み
index.js
// /初期位置の指定
var map = L.map('map').setView([35.68136689389706, 139.76713552513786], 13);
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var currentLayer = null;
// 区画の色を設定
function getColor(d) {
switch (d) {
case "5":
return '#990001';
case "4":
return '#FF0000';
case "3":
return '#FF9900';
case "2":
return '#C8DFC8';
case "1":
return '#CADBDA';
case "0":
return '#FFFFFF';
case "?":
return '#FFFFFF';
default:
return '#FFFFFF'; // デフォルトの色を追加
}
}
// 区画のスタイル定義
function style(feature) {
return {
fillColor: getColor(feature.properties.total),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
// マウスホバーでハイライト
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
// マウスホバーの解除
function resetHighlight(e) {
currentLayer.resetStyle(e.target);
}
// マウスホバーにアクションを追加
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
});
}
// 非同期でデータを読み込み
fetch("./earthquake/tokyo.geojson")
.then(response => response.json())
.then(json => {
currentLayer = L.geoJson(json, {
style: style,
onEachFeature: onEachFeature,
}).addTo(map);
})
.catch(error => {
console.error('Error loading the GeoJSON data: ' + error.message);
})
公開！
洪水・土砂災害も加えてゴニョゴニョっと修正し、丸二日で完成しましたー！
スマホだと描画に時間がかかるのがネックですが、引越しの際は使ってくださいね！
詰まってるとこ
leafletjsのレンダリングの終了フラグの取り方を教えてください！
大量データの時にデータ読み込みはフラグ取れるのですが、レンダリングが重い時にローディングが表示されません。マジでわからん。
About ささもち
和菓子屋さんではなく、経営コンサルティング、アプリ開発をしています。
制作物はこちらから