0

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

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

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

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

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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>

1
  • 2
    コードの書き方よりもどちらかというと設計が出来ていない感じですかね?もしご自身が考えた設計や構想があれば共有いただければと思います。ポイントはピンが「立っている」or「立っていない」という状態管理の方法かなと思いますが。
    – keitaro_so
    Commented 2020年9月10日 1:05

1 件の回答 1

1

removeFromでLayer(Markerの継承元)を削除する方法が簡単です。
そのためにはcheckboxに対応するLayerを指定する必要がありますが、いくつか方法があります。

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

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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>
1
  • 分かりやすかったです。色々な解決策の提案をありがとうございます。
    – アイス
    Commented 2020年9月12日 13:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。