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>