MapLibre を使用してマップの範囲を設定する

ユーザーに全世界を画面移動したりズームしてほしくない場合もあるでしょう。MapLibre のマップコントロールを使用している場合は、maxBounds オプションを使用してマップコントロールの範囲または境界を制限し、minZoom と maxZoom オプションを使用してズームを制限できます。

次のコード例は、マップコントロールを初期化して画面移動を特定の境界 (この場合は Grab データソースの範囲) に制限する方法を示しています。

// Set bounds to Grab data provider region 
var bounds = [
        [90.0, -21.943045533438166], // Southwest coordinates
        [146.25, 31.952162238024968] // Northeast coordinates
    ];

var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxBounds: bounds // Sets bounds as max
    transformRequest,
    }
);

同様に、マップの最小ズームレベルと最大ズームレベルを設定できます。どちらの値も 0 ～ 24 の範囲ですが、デフォルトは最小ズームが 0、最大ズームが 22 です (データプロバイダーは、すべてのズームレベルでデータを提供するとは限りません。ほとんどのマップライブラリはこれを自動的に処理します)。次の例では、MapLibre Map コントロールの minZoom および maxZoom オプションを初期化します。

// Set the minimum and maximum zoom levels 
var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxZoom: 12,
    minZoom: 5,
    transformRequest,
    }
);