16 - レイヤーコントロール

学習内容: Leaflet標準のレイヤーコントロールUIを使用してベースマップとオーバーレイを切り替えます。

ポイント:

// ベースレイヤーを定義
const baseLayers = {
    "OpenStreetMap": osmLayer,
    "CartoDB Light": cartoLight,
    "CartoDB Dark": cartoDark
};

// オーバーレイレイヤーを定義
const overlays = {
    "レストラン": restaurantsGroup,
    "ホテル": hotelsGroup,
    "駅": stationsGroup
};

// レイヤーコントロールを追加
L.control.layers(baseLayers, overlays, {
    collapsed: false,  // 常に展開表示
    position: 'topright'
}).addTo(map);