it is easy to add a layerGroup to a leaflet map by simply calling layergroup.addTo(map).
How I can I remove the whole layergroup from the map? I tried layergroup.eachLayer(function(layer) { map.removeLayer(layer);});
But, the map begins to behaviour weirdly.
You can simply use the removeLayer method, like this:
map.removeLayer(layerGroup)
Take a look at this plunker (click on the map to remove the layer):
http://plnkr.co/edit/jSUE8ft9p7odLhQGeOVa
layergroup.eachLayer(function(layer) { **map**.removeLayer(layer);});
use
layergroup.eachLayer(function(layer) { **layergroup**.removeLayer(layer);});
instead
Related
With google_maps_flutter how to add a markers on the map, when the map is already displayed?
GoogleMap.markers is a final Set<Marker>. So, it looks like impossible to add more markers. Is it nevertheless possible?
I'm trying to add clustering and layer control to filter markers on my map. After reading older posts on this issue, the code that was marked as the right answer looks like this. However, no matter how I change it, it does not work on my map.
var parent= new L.MarkerClusterGroup().addTo(map);
var overlay={}
overlay["Markers A"]=L.featureGroup.subGroup(parent,aPoints).addTo(map);
overlay["Markers B"]=L.featureGroup.subGroup(parent,bPoints).addTo(map);
control = L.control.layers(null, overlay, {collapsed: false });
control.addTo(map);
What am I doing wrong?
The issue that I was having was that L.featureGroup.subGroup takes in an array of markers as it's second parameters therefore, aPoints needed to be [aPoints].
simple question:
How can i set the draggability from all markers in a featureGroup on false?
Thanks, greets!
Simply loop through all markers within the Feature Group using the eachLayer() method, make sure the passed layer is a marker, and disable the dragging functionality using the marker interaction handler.
myFeatureGroup.eachLayer(function (layer) {
if (layer instanceof L.Marker) {
layer.dragging.disable();
}
});
You can also re-enable the dragging functionality using marker.dragging.enable().
Demo: http://jsfiddle.net/ve2huzxw/108/ (built on answer of Get multiple Markers in Leaflet).
I want to set markers on a Leaflet map. To achieve this I tried jquery-mobile-events with minor success. This is how I integrated it:
$(map).off('taphold');
$(map).bind('taphold', function(e, options){
... do something ...
});
It works on the desktop but not on mobile. 'map' is a L.map object. An other problem which is associated with it is that I can not get options.startPosition and options.endPosition. I need this to create a distinction between a long tap for panning the map and one to place a marker. Does anyone know a solution to this?
There is actualle a really neat implementation in Leaflet for this:
map.on('contextmenu', function(e){
.. do something ...
});
The problem is that it is also triggerd by clicking rightclick on desktop.
Edit: You can prevent it by checking if (event.button == 2) {...}
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});