I'm looking for a way to get content (text) of the active tooltip on a Leaflet map.
I can bind new tooltip content, but I can't seem to find a method to get the text.
What I'm trying to accomplish is to identify an object that the user hovers over to trigger an additional action outside of Leaflet.
Any help would be appreciated.
You can get the Tooltip content with: marker.getTooltip().getContent();
Related
I have a use case for leaflet where i need to have a list of POI on the left, and a leaflet map showing markers for those POI on the right.
If i click on a marker on the map, i highlight the POI in the list, this works fine.
However, i also want to do the reverse: if i click on the POI in the list, center the map on the marker for that POI and open it's popup.
I reckoned that if i could get the right img for the marker and then trigger a clickevent on it via JS, that should work. But that fails to trigger the popup. I can't find anything in the docs, blogposts or stackoverflow.
Anybody with any ideas?
Turns out i can do this by ensuring i have an array of the markers, then select the marker tied to the list and call the openPopup() method on it.
Found the answer here: https://github.com/Leaflet/Leaflet.markercluster/issues/180#issuecomment-18669817
I have a custom div (with settings) within a map. I would like click event not to propagate to map when a user clicks on the div. How could one achieve such behavior?
Leaflet version 1.0.
See the documentation for L.DomEvent.stopPropagation().
For anyone else coming here from a search engine, if you are trying to prevent clicks from a circle or other interactive layer from being handled by the underlying object (other circle or the map itself) you could also create the layer passing the option bubblingMouseEvents: false
Documentation: http://leafletjs.com/reference-1.2.0.html#interactive-layer
I will be trying to show a set of options using the layerGroup functionality to filter out the markers. I need to show a popup when an option is selected from a layer which will prompt the user to enter a number based on which i will be showing the markers. Is there a possible way?
In the above sketch, there' s a sample filter at the top right which i intend to show using the layers but the thing is on selecting the 'Location' option i have to show a popup that will prompt the user to enter a location number and on that basis the markers should be placed on the map.
I guess there would be multiple ways of achieving this, depending on what behaviour exactly you want to get.
E.g. you could use a "dummy" layer (with name "Location" probably?), that you can add in the Layers Control (I guess that is the "sample filter at the top"?). Then listen for this dummy layer for being added to the map, and launch your modal ("popup") at this time. Then when the user enters the necessary information, you can programmatically add the corresponding markers to the map.
If you need further help, please add more details on what behaviour you try to get, or start your implementation and post new questions, so that you already have a start of what you are trying to achieve and people can elaborate on it.
I'm struggling to make the markers on this Mapbox map clickable without destroying the scrolling effect. I want to make it possible to click on one of the markers, and then be scrolled to the right section.
Does anyone know how to fix it?
Add this to your javascript:
/* Bind event handler to the featurelayer that holds the markers */
placesLayer.on('click', function(e) {
//Get the id of the clicked marker
var id = e.layer.feature.properties.id;
//Scroll to the element
document.getElementById(id).scrollIntoView()
});
http://jsfiddle.net/1oxkgfkw/
NOTE: As is, the code posted in the mapbox example won't work because of of their css definition for 'article'. You have to remove right:0 as I did in the jsfiddle so the article element doesn't cover the screen and prevent clicks from registering on the markers.
Using Mapbox instead of Google, I'm building up a menu in the map that shows tabbed infowindow on every marker. The problem is that no matter which marker I'm on, the infowindow is always the same (from only one of the markers), as if it doesn't read the variable content var p = marker.feature.properties;
Anyone please have a look at this demo Thank you
[the system wont allow me to reply to the reply I got, so here's my reply:]
Thanks for the link. It's a different approach. The menu is missing and I can't really integrate the two scripts:
This was an error in that particular example: see the fixed version that correctly binds the right tooltip to the right marker.