I have a leaflet map with markers showing the top cities in a chosen country. When a marker is clicked, the lat/lng of that city is used in an AJAX call and a modal displaying weather information for the city pops up through use of a PHP cURL routine to a weather API. A couple of easyButtons appear after this click event fires.
I would now like to add another modal containing different info for the same city that will pop up when the user clicks one of these easyButtons, by using another API that utilises the same lat/lng values as used in the weather call.
I am cautious that my main function is now getting very long and complex. Additionally, I'm aware that the $cityMarker click function wouldn't work for this new modal/easy Button as it requires a new click. Therefore I think it would be best to create a separate function.
Is there a simple way to be able to access the lat/lng values in the AJAX call for use outside the function scope - i.e. when the user clicks the new easyButton the lat/lng data from the current marker can be used? Or any other suggestions as to how I can achieve this functionality?
Any help is much appreciated - thank you!
JS:
var locationList = [];
citiesArray.forEach(city => {
locationList.push({
lat: city.lat,
lng: city.lng,
cityName: city.toponymName
});
});
console.log(locationList)
for (var i=0; i < locationList.length; i++) {
$cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
.addTo($layers)
.bindPopup(locationList[i]['cityName'])
$($cityMarker).on('click', (event) => {
var marker = event.target;
$.ajax({
url: "getLatLngInfo.php",
type: 'POST',
data: {
lat: marker.getLatLng().lat,
lng: marker.getLatLng().lng
},
success: function(result) {
console.log(result);
$weatherButton.enable();
$wikiButton.enable();
$('#weather').modal('show');
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
console.log(textStatus);
console.log(jqXHR);
}
});
});
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
console.log(textStatus);
console.log(jqXHR);
}
});
});
$($wikiButton).on('click'.............
My Answer:
One way to achieve this functionality is to store the lat/lng values of the current marker in a global variable when the marker is clicked. This way, you can access the lat/lng values outside of the click function and use them in the AJAX call for the new modal.
Here's an example of how you can modify your code to achieve this:
javascript
var currentLat;
var currentLng;
// Function to handle marker click event
function onMarkerClick(e) {
currentLat = e.latlng.lat;
currentLng = e.latlng.lng;
// Make AJAX call to weather API using currentLat and currentLng
// Display weather information in modal
}
// Function to handle easyButton click event
function onEasyButtonClick() {
// Make AJAX call to another API using currentLat and currentLng
// Display different information in new modal
}
// Add click event listener to markers
cityMarker.on('click', onMarkerClick);
// Add click event listener to easyButton
easyButton.on('click', onEasyButtonClick);
In this code snippet, `currentLat` and `currentLng` are global variables that store the lat/lng values of the current marker when it is clicked. These values can then be accessed in the `onEasyButtonClick` function to make the AJAX call to the new API.
By separating the functionality into different functions and using global variables to store the lat/lng values, you can keep your code organized and easily access the lat/lng values when needed.
Rate this post
5 of 5 based on 2366 votesComments