<!DOCTYPE html>
<html lang="ja">
<head>
<title>マップ: AEDクイズ</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="stamp.css">
<link rel="stylesheet" href="src/leaflet.css" /> <!-- (1) -->
<script src="src/leaflet.js"></script>
<script src="src/leaflet-omnivore.min.js"></script>
<script src="singleclick.js"></script>
<style type="text/css">
div#mymap {width: 90vw; height: 80vh; margin: 0 auto;} /* (2) */
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
border-color: blue;
}
.leaflet-popup-content,
a.leaflet-popup-close-button {
color: blue !important;
font: bold 14pt monospace;
}
.leaflet-popup-content-wrapper {
border-width: 3px;
border-style: double;
}
.leaflet-popup-tip-container {
margin-top: -3px;
height: 23px;
}
.leaflet-popup-tip {
border-style: solid;
border-width: 0 3px 3px 0;
}
var greenIcon= L.icon({
iconUrl:"Hana.png",
iconSize:[20,37],
iconAnchor:[20,20],
popupAnchor:[0,-70]
});
var tubomiIcon = L.icon({
iconUrl:"Tubomi.png",
iconSize:[20,37],
iconAnchor:[20,20],
popupAnchor:[0,-70]
});
marker.on('click', function(){
if (marker.getIcon() === tubomiIcon) {
marker.setIcon(greenIcon);}
});
</style>
</head>
<body>
<h1>AEDクイズ<span id="title"></span></h1>
<div id="mymap"></div> <!-- (3) -->
<!-- #mymap であるdivを配置したあとで (4) -->
<a href="https://www.city.sakata.lg.jp/shisei/opendata/opendata_aed.html" alt="酒田市AED設置状況"></a>
<script type="text/javascript" src="AEDmap.js" charset="utf-8"></script>
</body>
</html>
