Leafletで地図(マップ)を固定して埋め込み表示・操作できないようにする方法

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

今回は、Leafletで地図(マップ)を固定して埋め込み表示・操作できないようにする方法について解説していきます。

1 地図(マップ)を固定して埋め込み表示・操作できないようにする方法
- 1.1 SampleCode全文とHTML実行イメージ
- 1.2 Leafletのズームやタップ・ドラッグなどのUser操作に関するオプション
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 プログラミング学習・エンジニア転職関連の情報
5 Twitterやってます！Follow Me！
6 最近の投稿

地図(マップ)を固定して埋め込み表示・操作できないようにする方法

マップの表示位置を固定して、埋め込みたい場合は、スクロールやズーム、タップ・ドラッグなどのUser操作をすべてできないようにする必要があります。

Leafletでは、ズームやタップ・ドラッグなどのUser操作に関するする8つのオプションをすべてOff (false)にすることで、

Leafletの地図(マップ)を固定して、操作ができないようにできます。

const map = L.map('map', {
    
    // 1. User操作に関するするオプションをすべて「 false 」にすると、Mapを固定して操作できないようになる！
    dragging:false, // マウスまたはタッチのドラッグで、マップを移動するかしないか。
    touchZoom:false, // クリックまたはタッチで、マップをズームするかしないか。
    scrollWheelZoom:false, // マウスのホイール操作で 、マップをズームするかしないか。
    doubleClickZoom:false, // ダブルクリックで、マップをズームするかしないか。
    boxZoom:false, // シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。
    tap:false, // タップでマップのズーム操作をするかしないか。
    keyboard:false, // キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。
    zoomControl:false, // ズームコントロールの表示、非表示。
})

SampleCode全文とHTML実行イメージ

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>
    
<style>
    /* PC-Tablet-Size */
    @media (768px <= width ) {
        .robotama-world-map {
            height: 500px;
            width: 70%;
            margin: 0px auto;
        }
    }
    /* スマホ-Size */
    @media (width <= 767px) {
        .robotama-world-map {
            height: 350px;
            width: 80%;
            margin: 0px auto;
        }
    }
</style>

    <title>Leaflet-Position-fixd</title>
</head>

<body style="height: 100%; margin: 0; overflow: hidden;">
    <h1 style="text-align: center;">Robotama-World-Map</h1>
    <div id="map" class="robotama-world-map" ></div>
</body>

<script>

const map = L.map('map', {
    
    // 1. User操作に関するするオプションをすべて「 false 」にすると、Mapを固定して操作できないようになる！
    dragging:false, // マウスまたはタッチのドラッグで、マップを移動するかしないか。
    touchZoom:false, // クリックまたはタッチで、マップをズームするかしないか。
    scrollWheelZoom:false, // マウスのホイール操作で 、マップをズームするかしないか。
    doubleClickZoom:false, // ダブルクリックで、マップをズームするかしないか。
    boxZoom:false, // シフトキーを押しながらマウスをドラッグすることで、マップの表示範囲をズームするかしないか。
    tap:false, // タップでマップのズーム操作をするかしないか。
    keyboard:false, // キーボードの矢印又はプラス・マイナスキーでのマップ操作の可否。
    zoomControl:false, // ズームコントロールの表示、非表示。
})
    .setView([51.5, -0.09], 3);

    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>