title: Removing all data/markers in Leaflet map before calling another JSON
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>I only want to show those markers using data from the specific JSON file that I selected using radio button. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="text-align: center;"&gt;
      &lt;h1 id="title"&gt;Map Visualization 3&lt;/h1&gt;
      &lt;label&gt;&lt;input type="radio" class="location" name="location" value="locations1" checked="checked"&gt;Location Set 1&lt;/label&gt;
      &lt;label&gt;&lt;input type="radio" class="location" name="location" value="locations2"&gt;Location Set 2&lt;/label&gt;
      &lt;label&gt;&lt;input type="radio" class="location" name="location" value="locations3"&gt;Location Set 3&lt;/label&gt;
  &lt;ul id="location-list"&gt;&lt;/ul&gt;
      &lt;div id="map" style="width: 80%; max-width: 900px; height: 600px; margin: 0 auto;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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 &lt; response.length; i++){
  
              var lat = response[i].latitude;
              var lon = response[i].longitude;
              $('ul#location-list').append('&lt;li&gt;(' + lat + ', ' + lon + ')&lt;/li&gt;');
              //console.log(lat, lon);
              locationCoor[i] = [lat, lon];
              //console.log(locationCoor);
  
              var popup = L.popup()
                  .setLatLng([lat, lon])
                  .setContent('&lt;h3 style="margin:0 0 3px 0;"&gt;&lt;a href="' + response[i].link + '"&gt;' + response[i].title + '&lt;/a&gt;&lt;/h3&gt;&lt;img width="180px" height="auto" src="' + response[i].imageUrl + '"&gt;');
  
              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();
  });
  </code></pre>
  
  <p>JSON 1:</p>
  
  <pre><code>[
    {
      "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"
  }
  
  ]
  </code></pre>
  
  <p>JSON2:</p>
  
  <pre><code>[
    {
      "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"
  }
  
  ]
  </code></pre>