24

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.

Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
8
  • 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. Commented Mar 3, 2014 at 3: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? Commented Mar 3, 2014 at 3: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. Commented Mar 3, 2014 at 3: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? Commented Mar 3, 2014 at 4:42
  • I'd like to open a popup at the clicked location and I don't want markers. Commented Mar 3, 2014 at 17:15
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); } });
Improve this answer
1

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); }
Improve this answer
1

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.