<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes" /
<title>酒田市内Webハザードマップ</title>
<script type="text/javascript" href="jquery-2.1.0.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js"></script>
<!-- plugin -->
<script src="dist/leaflet.sprite.js"></script>
<!-- plugin -->
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
widht: 100vw;
}
</style>
<script>
function PrintScript() {
//印刷範囲を設定
htmlcode = window.document.body.innerHTML;
sprnstr = "<!--PrintStart-->";
eprnstr = "<!--PrintEnd-->";
var prnhtml = htmlcode.substr(htmlcode.indexOf(sprnstr)+sprnstr.length);
prnhtml = prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = htmlcode;
}
</script>
</head>
<body>
<h1>酒田市地震ハザードマップ</h1>
<a onClick="PrintScript();"><image src="copy.png" alt="印刷"/></a>
<!--PrintStart-->
<div id="map" style="height: 500px; width: 800px;"></div>
<!--PrintEnd-->
<script>
//それぞれの地図に切り替える
var m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});
var m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});
var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});
var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});
var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map('map', {
center: [38.893394,139.820519],
zoom: 13,
zoomControl: true,
layers: [o_std]
});
var ParkIcon = L.icon({
iconUrl: 'favicon.ico',
iconRetinaUrl: 'favicon.ico',
iconSize: [30, 30],
iconAnchor: [25, 20],
popupAnchor: [0, -30]
});
var Map_KML_Property = L.geoJson(null, {
pointToLayer: function (feature, layer) {
return L.marker(layer, { icon: ParkIcon });
}}).addTo(map);
var Map_KML = omnivore.kml('default.kml', null, Map_KML_Property);
var Map_b = {
"MIERUNE地図 color": m_color,
"MIERUNE地図 mono": m_mono,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ": t_ort,
"OpenStreetMap 標準": o_std
};
L.Icon.Default.imagePath = 'https://unpkg.com/leaflet@1.3.1/dist/images/';
var aa = L.marker([38.9, 139.25],{icon: L.spriteIcon()}).bindPopup('庄内沖地震震央(1833年） <br>震度6の海溝型地震'),
bb = L.marker([38.9,139.9]).bindPopup('庄内地震震央(1894年）<br> 震度7の内陸直下型地震'),
cc = L.marker([38.8936044,139.8191921].bindPopup('東北公益文科大学南駐車場 <br>森林に囲まれていて涼しい。高台なので津波にも対応可能'),
dd = L.marker([38.9039735,139.836983].bindPopup('若竹西公園 <br>庄内沖と最上川に囲まれているので大きい地震での避難には適していない。風通しの良い場所なので涼しい。'),
ee = L.marker([38.9060723, 139.8471038],{icon: L.spriteIcon('blue')}).bindPopup('亀ヶ崎小学校体育館<br>小学校の体育館ではストーブを貸してくれる可能性あり'),
ff = L.marker([38.9029631,139.8471038],{icon: L.spriteIcon('yellow')}).bindPopup('亀ヶ崎公園 <br>休憩所や水飲み場があり、頑丈な石垣もあるので夏や冬の厳しい環境にも対応できる');
var jisin = L.layerGroup([aa, bb]);
var summer = L.layerGroup([cc, dd]);
var winter = L.layerGroup([ee, ff]);
var overlayMaps = {
"過去の地震": jisin,
"夏の避難所": summer,
"冬の避難所": winter
};
L.control.layers(overlayMaps).addTo(map);
var mapMarker = L.marker([38.9190069,139.82804829], { icon: L.spriteIcon('green')}).addTo(map);
var comment = '日和山公園 <br>高台に作られているため巨大地震が発生した際の避難には最適。ただし避難後の混雑は注意しておいた方が良い。 ';
mapMarker.bindPopup(comment).openPopup();
var mapMarker = L.marker([38.85916599,139.9564960], { icon: L.spriteIcon('red') }).addTo(map);
var comment = 'sample <br> 北新町一丁目公園';
mapMarker.bindPopup(comment).openPopup();
var mapMarker = L.marker([38.90241,139.81372639], { icon: L.spriteIcon('red') }).addTo(map);
var comment = '若宮町一丁目公園 <br>二丁目と違い、やや山地の方に作られているが、海側であるため一時的な避難でしか適していない。 ';
mapMarker.bindPopup(comment).openPopup();
var mapMarker = L.marker([38.8989167,139.8095490], { icon: L.spriteIcon('red') }).addTo(map);
var comment = '若宮町二丁目公園 <br>やや広いため、地震の避難場所としては有能であるが、日本海に近いので巨大地震の場合は津波の恐れあり。 ';
mapMarker.bindPopup(comment).openPopup();
var mapMarker = L.marker([38.9026232,139.8220933], { icon: L.spriteIcon('yellow')}).addTo(map);
var comment = ' 高見台一丁目公園 <br>';
mapMarker.bindPopup(comment).openPopup();
var mapMarker = L.marker([38.85916599,139.9564960], { icon: L.spriteIcon('yellow') }).addTo(map);
var comment = '啄成学区コミュニティ防災センター駐車場 <br> ';
mapMarker.bindPopup(comment).openPopup();
38.9,139.9
//クリックすると経緯度が出る
map.on('click', function(e) {
//クリック位置経緯度取得
lat = e.latlng.lat;
lng = e.latlng.lng;
//経緯度表示
alert("lat: " + lat + ", lng: " + lng);
} );
//位置情報を取り込む
function onLocationFound(e) {
L.marker(e.latlng).addTo(map).bindPopup("現在地").openPopup();
}
function onLocationError(e) {
alert("現在地を取得できませんでした。" + e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16, timeout: 20000});
//縮尺
L.control.scale({ maxWidth: 250, imperial: false }).addTo(map);
L.control.layers(Map_b, null, { collapsed: false }).addTo(map);
</script>
<button class="sp-mode" style="display:none;">スマートフォン用で表示</button>
<button class="pc-mode" style="display:none;">PC用で表示</button>
</body>
</html>
