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

プログラムの概要とデモ

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

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

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

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

L.circleMarker(latLng, {
	title: place.name,
	color: '#0000cc',
	radius: 10,
	opacity: 1.0,
	fillOpacity: 0.3
}).bindPopup(popup).addTo(grp);