【Leaflet入門】地図の表示範囲を制限する2つの方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Leafletで地図の表示範囲を制限する2つの方法について解説していきます。

1 地図の表示範囲を制限する2つの方法
- 1.1 maxBoundsプロパティに表示範囲の制限設定をSetする
- 1.2 setMaxBoundsメソッドに表示範囲の制限設定をSetする
2 SampleCode全文 & HTML実行イメージ
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

地図の表示範囲を制限する2つの方法

地図の表示範囲を制限するには、maxBoundsプロパティに表示範囲の制限設定をSetするか、

setMaxBoundsメソッドに表示範囲の制限設定をSetする必要があります。

maxBoundsプロパティに表示範囲の制限設定をSetする

// [ 地図の表示範囲を制限する方法 ]

// 1. WorldMapの表示範囲の制限設定をする方法-1 => 左上：右下 の [ 緯度, 経度 ]
const bounds = [[51.5, -0.09], [35.68, 139.69]];
// => 左上：右下 = イギリス:日本

const map = L.map('map',{

    // 2. maxBoundsプロパティに表示範囲の制限設定をSetする
    maxBounds: bounds,
})
.setView([51.5, -0.09], 3);

setMaxBoundsメソッドに表示範囲の制限設定をSetする

// [ 地図の表示範囲を制限する方法 ]

const map = L.map('map')
.setView([51.5, -0.09], 3);

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png',
{
    attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
    minZoom:2,
    maxZoom: 6,
}).addTo(map);


// 1. WorldMapの表示範囲の制限設定をする方法-2 => 左上：右下 の [ 緯度, 経度 ]
const displayRange = [[70.35201194155984, -28.125000000000004], [-49.20324274417911, 186.67968750000003]];
// => 左上：右下 = アイスランド:ニュージーランド

// 2. setMaxBounds()に表示範囲の制限設定をSetする
map.setMaxBounds(displayRange);

SampleCode全文 & HTML実行イメージ

SampleCodeを実行すると次のような画面になります。

指定した範囲の外側にMapを移動しようとすると、強制的に戻されます。

<html style="height: 100%; margin: 0;">
<head>
    <title>Leaflet</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>
</head>

<body style="height: 100%; margin: 0; overflow: hidden;">
    <div id="map" style="height: 100%; width: 100%;"></div>
</body>

<script>

    // 1. WorldMapの表示範囲の制限設定をする方法-1 => 左上：右下 の [ 緯度, 経度 ]
    const bounds = [[51.5, -0.09], [35.68, 139.69]];
    // => 左上：右下 = イギリス:日本

    const map = L.map('map',{
        maxBounds: bounds,
    })
    .setView([51.5, -0.09], 3); // イギリスを中心地に設定する


    // 2. 地図データの読み込み Ver. 国土地理院 English
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png',
    {
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
        minZoom:2,
        maxZoom: 6,
    }).addTo(map);


    // 2. WorldMapの表示範囲の制限設定をする方法-2 => 左上：右下 の [ 緯度, 経度 ]
    const displayRange = [[70.35201194155984, -28.125000000000004], [-49.20324274417911, 186.67968750000003]];
    // => 左上：右下 = アイスランド:ニュージーランド

    // setMaxBounds を指定して地図の表示範囲を制限
    map.setMaxBounds(displayRange);

    // 後からSetされた、こちらが適用される🔥


    // marker() で指定-Point に Markerを追加する => .addTo()は、 L.tileLayer()で読み込んだ地図をWebGISオブジェクトに追加する関数
    L.marker([51.5, -0.09]).addTo(map).bindPopup('ロボ玉万歳！！！.<br> 神聖グンマー帝国、万歳！！.');

    L.marker([38.9, -77.01]).addTo(map).bindPopup('アメリカ合衆国-Robotama');

    L.marker([38.9, 35.2]).addTo(map).bindPopup('イスラエル国-Robotama') //.openPopup();

    L.marker([41.89, 12.48]).addTo(map).bindPopup('イタリア共和国-Robotama'); // .openPopup();

    L.marker([52.5, 13.4]).addTo(map).bindPopup('ドイツ連邦共和国-Robotama'); // .openPopup();

    // openPopup() をすると、Clickしなくても Popupが出現した状態(Open-状態)になる！ => 1つだけ
    L.marker([35.68, 139.69]).addTo(map).bindPopup('日本-Robotama').openPopup();

    L.marker([-41.289, 174.7]).addTo(map).bindPopup('ニュージーランド-Robotama');

</script>
</html>