

Leaflet チェックボックスの判定をしてマーカーの削除をしたい

現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。

クリックする度に、ピンが立つので影がついていってしまいます。

東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。

分かる方、教えて頂きたいです。

[code]

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
    </head>
    
    <body onload="init()">
    <div id="mapcontainer" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
    <div class="main" style="position: absolute; z-index:500; background-color: white; height: 200px;">
    <h2>都道府県</h2>
    <ul>
    <li>
    <div>
    <input type="checkbox" onclick="tokyo()">東京
    </div>
    </li>
    <li>
    <div>
    <input type="checkbox" onclick="kanagawa()">神奈川
    </div>
    </li>
    <li>
    <div>
    <input type="checkbox" onclick="chiba()">千葉
    </div>
    </li>
    </ul>
    </div>
    
    <script>
    //地図を表示するdiv要素のidを設定
    var map = L.map('mapcontainer', {
    zoomControl: false
    });
    
    
    // オープンストリートマップ
    var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
    attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
    });
    
    function init() {
    osm.addTo(map);
    var mpoint = [35.681236, 139.767125];
    map.setView(mpoint, 10);
    }
    
    function tokyo() {
    L.marker([35.658182, 139.702043]).bindPopup("東京").addTo(map);
    }
    
    function kanagawa() {
    L.marker([35.491354, 139.284143]).bindPopup("神奈川").addTo(map);
    }
    
    function chiba() {
    L.marker([35.335416, 140.183252]).bindPopup("千葉").addTo(map);
    }
    </script>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-09-09T11:34:00.170
70257
2020-10-01T04:15:47.550
2020-10-01T04:15:47.550
41835
41835
question
javascript html jquery html5 leaflet
Leaflet チェックボックスの判定をしてマーカーの削除をしたい。


[removeFrom](https://leafletjs.com/reference-1.7.1.html#layer-
removefrom)でLayer(Markerの継承元)を削除する方法が簡単です。  
そのためにはcheckboxに対応するLayerを指定する必要がありますが、いくつか方法があります。

  * 東京方式 
    * あらかじめMakerを宣言しておいて表示制御する
    * onclick時に値を取得するため、checkboxにname属性を追加
  * 神奈川方式 
    * [addTo](https://leafletjs.com/reference-1.7.1.html#control-addto)の戻り値がLayer自体なので、それを変数に格納する
    * チェックボックスのonchangeでチェックボックスの選択状態を渡す
  * 千葉方式 
    * [eachLayer](https://leafletjs.com/reference-1.7.1.html#map-eachlayer)でMarkerを全部取り出して、特定の座標に該当するものが配置されているかチェックする

千葉方式は全件チェックなので柔軟性は高いですが、負荷が高いので今回の対応としてはお勧めしません。  
個人的には神奈川方式がお勧めです。

[code]

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
    </head>
    
    <body onload="init()">
    <div id="mapcontainer" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
    <div class="main" style="position: absolute; z-index:500; background-color: white; height: 200px;">
    <h2>都道府県</h2>
    <ul>
    <li>
    <div>
    <input type="checkbox" name="checkTokyo" onclick="tokyo()">東京
    </div>
    </li>
    <li>
    <div>
    <input type="checkbox" onchange="kanagawa(this.checked)">神奈川
    </div>
    </li>
    <li>
    <div>
    <input type="checkbox" onclick="chiba()">千葉
    </div>
    </li>
    </ul>
    </div>
    
    <script>
    //地図を表示するdiv要素のidを設定
    var map = L.map('mapcontainer', {
    zoomControl: false
    });
    
    // オープンストリートマップ
    var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
    attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" 
    });
    
    function init() {
    osm.addTo(map);
    var mpoint = [35.681236, 139.767125];
    map.setView(mpoint, 10);
    }
    
    //あらかじめMakerを宣言しておく
    let markerTokyo = L.marker([35.658182, 139.702043]);
    
    function tokyo() {
      //チェックボックスの状態を取得して表示制御
      let check = document.getElementsByName("checkTokyo")[0];
      if(check.checked) {
        markerTokyo.bindPopup("東京").addTo(map);
      } else {
        markerTokyo.removeFrom(map);
      }
    }
    
    let markerKanagawa = null;
    
    function kanagawa(value) {
      //チェックボックスのonchangeでチェックボックスの選択状態を渡す
      if(value) {
        //addToの戻り値がLayer自体なので、それを変数に格納する
        markerKanagawa = L.marker([35.491354, 139.284143]).bindPopup("神奈川").addTo(map);
      } else {
        markerKanagawa.removeFrom(map);
      }
    }
    
    function chiba() {
      //Markerを全部取り出して座標に該当するものが配置されているかチェックする
      let found = false;
      map.eachLayer(function(layer) {
        if (layer instanceof L.Marker) {
          if(layer.getLatLng().equals(L.latLng(35.335416, 140.183252))) {
            found = true;
            layer.removeFrom(map);
          }
        }
      });
      //なければ追加
      if(!found) {
        L.marker([35.335416, 140.183252]).bindPopup("千葉").addTo(map);
      }
    }
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-09-10T01:08:01.780
70270
2020-09-10T01:08:01.780
9820
70257
answer