I want to make a decision on the Leaflet check box and delete the marker.

I want to decide the Leaflet check box and delete the marker

As for the current code, if you check the box, it feels like the prefecture has a pin.

Every time I click it, the pin comes up and the shadow follows me.

I want to make it look like a pin will stand in Tokyo when Tokyo is turned on and a pin will disappear when it is turned off, but I can't imagine the code.

If you understand, please let me know.

<!DOCTYPE html>
<html>

<head>
<metacharset="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()">
<divid="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>State </h2>
<ul>
<li>
<div>
<input type="checkbox" onclick="tokyo()">Tokyo
</div>
</li>
<li>
<div>
<input type="checkbox" onclick="kanagawa()">Kanagawa
</div>
</li>
<li>
<div>
<input type="checkbox" onclick="chiba()">Chiba
</div>
</li>
</ul>
</div>

<script>
// Set the id of the div element to display the map
varmap = L.map('mapcontainer', {
zoomControl:false
});


// Open Street Map
varosm=L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
attribute: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a>contributors"
});

function init() {
osm.addTo(map);
varpoint=[35.681236,139.767125];
map.setView (mpoint, 10);
}

function Tokyo() {
L. marker ([35.658182, 139.702043]).bindPopup("Tokyo").addTo(map);
}

function kanagawa() {
L. marker ([35.491354, 139.284143]).bindPopup("Kanagawa").addTo(map);
}

function chiba(){
L.marker([35.335416, 140.183252]).bindPopup("Chiba").addTo(map);
}
</script>
</body>
</html>

javascript html jquery html5 leaflet

2022-09-30 16:54

1 Answers

Removing the Layer (from which Marker is inherited) in removeFrom is easy.
To do this, you need to specify the layer corresponding to the checkbox, but there are several ways to do this.

Tokyo method
- Declare Maker in advance and control the display
- Add name attribute to checkbox to get value when onclick
Kanagawa method
- addTo return value is Layer itself, so store it in variables
- Onchange check box to pass check box selection status
Chiba method
- Take out all Markers in eachLayer to see if they are placed in a particular coordinate

Declare Maker in advance and control the display
Add name attribute to checkbox to get value when onclick

addTo return value is Layer itself, so store it in variables
Onchange check box to pass check box selection status

Take out all Markers in eachLayer to see if they are placed in a particular coordinate

The Chiba method is flexible because it checks everything, but I don't recommend it as a response this time because of the heavy load.
Personally, I recommend the Kanagawa method.

<!DOCTYPE html>
<html>

<head>
<metacharset="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()">
<divid="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>State </h2>
<ul>
<li>
<div>
<input type="checkbox" name="checkTokyo"onclick="tokyo()">Tokyo
</div>
</li>
<li>
<div>
<input type="checkbox" onchange="kanagawa(this.checked)">Kanagawa
</div>
</li>
<li>
<div>
<input type="checkbox" onclick="chiba()">Chiba
</div>
</li>
</ul>
</div>

<script>
// Set the id of the div element to display the map
varmap = L.map('mapcontainer', {
zoomControl:false
});

// Open Street Map
varosm=L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
attribute: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a>contributors" 
});

function init() {
osm.addTo(map);
varpoint=[35.681236,139.767125];
map.setView (mpoint, 10);
}

// Declare Maker in advance
let markerTokyo=L.marker([35.658182,139.702043]);

function Tokyo() {
  // Obtain check box status and control display
  let check = document.getElementsByName("checkTokyo")[0];
  if(check.checked){
    markerTokyo.bindPopup("Tokyo").addTo(map);
  } else{
    markerTokyo.removeFrom(map);
  }
}

let markerKanagawa=null;

function kanagawa(value) {
  // Turn on the check box to pass the check box selection status
  if(value){
    // The return value of addTo is Layer itself, so store it in a variable.
    markerKanagawa=L.marker([35.491354,139.284143]).bindPopup("Kanagawa").addTo(map);
  } else{
    markerKanagawa.removeFrom(map);
  }
}

function chiba(){
  // Take out all Markers and check if the corresponding coordinates are placed
  let found = false;
  map.eachLayer(function(layer){
    if (layer instance of L. Marker) {
      if(layer.getLatLng().equals(L.latLng(35.335416, 140.183252)){
        found = true;
        layer.removeFrom(map);
      }
    }
  });
  // If not, add
  if(!found){
    L.marker([35.335416, 140.183252]).bindPopup("Chiba").addTo(map);
  }
}
</script>
</body>
</html>

2022-09-30 16:54

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656