24 - 地図の境界と制限

学習内容: 地図の表示範囲を制限し、ズームレベルを制御します。

ポイント:

操作: この地図は東京周辺に制限されています。範囲外への移動を試してみてください。

地図を操作すると境界情報がここに表示されます 
// 境界制限付きで地図を初期化
const bounds = L.latLngBounds(
    [35.50, 139.50],  // 南西
    [35.85, 140.00]   // 北東
);

const map = L.map('map', {
    maxBounds: bounds,
    maxBoundsViscosity: 1.0,  // 境界での「弾性」
    minZoom: 10,
    maxZoom: 18
});

// 現在の表示範囲を取得
const currentBounds = map.getBounds();
console.log('北東:', currentBounds.getNorthEast());
console.log('南西:', currentBounds.getSouthWest());

// 指定範囲にフィット
map.fitBounds([
    [35.65, 139.70],
    [35.72, 139.80]
]);