11 - カスタムマーカーアイコン

学習内容: デフォルトのマーカーを独自のアイコンに変更します。

ポイント:

// 画像ベースのカスタムアイコン
const customIcon = L.icon({
    iconUrl: 'path/to/icon.png',
    iconSize: [32, 32],      // アイコンサイズ
    iconAnchor: [16, 32],    // アイコンの基準点
    popupAnchor: [0, -32]    // ポップアップの位置
});

// HTMLベースのDivIcon
const divIcon = L.divIcon({
    className: 'custom-div-icon',
    html: '<div class="emoji-icon">🏪</div>',
    iconSize: [30, 30],
    iconAnchor: [15, 15]
});

// アイコンを使用
L.marker([35.68, 139.76], { icon: customIcon }).addTo(map);