Triggering click event on Leaflet map?

Question

Is it possible to make a click event occur at a particular lat/lon on a leaflet map?

I would like to make a popup appear that is associated with a point at a particular location.

I have tried several combinations of map.fireEvent('click', latLon) and map.fire('click', latLon) but I can't find an examples or references describing this approach. Is this some thing that can be done?

One approach that I have tried (and which works) is to identify the object in the leaflet layer and to trigger a click event using layer[id].fireEvent('click'). However, this requires that I know the object ID and I would like to be able to just use a lat/lon to trigger this click.

I'd like to open a popup at the clicked location and I don't want to add a marker or add a new popup at this location. What I am trying to do is to fire a click event at a particular lat/lon where a point already exists and to trigger the popup that already exists.

score 29 · Answer 1 · edited May 23 '17 at 12:39

29

I think that your are thinking it is more complex than you think!

Try this:

var popLocation= new L.LatLng(-42.8585,147.2468);
var popup = L.popup()
    .setLatLng(popLocation)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

Sourced from the excellent documentation.

I know what you want to do now. Here's how you can open a popup at an arbitrary clicked location:

map.on('click', function(e) {        
        var popLocation= e.latlng;
        var popup = L.popup()
        .setLatLng(popLocation)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);        
    });

Final edit: I seriously think that if you want to fire a 'click' event to achieve something that your design needs to be looked at. If you really want to do it, it seems possible in javascript. It's not a GIS question, though.

edited May 23 '17 at 12:39

Community

1

answered Mar 03 '14 at 03:09

Alex Leith

13,453
30
69

1

Thank you for the suggestion. Do you know if it is possible to trigger this, without creating a popup? In my case I add 70 points to a map (binding a popup), and want to trigger one of these popups later. – djq Mar 03 '14 at 03:22
You can create all the popups, store them somehow/where, then just open them on the map. Read up on the documentation and try it out. I don't understand what you are trying to do. Perhaps you should edit your question to define your end-point? – Alex Leith Mar 03 '14 at 03:37
I understand how to open the popup if it is stored in an array, I want to try open it based on clicking at a place on the map. I'll try and make this clearer in the question. – djq Mar 03 '14 at 03:53
So you want to open the nearest popup to a click? Or open a popup at the clicked location? And you don't want markers? – Alex Leith Mar 03 '14 at 04:42
I'd like to open a popup at the clicked location and I don't want markers. – djq Mar 03 '14 at 17:15
Oh, that's easy.
I'll add some code in an answer.
– Alex Leith Mar 03 '14 at 21:59
Thank you for your help, but what I am actually trying to do is to fire a click event at a particular lat/lon and not to create a new popup, but to trigger one that exists (I will update my question again). – djq Mar 04 '14 at 03:44
let us continue this discussion in chat – Alex Leith Mar 04 '14 at 04:06

score 2 · Answer 2 · edited Oct 12 '18 at 08:44

I am using the other answer in a leaflet map to allow users to send me feature requests based on the clicked location in a map, which then opens a pre-filled google form with the lat long from that position. Those points are then shown on the map using sheetsee/tabletop. I added a map.hasLayer(my requests layer) so the user is not always seeing the popup when the map is clicked:

    map.on('click', function(e) { 
    if (map.hasLayer(requests)) {
        var requestform = e.latlng;
        var formpopup = L.popup();
        .setLatLng(requestform)
        .setContent('<a href=" google form ' + e.latlng.lat + 
                    '" target="_blank">Form</a>') 
        .openOn(map);
    }
});

score 1 · Answer 3 · edited Sep 25 '20 at 13:12

The entire real solutions is as follow and it works.

function onEachFeature(feature, layer) {
    var coords = new Array();
    coords.push([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]);
    var popupContent = " <strong>Name:</strong> " +
        feature.properties.Name +
        " <br /><br /> " +
        " <strong>Description:</strong> " +
        feature.properties.description +
        " <br /><br /> " +
        " <strong>LAT/LONG:</strong> " +
        " <a href='https://www.google.com/maps/search/?api=1&query=" + feature.geometry.coordinates[1] + "," + feature.geometry.coordinates[0] + "'" + " target='_blank'>" + feature.geometry.coordinates[1] + "," + feature.geometry.coordinates[0] + "</a>" +
        " <br /><br /> " +
        "<strong>Geometry Type:</strong> " +
        feature.geometry.type;
if (feature.properties &amp;&amp; feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
}

layer.bindPopup(popupContent);


}

score 1 · Answer 4 · answered Dec 08 '21 at 20:36

If a marker is not completely out of the discussion, you can make it transparent. Just use a custom transparent divIcon for the markers icon and set the width and height for a bigger/smaller click area. You can even use a transparent polygon if you want to cover a specific area.

Triggering click event on Leaflet map?

4 Answers4

Linked