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

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

プログラムの概要とデモ

　地図の中央に十字カーソルを表示するプログラムです。地図を表示しているタグの中央に十字カーソルを表示しているだけで、Leafletの機能は使っていません。 Leafletのmousemoveイベントで、リアルタイムにカーソルを書き換える方法もありますが、システムの負荷が高くなるため、お勧めしません。

ソースの説明

HTMLのソース

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

JavaScriptのプログラムのソース

　十字カーソルのデータは、CSSで定義しています。ですから、Leafletの地図を表示するためのdivタグに、クラス指定を追加するだけで十字カーソルを表示できます。

<div id="map_container" class="cross"></div>

SVGデータを使う場合のCSSのソース

　十字カーソルを表示する場合は、CSSで十字カーソルのデザインをする必要があります。ここで紹介している十字カーソルのCSSは汎用的に作成してありますので、コピー＆ペーストするだけで利用できます。
　Leafletではタイルマップのz-indexが400で、マーカなどのシャドウのz-indexが500となっているため、十字カーソルのz-indexは490に設定しています。

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

PNG画像ファイルを使う場合のCSSのソース

　CSSの定義方法を変更することで、PNG画像ファイルやSVGファイルを使って十字カーソルを表示することもできます。

.cross::before { /* 十字カーソル */
	content: url('img/cross01.png');
	position: absolute;
	top: calc(50% - 24px); left: calc(50% - 24px);
	width: 49; height: 49;
	opacity: 0.6;
	z-index: 490;
	pointer-events: none;
}