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"
}
]