I am using Leaflet and I have few markers. So when hovering over a marker there is a popup that opens and in that popup, there is a checkbox. So what I need is whenever a user clicks on that checkbox it should change the popup content. So for example,
Checkbox name is More Info. The default popup contains latitude and longitude after hover. And when the user clicks that checkbox the popup should show city, state along with the latitude and longitude. I created a checkbox with a function inside onchange
event in the checkbox but it is not calling the angular function created, instead, it is looking for a JavaScript function. How can I make that call the Angular function or are there any other workaround to achieve it?
I have used below ways,
<input type="checkbox" onchange="showDetails(this);"/>
<input type="checkbox" onchange={{showDetails(this);}}/>
And my sample code looks like this
L.Routing.control({
waypoints: waypoints,
lineOptions: {
styles: [{color: '#453f30', opacity: 1, weight: 5}],
addWaypoints: false,
extendToWaypoints: false,
missingRouteTolerance: 0,
},
plan: L.Routing.plan(waypoints, {
createMarker: function (i, wp) {
return L.marker([latitude, longitude], {
icon: icon,
}).bindPopup('<input type="checkbox" onchange={{showDetails(this);}}/>More Info', {
closeButton: true,
}).on("mouseover", function (event) {
event.target.openPopup();
});
}
})
}).addTo(this.map);
You are very close to the solution. You can use popupopen
event same as mouseover
event like you did above. Your checkbox should be like this.
<input type="checkbox" id="chkbox1"/>
And then do as follows,
}).bindPopup('<input type="checkbox" id="chkbox1"/>More Info', {
closeButton: true,
}).on("mouseover", function (event) {
event.target.openPopup();
}).on("popupopen", function (event) {
// Here I am using JQuery. You can add JQuery to your Project
$("#chkbox1").on("click", e => {
e.preventDefault();
if ($("#chkbox1").is(":checked")) {
// your code goes here if checked
} else {
//
}
});
});