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

Leaflet-Map-Fixd

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

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

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

マップの表示位置を固定して、埋め込みたい場合は、スクロールやズーム、タップ・ドラッグなどの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>

Leafletのズームやタップ・ドラッグなどのUser操作に関するオプション

Leafletのズームやタップ・ドラッグなどのUser操作に関する8つのオプションについては、以前の記事にて説明しています。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿