Trigger click on leaflet marker
To emulate a mouse click, you can use the fire
method (inherited from Evented.fire
) on the marker :
marker.fire('click');
And a demo
var map = L.map('map').setView([0, 0], 12);
var icon = L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png'
});
var marker = L.marker([0, 0], {icon: icon})
.addTo(map);
var myHoverIcon = L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png'
});
marker.on('click', function(e) {
marker.setIcon(myHoverIcon);
});
document.querySelector('button').addEventListener('click', function() {
marker.fire('click');
});
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
button {position: absolute; left:10 px; top: 70px;}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<div id='map'></div>
<button>Click me</button>
Related videos on Youtube
Bazley
Updated on October 23, 2022Comments
-
Bazley over 1 year
I have a bunch of leaflet markers on the map. Each marker is held in array
markers
. The markers are created dynamically (during an ajax call).var markers = []; . . var marker = L.marker([mar.lat, mar.lng], { // ...build the marker... } marker._leaflet_id = mar.id; // give the marker an id corresponding to the id of its corresponding div var myHoverIcon = L.icon({ iconUrl: mar.imgUrl, iconSize: [40, 40], popupAnchor: [0, 0] }); marker.on('click', function(e) { alert('Marker clicked!'); marker.setIcon(myHoverIcon); }); . . markers.push(marker);
Each marker has an id corresponding to a particular div (stored in
data-mess_id
on the div). The plan is to change the marker's icon when its corresponding div in the feed is clicked on.$('#feed').on('mouseover', '.message', function() { var cssid = $(this).attr('data-mess_id').toString(); var baz = $.grep(markers, function(m) { return (m._leaflet_id == cssid); }); baz[0].trigger('click'); // doesn't work alert(baz[0].getLatLng()); // does work // this also does not work: var myHoverIcon = L.icon({ iconUrl: baz[0].imgUrl, iconSize: [40, 40], popupAnchor: [0, 0] }); baz[0].setIcon(myHoverIcon); });
It's all working fine except for the final bit. I just can't trigger a click event on the marker. I definitely have the correct marker because
baz[0].getLatLng()
is working. Butbaz[0].trigger('click')
doesn't work.I tried creating a new icon dynamically (
myHoverIcon
) but it doesn't work.How do I trigger a click event on the marker?
Is there another way to change the marker icon?
-
Bazley over 6 yearsWow, simple as that! Can't believe I've never come across this.