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.
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 would like to make the Mapbox popup resizable so if the user clicks and drags on the corner/side, they can make the popup bigger or smaller and the content automatically adjusts. Is this possible?
There is no functionality for that provided by Mapbox GL JS. However, you have full control over the HTML element used, so you can implement this feature yourself.
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();
Some of my info pop-ups for my markers in Leaflet contain a lot of text (lots of linebreaks). This, in some cases, makes it go beyond the screen height, causing the user (me) to not be able to read all of it. Is there some way to make such "overflowing" pop-ups get a scrollbar? And also, naturally, keep it opened even when you remove the cursor from the marker so that it doesn't just disappear when I try to move the mouse cursor over to the scrollbar?
If not, how else would I solve this problem besides "cutting down on the info"?
In order to make your popup container scrollable, you need to set the maxHeight property when you instantiate the popup:
var popup = L.popup({maxHeight: 225}).setContent(content);
Here is a JSBin with a working example.
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