Removing all data/markers in Leaflet map before calling another JSON

Question

I'm retrieving different data to mark leaflet map using different JSON files. Each radio button retrieves a different JSON file. However, I'm having trouble clearing the markers when I select different radio button. All the markers just adds up from one JSON file to another. I want to be able to clear all the markers when I select a different radio button.

I searched around and read that map.removeLayer(MyLayer); will remove all markers. So I created an array of markers called "markers" and placed in a layer called "markersLayer". When I tried removing "markersLayer", it didn't leave a single marker on the map. Instead of clearing previous markers from different JSON file, now nothing is plotted.

I only want to show those markers using data from the specific JSON file that I selected using radio button.

HTML:

<div style="text-align: center;">
    <h1 id="title">Map Visualization 3</h1>
    <label><input type="radio" class="location" name="location" value="locations1" checked="checked">Location Set 1</label>
    <label><input type="radio" class="location" name="location" value="locations2">Location Set 2</label>
    <label><input type="radio" class="location" name="location" value="locations3">Location Set 3</label>
<ul id="location-list"></ul>
    <div id="map" style="width: 80%; max-width: 900px; height: 600px; margin: 0 auto;"></div>
</div>

JS:

var map;
var markers = [];
var markersLayer;
var updateMap = function() {
    var uri = $('input.location:checked').val() + '.json';
    $.getJSON(uri, function(response){
        $('ul#location-list').empty();


        var locationCoor = []; 
        var marker;

        for(var i=0; i < response.length; i++){

            var lat = response[i].latitude;
            var lon = response[i].longitude;
            $('ul#location-list').append('<li>(' + lat + ', ' + lon + ')</li>');
            //console.log(lat, lon);
            locationCoor[i] = [lat, lon];
            //console.log(locationCoor);

            var popup = L.popup()
                .setLatLng([lat, lon])
                .setContent('<h3 style="margin:0 0 3px 0;"><a href="' + response[i].link + '">' + response[i].title + '</a></h3><img width="180px" height="auto" src="' + response[i].imageUrl + '">');

            marker = L.marker([lat, lon], {
                clickable: true
            }).bindPopup(popup, {showOnMouseOver:true});

            markers[i] = marker; 
            console.log(markers);
        }

        markersLayer = L.layerGroup(markers);
        markersLayer.addTo(map);



        var bounds = new L.latLngBounds(locationCoor);
        map.fitBounds(bounds, {padding: [50,50]});
        markers.length = 0;
    });
};

$(document).ready(function(){
    map = L.map('map');
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
        maxZoom: 18,
        id: 'examples.map-20v6611k'
    }).addTo(map);

    $('input.location').on('change', updateMap);
    updateMap();
});

JSON 1:

[
  {
    "title": "Weathertop",
    "link": "http://en.wikipedia.org/wiki/Weathertop",
    "latitude": 38.80,
    "longitude": -77.12,
    "imageUrl": "assets/img/location-images/Weathertop.jpg"
  },
{
  "title": "Rivendell",
  "link": "http://lotr.wikia.com/wiki/Rivendell",
  "latitude": 38.78,
  "longitude": -77.18,
  "imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
  "title": "Minas Tirith",
  "link": "http://lotr.wikia.com/wiki/Minas_Tirith",
  "latitude": 38.76,
  "longitude": -77.18,
  "imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}

]

JSON2:

[
  {
    "title": "Chicago",
    "link": "http://en.wikipedia.org/wiki/Weathertop",
    "latitude": 41.836,
    "longitude": -87.604980,
    "imageUrl": "assets/img/location-images/Weathertop.jpg"
  },
{
  "title": "Detroit",
  "link": "http://lotr.wikia.com/wiki/Rivendell",
  "latitude": 42.326062,
  "longitude": -83.078613,
  "imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
  "title": "Indianopolis",
  "link": "http://lotr.wikia.com/wiki/Minas_Tirith",
  "latitude": 39.741,
  "longitude": -86.154785,
  "imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}

]

Answer 1

You should not be re-creating the markersLayer object. What you want is to create it once, and then continue to add/remove markers from it.

In your line where you define the markersLayer at the top of the file, you now also want to define it here as an L.LayerGroup. We will not be re-creating this object.

When you want to update the map, you will clear all the existing markers from the markersLayer. This is accomplished by calling markersLayer.clearLayers(). This will not remove the markersLayer from the map. It will only remove the markers this layer contains.

Once all of the markers have been removed from this layer, you are now free to add new layers to markersLayer.

Your code will look like this:

var map;
var markers = [];
var markersLayer = new L.LayerGroup(); // NOTE: Layer is created here!
var updateMap = function() {
  // NOTE: The first thing we do here is clear the markers from the layer.
  markersLayer.clearLayers();

  var uri = $('input.location:checked').val() + '.json';
  $.getJSON(uri, function(response){
    $('ul#location-list').empty();


    var locationCoor = []; 
    var marker;

    for(var i=0; i < response.length; i++){

        var lat = response[i].latitude;
        var lon = response[i].longitude;
        $('ul#location-list').append('<li>(' + lat + ', ' + lon + ')</li>');
        //console.log(lat, lon);
        locationCoor[i] = [lat, lon];
        //console.log(locationCoor);

        var popup = L.popup()
            .setLatLng([lat, lon])
            .setContent('<h3 style="margin:0 0 3px 0;"><a href="' + response[i].link + '">' + response[i].title + '</a></h3><img width="180px" height="auto" src="' + response[i].imageUrl + '">');

        marker = L.marker([lat, lon], {
            clickable: true
        }).bindPopup(popup, {showOnMouseOver:true});

        markersLayer.addLayer(marker); 
        console.log(markers);
    }

    // NOTE: We are no longer recreating the layer here. Remove these lines of code.
    //markersLayer = L.layerGroup(markers);
    //markersLayer.addTo(map);




    var bounds = new L.latLngBounds(locationCoor);
    map.fitBounds(bounds, {padding: [50,50]});
    markers.length = 0;
});
};

$(document).ready(function(){
map = L.map('map');
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
    maxZoom: 18,
    id: 'examples.map-20v6611k'
}).addTo(map);

// NOTE: We add the markersLayer to the map here. This way, the layer is only added once.  
markersLayer.addTo(map);

$('input.location').on('change', updateMap);
updateMap();
});

Answer 2

Refer : Removing leaflet layers and L.marker method

Basic concept : Instead of adding all markers directly on the map, you can add the markers on a separate layer (i.e. var markers = new L.FeatureGroup();) and then add that layer on the map (map.addLayer(markers);) outside the loop.

JSFiddle