地図上に文字列を表示するプログラムです。
文字列をクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
地図上に文字列を表示するプログラムです。
文字列をクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
HTMLのソースは、地図にボタンを表示と同じですが、CSSのソースは、文字列マーカ用の定義を追加しています。
文字列は、LeafletのdivIconを使って表示します。デザインの一部は、CSSで設定します。
font-sizeで文字列の大きさを指定しますが、表示位置を左下基準にする場合は、iconAnchorの値もfont-sizeの値に合わせて変更する必要があります。デフォルトで4px程度のマージンがありますので、font-sizeの値+8程度の値に変更します。
文字列の色は、backgroundやborder属性で設定します。
個別に文字列の大きさや色を変更したい場合は、str_iconクラスをコピーして、対応することができます。classNameでは、複数のクラスを指定することもできるようです。
.str_icon {
font-size: 15px;
color: black;
background: white;
border: solid 1px gray;
border-radius: 3px;
padding: 0px 3px;
white-space: nowrap;
}
文字列表示のサンプルプログラムでは、日本三名園の位置に園名を表示しています。
園名の基準位置付近をクリックすると、名称と住所と写真を表示するポップアップが表示されます。
データ定義のソースは、地図上にマーカを表示と同じです。
JavaScriptのプログラムのソースは、地図上にマーカを表示から、マーカ定義をdivIconを使用した定義に変更することで、文字列を表示しています。
ポップアップが不要な場合は、.bindPopup(popup)を削除すると、文字列を表示するだけになります。
L.marker(latLng, { // 文字列マーカを登録
icon: L.divIcon({
html: place.name, // 表示文字列
iconAnchor: [0, 0], // 表示位置 [0,0]左上基準、[0,23]左下基準
iconSize: [-1, -1],
className: 'str_icon'
})
}).bindPopup(popup).addTo(grp);