Remove previous markers before adding new marker in Leaflet using HTML and JavaScript code

user_11326876 0
Viewed 364

I am trying to develop location base web app, I am facing a problem to remove previous marker before adding new markers. I use onchange() for the drop down list to add new marker. I want to remove the previous marker and add new marker whenever onchange() is occurred.

At first, when you choose an option, it remove the marker and add new marker, but when you choose an option for the second time it just add a marker and did not remove the previous marker.

Here is my code in HTML:

// dropdown list
<select id='city' onchange='select()'>
    <option value='0'>Display by City</option>
</select>

And my code in Javascript:

var places = [
    ['Matandang Balara','Quezon City',14.6656,121.0822],
    ['Diliman','Quezon City', 14.6462, 121.0528],
    ['Batasan Hills','Quezon City', 14.6816, 121.0966],
    ['Fairview','Quezon City', 14.7022, 121.0682],
    ['San Mateo','Rizal', 14.6898, 121.1220],
    ['Antipolo','Rizal',14.6255,121.1245],
    ['Binangonan','Rizal', 14.4765, 121.1957]
]

// map
var map = L.map('map').setView([14.5995, 120.9842], 11)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
    maxZoom: 18,
    minZoom: 6
}).addTo(map)

var s = document.getElementById('city') // get dropdown list
var text, value, data
var markerLayer = new L.LayerGroup()

// add marker
for (var i = 0; i < places.length; i++) {
    // Set value for option
    value = places[i][1]
    text = places[i][1] // Set option text

    data = {text, value} // Option array

    s.add(new Option(data.text, data.value)) // Display option details

    removeOption(s) // function that remove the duplicate option

    // Map marker popup
    var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

    // Set map marker
    marker = new L.marker([places[i][2], places[i][3]])
        .bindPopup(pop).openPopup()

    markerLayer.addLayer(marker)
    map.addLayer(markerLayer)
}

Code for choosing option - remove and add new marker:

// for remove and add new marker
function select() {
    var selected = s.options[s.selectedIndex]
    var txt = selected.text // get option text

    // to remove the marker
    markerLayer.removeLayer(marker)
    map.removeLayer(markerLayer)

    for (var i = 0; i < places.length; i++) {
    if(txt == places[i][1]) { // Display marker depends on option text
        var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

        marker = new L.marker([places[i][2], places[i][3]])
            .bindPopup(pop).openPopup()

        map.addLayer(marker)
        }
    }
}

Thank you!

leaflet html javascript
1 Answers

You just need to remain consistent between your initialization and your onchange listener:

  • During initialization, you assign a Leaflet Marker into your marker variable, which you add into your markerLayer Layer Group, which in turn you add to your map.
  • In onchange listener, you correctly remove marker from markerLayer, you even remove the latter from your map (which should be unnecessary). Then you re-assign a new Marker into marker, but directly add it to the map, instead of into your markerLayer like during initialization.

An easy solution would simply be to leep your markerLayer Layer Group always on map, clear it at the beginning of your onchange listener, and populate it:

// for remove and add new marker
function select() {
    var selected = s.options[s.selectedIndex]
    var txt = selected.text // get option text

    // to remove the marker
    //markerLayer.removeLayer(marker)
    //map.removeLayer(markerLayer)
    markerLayer.clearLayers(); // Blindly remove everything from the Layer Group

    for (var i = 0; i < places.length; i++) {
    if(txt == places[i][1]) { // Display marker depends on option text
        var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

        marker = new L.marker([places[i][2], places[i][3]])
            .bindPopup(pop).openPopup()

        //map.addLayer(marker)
        marker.addTo(markerLayer); // Add to the Layer Group to keep consistent behaviour
        }
    }
}
user_51087960
Related