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.

Answer 1

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.

Answer 2

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);
    }
});

Answer 3

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 && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);

}

Answer 4

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.