diviconでleafletのマーカーにhtmlタグを使用する

Leafletで地図上にマーカーをプロットする際には、以下のようにマーカーを追加できる。

L.marker([lat,lon]).addTo(map);

デフォルトのアイコンは、L.Icon.Defaultオブジェクトが与えられる。（青色のピン）

ここでマーカーのアイコンを画像などに置き換えたいときは、iconオプションで指定してあげればよい。

L.marker([lat,lon], { icon: myIcon }).addTo(map);

ここでiconオプションに与えるアイコンをdivタグで作成したいときは、L.divIconオブジェクトを作成し、iconオプションに与えてあげればよい。divタグにクラスを与えたいときはclassNameオプションで指定する。

var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

divタグの中身にHTMLタグを入れたいときは、htmlオプションで引数にHTMLタグを文字列として渡してあげればよい。

var myIcon = L.divIcon({ html: HTMLタグ });

DivIcon Documentation