地図の中央に十字カーソルを表示（Leaflet）

全国ロケ地ガイド
Leafletの使い方
地図の中央に十字カーソルを表示（Leaflet）

プログラムの概要とデモ

　Leafletで作成した地図の中央に十字カーソルを表示するだけのプログラムです。 mousemoveイベントを利用しているので、負荷が高くなる場合があります。

ソースの説明

HTMLのソース

　HTMLのソースは、基本的な地図表示と同じです。

JavaScriptのプログラムのソース

　複数の地図の切替は、Controlクラスに、ベースマップとオーバーレイマップのデータを渡すだけで、後はすべてLeafletが制御してくれます。
Controlクラスでは、他にも、ズーム制御や縮尺目盛の表示などを行うことができます。ボタン位置の設定も、top,bottom,left,rightで上下左右の方向を指定するだけです。

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());
});

　画像を使ったアイコンを表示したい場合は、DivIconクラスではなく、Iconクラスを利用します。

let cross = L.icon({ // 画像を使ったIconを作成
	iconUrl: 'img/cross01.png',
	iconSize: [36, 36], iconAnchor: [18, 18]
});

DivIconを使う場合のCSSのソース

　十字カーソルをDivIconを使って表示する場合は、CSSで十字カーソルのデザインをする必要があります。ここで紹介している十字カーソルのCSSは汎用的に作成してありますので、コピー＆ペーストするだけで利用できます。画像を使ったIconを利用する場合には、画像を用意する必要がありますが、CSSの定義は不要です。

.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;
}