Leafletで番号付マーカーを設定
現在Windows10の環境でhtml、JavaScript、Leaflet全て初心者ですが、勉強がてらLeafletを使いマップを表示に挑戦しております。番号付マーカーを設定できないか思い下記のサイトを参考にしています。
https://dotscrapbook.wordpress.com/2014/11/28/simple-numbered-markers-with-Leaflet-js/
google翻訳で
次のようなCSSクラスを作成します。明らかに画像のパス/名前とフォントの色を置き換えます:
.number-icon
{
background-image: url("images/number-marker-icon.png");
text-align:center;
color:White;
}
次に、マーカーを作成するときに、このコードを追加して、「html」パラメーターに数値を入力する必要があります。
var numberIcon = L.divIcon({
className: "number-icon",
iconSize: [25, 41],
iconAnchor: [10, 44],
popupAnchor: [3, -40],
html: variable_containing_the_number
});
var marker = new L.marker([lat, long],
{
icon: numberIcon
});
とあり「html:1」とか「html:"A"」のような静的値の場合までは出来るのですが、マーカーを増やした場合に増分する変数のような動的値の場合も出来るとありますがどのようにすれば良いのかご教授お願いします。
他に配列を利用して複数マーカーを設定しているのですが配列に任意の番号を組み入れた場合、その番号で表示できないかどうかもお願いいたします。
お礼
返事が遅れてすみません。回答ありがとうございます。 多型マーカーというのは、固体によって異なる塩基配列の指標のことなのですね。 例もあげていただいて、大変わかりやすく教えていただきました。 ありがとうございました。