I have few thousands of markers on my map. Some of them of pulsing icons according to users request.
At one point, the user wish to remove them. Given the marker that he points at, how can I simply remove the icon.
To add it I have:
var icon = L.icon.pulse({html:iconOptions.html, fillColor: iconOptions.fillColor, color:iconOptions.color, iconSize:iconOptions.iconSize, animate: true});
marker.setIcon(icon);
To remove the icon I tried:
var icon = marker.getIcon(); //getIcon doesnt exists :(
marker.remove(icon)
one thing for sure, I cannot remove the marker as it has other valuable information and the icon is not a layer that I can do clearLayer.
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 map with different levels. Each level takes information from a json file and generates the icons with the layer.setIcon method.
By dragging the map, the icons disappear when are outside the displayed area.
Why?
EDIT:
Okay, I think I see the problem here:
Leaflet.MarkerCluster.LayerSupport
Without this extension, rendering works... why?
That is the default behaviour of Leaflet.markercluster plugin, especially visible on mobile.
More specifically, it has a removeOutsideVisibleBounds option that is enabled by default:
removeOutsideVisibleBounds: Clusters and markers too far from the viewport are removed from the map for performance.
On mobile, anything outside the current map viewport is removed, and re-appears when panning stops. But this means that during pan, you may miss some markers.
See also Leaflet MarkerCluster removeOutsideVisibleBounds not working
Unfortunately, there is no API to customize this behaviour, other than disabling it by passing the option to false:
const mcg = L.markerClusterGroup({
removeOutsideVisibleBounds: false // Disable default behaviour
}).addTo(map);
Demo on mobile: https://jsfiddle.net/4weocd0q/1/embedded/#Result
This is a basic webmap feature, but I'm not finding it anywhere.
I want to do what they have in google maps - the labels are like links, and when you click on a label of a place that's a polygon or line it zooms to the bounds of that place.
Try it here, click on "Des Moines" here, or any other feature:
https://www.google.com/maps/#41.5241414,-93.5651933,9.33z
This is the closest thing I've found, but it's with a button rather than a link.
Zoom to Bounds: https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/
I'm using the leaflet.timedimension plugin to animate GPX trails and I would like to show multiple GPX paths at once with the possibility to deselect one or the other.
This works, but as only the first overlay in the leaflet control is enabled by default the user has to explicitly include the other GPX trails which I would like to avoid.
I've now tried to hack a bit around via:
$(".leaflet-control-layers-overlays label input").prop('checked', true)
and this works partially: all options are selected but still only the first GPX trail is shown. When doing
$(".leaflet-control-layers-overlays label input").trigger('click');
then only one trail is clicked depending on where I put it ('on('ready', function () {...}')
What is the proper way in leaflet to trigger an overlay click?
I just forgot to add both layers to the map:
geoJson1.addTo(map);
geoJson2.addTo(map);
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.