leaflet - リーフレットでカスタム マーカーを使用するには?

Question

Google ドキュメントの共有 CSV からマーカー データを取得しています。リーフレットで問題なくマッピングできます。独自の PNG マーカーを使用したい。また、データ カテゴリごとに異なるマーカーを割り当てたい (「employees」フィールド = <10 の場合、 employee10.png を使用)

Answer 1

カスタム アイコンを使用したマーカーのドキュメント ページに例があります: http://leafletjs.com/examples/custom-icons.html

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

すべてのアイコンを定義してから、マーカーを作成するときにそれらを使用します。例えば、

var employeesLowIcon = L.icon({ ... });
var employeesHighIcon = L.icon({ ... });
var markerIcon = employees < 10 ? employeesLowIcon : employeesHighIcon;
L.marker([51.5, -0.09], {icon: markerIcon }).addTo(map);