JavaScript

Leafletで地図やマーカーを削除(remove、removeLayer)する方法

はじめに

地図データを扱うためのJavaScript ライブラリである「Leaflet」と「OpenStreetMap」を使い、地図やマーカーを削除する方法を紹介します。

スポンサーリンク

地図の表示イメージは次の通りです。ボタンを押下することで、地図の削除・再表示、マーカーの表示・削除をすることができます。



OpenStreetMapとLeafletで地図やマーカーを削除する方法

HTMLとJavaScriptの実装例は以下です。

<!DOCTYPE html>
<html>
  <head>
    <title>OpenStreetMapとLeafletで地図やマーカーを削除する</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        window.onload = function() { 
            //緯度,経度,ズーム
            var map = L.map('view_map').setView([35.658577, 139.745451],12);

            // OpenStreetMap から地図画像を読み込む
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
            }).addTo(map);
            
            var popup = L.popup();
            var addMarker = null;
            
            $("#addMarker").on('click', function () {
                // 東京タワーのマーカーを表示
                if (map && !addMarker) {
                    addMarker = L.marker([35.658577, 139.745451]).addTo(map);
                }
            });
            $("#delMarker").on('click', function () {
                // 東京タワーのマーカーを削除
                if (map && addMarker) {
                    map.removeLayer(addMarker);
                    addMarker = null;
                }
            });
            $("#clearMap").on('click', function () {
                // 地区をクリア
                if (map) {
                    map.remove();
                    map = null;
                }
            });
            $("#createMap").on('click', function () {
                // 地図を再表示
                if (!map) {
                    map = L.map('view_map').setView([35.658577, 139.745451],12);
                    
                    // OpenStreetMap から地図画像を読み込む
                    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        maxZoom: 18,
                        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
                    }).addTo(map);
                }
            });
        }
    </script>
  </head>
  <body>
    <div>
        <input type="button" id="addMarker" value="マーカーを表示">
        <input type="button" id="delMarker"value="マーカーを削除">
        <input type="button" id="clearMap"value="地図をクリア">
        <input type="button" id="createMap"value="地図を再表示">
    </div><br>
    <div id="view_map" style="height: 500px;"></div>
  </body>
</html>

マーカーの追加

マーカーの追加は、「L.marker」で作成したマーカをmapにaddToすることで、地図上にマーカーを表示することができます。

$("#addMarker").on('click', function () {
    // 東京タワーのマーカーを表示
    if (map && !addMarker) {
        addMarker = L.marker([35.658577, 139.745451]).addTo(map);
    }
});

マーカーの削除

マーカーの削除は「map.removeLayer」を使い削除するマーカーを指定することで、地図上からマーカーを削除することができます。

$("#delMarker").on('click', function () {
    // 東京タワーのマーカーを削除
    if (map && addMarker) {
        map.removeLayer(addMarker);
        addMarker = null;
    }
});

地図のクリア

表示している地図をクリアするには、「remove」を使用します。

$("#clearMap").on('click', function () {
    // 地区をクリア
    if (map) {
        map.remove();
        map = null;
    }
});

地図を再表示

地図を「remove」でクリアした後に、再表示させるには、地図を表示させるときと同じ処理を実施します。

$("#createMap").on('click', function () {
    // 地図を再表示
    if (!map) {
        map = L.map('view_map').setView([35.658577, 139.745451],12);
        
        // OpenStreetMap から地図画像を読み込む
        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
        }).addTo(map);
    }
});

最後に

本記事では「OpenStreetMapとLeafletで地図やマーカーを削除する方法」を紹介しました。

【関連記事】

helpful

-JavaScript