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.
Related
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();
});
});
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 am creating a poi create task with mapbox map, The marker should move to the new position if the click event is occurring on map. The marker will initially be placed on the map at a default position. I want to disable the click event when it is clicking on the marker, It is working fine for the initial marker( clickable: false) option, For the dynamically added markers this option is not working
tMarker = L.marker(
new (L.LatLng)(latitude,longitude),{
clickable: false
}
)
I want to show a popup on the bottom middle of the page when clicking a marker.
I have used the following code
new mapboxgl.Popup({ anchor: 'top' })
This shows popup on the bottom of the marker. But I want to show the popup at the bottom middle of the page
Popups are more for attaching to the map at some lat/lng, if you want to trigger something to show/hide based on a click, I would create a separate div then show/hide it appropriately and set the text of it as needed.
map.on('click', 'mylayer', function (e) {
// show or hide your div
// feature that was clicked would be e.features[0]
} );
For the "show or hide your div" part, you could reference:
How can I hide/show a div when a button is clicked?
I have a survey with many input elements, and I have a progress bar that shows how much of the survey that has been filled out/answered by having a click event on the input elements. This works fine until someone use tab control to navigate through the form. Is there a tab control event, or some other event that I can use to track this behaviour?
Use the event focus to capture when the user is tabbing around in your controls:
$.on("focus", "input", function() { });