So I have leaflet markers for 10 cities in a country created from a api ajax call. When a user clicks on one of the city markers a different ajax call is made that gets 20 nearby place Wikipedia articles and adds a marker for each place on the map. It all works fine however if the city marker is clicked again the ajax call is made again and a duplicate 20 markers are added each time the city marker is clicked. I want to prevent multiple ajax calls/duplicate markers.
I've tried
.one( "click", function() {//my code});
however the result is the following error
L.marker(...).bindPopup(...).one is not a function
I've also tried
$(this).off(event);
any help would be appreciated, thank you.
My js code:
var largeCityMarker = L.marker(new L.LatLng(cityLat, cityLng), ({icon: cityIcon}))
.bindPopup(`<div class="markerContainer"><h3>${cityName}</h3><img class="markerThumbnail" src='${cityThumbnailImg}' onerror="this.style.display='none'"><p class="markerTxtDescription">${cityInfo}</p><div id="city-link"><a href="//${cityUrl}" target="_blank">${cityText}</a></div></div>`, cityOptions)
.on('click', function() {
$.ajax({
url: "assets/php/wikiLoops.php",
type: 'GET',
dataType: 'json',
data: {
lat: this.getLatLng().lat,
lng: this.getLatLng().lng,
countryCodeA2: borderCountryCode
},
success: function(result) {
//wiki Find Nearby Places for cities
wikiCluster = new L.markerClusterGroup();
console.log(result);
result.data.wikiCitiesData.geonames.forEach(place => {
var wikiPlaceIcon = L.icon({
iconUrl: 'assets/img/icons/wikipedia.png',
iconSize: [50, 50], // size of the icon
popupAnchor: [0,-15]
});
var customOptions =
{
'maxWidth': '300',
'className' : 'custom'
};
wikiPlaceName = place.title;
wikiPlaceLat = place.lat;
wikiPlaceLng = place.lng;
wikiSummary = place.summary;
wikiUrl = place.wikipediaUrl;
wikiThumbnail = place.thumbnailImg;
var customPopup = `<div class="card" style="width: 18rem;">
<div class="card-body"><h5 class="card-title">${wikiPlaceName}</h5><img class="img-thumbnail float-right" style="max-width: 100px" src="${wikiThumbnail}" onerror="this.style.display='none'"><p class="card-text" id="wiki-sum">${wikiSummary}</p><a href="//${wikiUrl}" target="_blank"class="card-link">Read more</a><a href="#" class="card-link"></a></div></div>`;
wikiPlaceMarker = L.marker(new L.LatLng(wikiPlaceLat, wikiPlaceLng), ({icon: wikiPlaceIcon})).bindPopup(customPopup,customOptions);
console.log(wikiPlaceMarker);
capCityCluster.addLayer(wikiPlaceMarker);
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("wikiLoopPHP",textStatus, errorThrown);
}
});
});
largeCityCluster.addLayer(largeCityMarker);
});
});
}
},
Looks like you confuse jQuery syntax with Leaflet syntax.
In Leaflet, attaching an event listener that should fire only once then be removed automatically is made using the once method:
Behaves as
on(…), except the listener will only get fired once and then removed.
L.marker(latLng)
.bindPopup(popupContent)
.once('click', function() {});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments