【Leaflet入門】Leafletのズームやタップ・ドラッグなどの操作を制限するoptionまとめ

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

今回は、Leafletのズームやタップ・ドラッグなどの操作を制限するoptionについて解説していきます。

1 SampleCode全文
2 Mapインスタンス作成時に設定できるOptionたち
3 ズームレベルの最小値・最大値を設定する(minZoom・maxZoom)
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 プログラミング学習・エンジニア転職関連の情報
7 Twitterやってます！Follow Me！
8 参考・引用
9 最近の投稿

SampleCode全文

<html lang="ja" style="height: 100%; margin: 0;">
<head>
    <meta charset="UTF-8">

    <!-- LeafletのLibraryをLoadする -->
    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>

    <title>Leaflet-Option</title>
</head>

<!-- Leafletを全面表示で設定する -->
<body style="height: 100%; margin: 0; overflow: hidden;">
    <div id="map" style="height: 100%; width:100%;" ></div>
</body>

<script>

    // [ Leaflet の Optionまとめ ]

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

        // [ 10個のOption設定 ]

        // 1. Defaultが「true」な optionたちをfalseにして制限をかける！

        zoom:3, // Zoomレベルの設定
        dragging:true, // マウスまたはタッチのドラッグで、マップを移動するかしないか。
        touchZoom:true, // クリックまたはタッチで、マップをズームするかしないか。
        scrollWheelZoom:false, // マウスのホイール操作で 、マップをズームするかしないか。
        doubleClickZoom:true, // ダブルクリックで、マップをズームするかしないか。
        boxZoom:true, // シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。
        tap:true, // タップでマップのズーム操作をするかしないか。
        keyboard:false, // キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。
        zoomControl:true, // ズームコントロールの表示、非表示。
        closePopupOnClick: false, // マップをクリックしたときに、ポップアップを閉じるか閉じないか。
    })
    .setView([51.5, -0.09]);
    // Zoomレベルの設定は、setView()の第二引数でも設定できる！

    // 2. 地図データの読み込み & 設定値を追加
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 5, // maxZoom: ズームレベルの最大値を指定します。
        minZoom: 2,  // minZoom: ズームレベルの最小値を指定します。
    })
    .addTo(map);


    L.marker([51.5, -0.09]).addTo(map).bindPopup('ロボ玉万歳！！<br> 神聖グンマー帝国、万歳！！');

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

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

</script>

</html>

Mapインスタンス作成時に設定できるOptionたち

L.map() でMapインスタンスを作成する時に、第二引数にズームやタップ・ドラッグなどのMapn操作を制限するoption-Objectを設定することができます。

基本的にMapの操作Optionたちは、Default「 true 」でMapの操作に制限はかかっていません。

仕様の要件に応じて、操作Optionを「 false 」にして一部のMap操作に制限をかけるといった使い方をします。

<script>

// [ Leaflet の Optionまとめ ]

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

        // [ 10個のOption設定 ]

        // 1. Defaultが「true」な optionたちをfalseにして制限をかける！

        // Zoomレベルの設定
        zoom:3, 
        
        // マウスまたはタッチのドラッグで、マップを移動するかしないか。
        dragging:true, 

        // クリックまたはタッチで、マップをズームするかしないか。
        touchZoom:true,

        // マウスのホイール操作で 、マップをズームするかしないか。
        scrollWheelZoom:false, 

        // ダブルクリックで、マップをズームするかしないか。
        doubleClickZoom:true, 

        // シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。
        boxZoom:true,
        
        // タップでマップのズーム操作をするかしないか。
        tap:true,

        // キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。
        keyboard:false,
        
        // ズームコントロールの表示、非表示。
        zoomControl:true, 
        
        // マップをクリックしたときに、ポップアップを閉じるか閉じないか。
        closePopupOnClick: false, 
    })
    .setView([51.5, -0.09]);
    // Zoomレベルの設定は、setView()の第二引数でも設定できる！

</script>

ズームレベルの最小値・最大値を設定する(minZoom・maxZoom)

ズームレベルの最小値と最大値をそれぞれminZoomとmaxZoomで設定することができます。

<script>

// 2. 地図データの読み込み & 設定値を追加
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        
        maxZoom: 5, // maxZoom: ズームレベルの最大値を指定します。
        minZoom: 2,  // minZoom: ズームレベルの最小値を指定します。
    })
    .addTo(map);

</script>