I'm a working on a project with leaflet where a it shows three layer
you can enable o disable whenever you want to display all the markers from that layer.
Every marker has a popup that it opens when you click on the marker
The problema i have is that when you hit over on any layer and active it, the marker displays its popup.
Is there any way to not open it when you activate a layer? o at least to keep it close and just open when you click on it?
Thanks colleagues!
I revised the solution to instead target layer activation.
This will programmatically unbind popup from each marker in the layer, hence preventing popups from opening when layer is activated.
var layerGroup = L.layerGroup().addTo(map);
layerGroup.on("layeradd", function (event) {
event.layer.eachLayer(function (marker) {
marker.unbindPopup();
});
});
Related
I have many markers on map with event listeners added to them. I also have a control on map that enables placing other shapes (circles) when map is clicked in the position of a click. The problem now is that clicking on position on the map where marker placed when control is enabled also triggers marker click event. Is there a solution in react-leaflet to add some pane on top of all other panes and layers so events are triggered only on that pane. The key thing here is that pane itself does not have leaflet event handlers, hence can not pass latLng to event callback. It only provides DOM mouseEvent but not LeafletMouseEvent that I need.
I found an unexpected behavior related with the Mapbox GL JS popup feature identifications.
I'm using the following event:
map.on('click', this._showPopup(e));
but when I make a double click and the zoom in is made, the popup is shown and close several times.
Is there any way to prevent this behavior?
A quick fix you can do is to disable doubleClickZoom mapbox options.
https://docs.mapbox.com/mapbox-gl-js/api/#map#doubleclickzoom
I am using clustering, and when the mouse hovers over one cluster it shows a popup.
The user needs to click on a link on that popup.
But as soon as the mouse leaves the marker, the popup closes.
What's an easy way to do this?
I've read and found there is this mousemove event, but i'm afraid that will be triggered many times and slow things down.
map.on('mousein ', 'clusters', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var id = e.features[0].id;
map.getSource('users').getClusterLeaves(id, 50, 0, function(error, features){
const html = features
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(html)
.addTo(map);
})
});
Right now, it hides the popup as soon as you leave the marker.
I want the popup to be shown if user hover over marker and corresponding popup.
Is there a way to make a leaflet.js popup show up at specific zoom levels please, for example when map.getZoom() > 6 only. Hiding the popup or even setting its opacity to zero could also be viable options.
Thanks
Use the method/event handler map.on('zoomend') (https://leafletjs.com/reference-1.4.0.html#map-zoomend) to detect whenever the map finishes zooming. Then check the zoom value do see if you want to show the popup or not.
map.on('zoomend', function(){
if(map.getZoom() > 6){
showPopup();//your function here
}
});
I have followed the mapbox toggle layers demo (https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/) on my map project.
In order to turn a layer 'off', I need to click twice on the actual button - once to select, and then a second time to actually hide the layer.
The demo map only requires a single click to show/hide layers.
How can I fix this?
My map is at: https://qlddogs.com.au/maptest2.html