Javascript – Trigger click on leaflet marker

javascript, jquery, leaflet

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 divvar 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. But baz[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?

Best Solution

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>