ソースファイルを表示
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;
cursor: default;
}
.cross::before { /* 十字カーソル */
content: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" \
viewBox="-24 -24 48 48" stroke="black" stroke-width="3">\
<path d="M 6 0 h 18 M -6 0 h -18 M 0 6 v 18 M 0 -6 v -18 Z"/>\
</svg>');
position: absolute;
top: calc(50% - 24px); left: calc(50% - 24px);
opacity: 0.6;
z-index: 490;
pointer-events: none;
}
</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); // 地理院地図を表示
}
</script>
</head>
<body onload="init()">
<div id="map_container" class="cross"></div>
</body>
</html>