ソースファイルを表示
sample/sample_cross.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leaflet 地図の中央に十字カーソルを表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style type="text/css">
#map_container {
position:absolute;
top:0; left:0; right:0; bottom:0;
}
.cross { /* 十字アイコン */
color: black;
background: transparent;
width: 36px; height:: 36px;
}
.cross::before {
content: "";
position: absolute;
top: -13px; left: 3px;
width: 2px; height: 7px;
border-top: 13px solid black;
border-bottom: 13px solid black;
border-radius: 2px;
}
.cross::after {
content: "";
position: absolute;
top: 3px; left: -14px;
width: 7px; height: 2px;
border-left: 13px solid black;
border-right: 13px solid black;
border-radius: 2px;
}
</style>
<script type="text/javascript" charset="UTF-8">
function init() {
let map = L.map('map_container');
map.setView([37,136.5], 6); // 日本を表示
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>"
}).addTo(map); // 地理院地図を表示
let cross = L.divIcon({ // CSSを使ったDivIconを作成
className: 'cross',
bgPos: [18, 18]
});
let crossMark = L.marker(map.getCenter(), { // マーカとして登録
icon: cross, zIndexOffset: 100, interactive: false
}).addTo(map);
map.on('move', function() { // mousemoveイベントでマーカを移動
crossMark.setLatLng(map.getCenter());
});
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
</body>
</html>