地図上にCSSマーカを表示（Leaflet）

全国ロケ地ガイド
Leafletの使い方
地図上にCSSマーカを表示（Leaflet）

プログラムの概要とデモ

　地図上にCSSマーカを表示するプログラムです。 CSSマーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。 CSSマーカは、表示データをCSSで定義するため、画像を読み込む必要がなくなるというメリットがあります。

ソースの説明

HTML、CSSのソース

　HTMLのソースは、地図にボタンを表示と同じですが、CSSのソースは、CSSマーカの定義を追加しています。

CSSの追加ソース

　CSSマーカは、CSSのcss_iconクラスで定義したデータを表示します。マーカの色は、color属性で設定します。

.css_icon { /* CSSアイコン */
    position: relative;
}
.css_icon:before {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	color: #2b82cb;
	border: 6px solid currentColor;
	border-radius: 100% 100% 0 100%;
	background: radial-gradient(circle, white, #cfefff);
	transform: rotate(45deg) translate(-34px, -9px);
}

JavaScriptのデータ定義のソース

　CSSマーカ表示のサンプルプログラムでは、日本三名園の位置に園名を表示しています。マーカをクリックすると、名称と住所と写真を表示するポップアップが表示されます。
　データ定義のソースは、地図上にマーカを表示と同じです。

JavaScriptのプログラムのソース

　JavaScriptのプログラムのソースは、地図上にマーカを表示から、マーカ定義をdivIconを使用した定義に変更することで、CSSマーカを表示しています。

L.marker(latLng, {
	icon: L.divIcon({
		html: '',
		className: 'css_icon',
		iconSize: [0, 0]
	})
}).bindPopup(popup).addTo(grp);