地図上にCSSマーカを表示(Leaflet)プログラムの概要とデモ地図上にCSSマーカを表示するプログラムです。CSSマーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。CSSマーカは、表示データをCSSで定義するため、画像を読み込む必要がなくなるというメリットがあります。デモを実行HTMLソースを表示ソースの説明HTML、CSSのソースHTMLのソースは、地図にボタンを表示と同じですが、CSSのソースは、CSSマーカの定義を追加しています。CSSの追加ソースCSSマーカは、CSSのcss_iconクラスで定義したデータを表示します。マーカの色は、color属性で設定します。}JavaScriptのデータ定義のソースCSSマーカ表示のサンプルプログラムでは、日本三名園の位置に園名を表示しています。マーカをクリックすると、名称と住所と写真を表示するポップアップが表示されます。データ定義のソースは、地図上にマーカを表示と同じです。JavaScriptのプログラムのソースJavaScriptのプログラムのソースは、地図上にマーカを表示から、マーカ定義をdivIconを使用した定義に変更することで、CSSマーカを表示しています。