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).
Related
I am working on a leaflet markers clustering algorithm, everything is going fine until a marker updates its latlng, I need to reset the marker position in the cluster tree.
In short words, i need to call a function just everytime the marker calls setLatLng()
Thx to IvanSanchez comment, now I see that leaflet already fires move event when we use setLatLng() on a marker
But in my case I need the event only when the marker uses setLatLng() with new coordinates than before, and the solution for that is to just check if the old and new latlng are equal or not
marker.on('move', event =>{
if(event .oldLatLng.equals(event .latlng))
console.log("hello I've just moved")
})
I am trying to use the leaflet-draw tool for two different things:
as a "regular" tool to create new geometries
if I draw a line, I perform some calculations with turf.js, giving me points nearby.
I've set up two individual draw controls for each purpose. For the second, I have all but the draw:polyline disabled. The problem: I save my elements with the
map.on('draw:created', function(){...});
"command". But this way I (or the eventhandler, respectively :)) cant differentiate, if the line was drawn with the first or the second button. So basically i can use the draw tool either for one thing or the other. Is there a way where I can use the same tool for different applications on the same map?
Thanks for any hints or work arounds.
An alternative would be to use Leaflet-Geoman instead of Leaflet-Draw.
There you can create copies of Draw instances and add them a new shape name:
// copy a rectangle and customize its name, block, title and actions
map.pm.Toolbar.copyDrawControl('Polygon', {
name: 'PolygonCopy',
block: 'custom',
title: 'Display text on hover button',
actions: ['cancel', 'removeLastVertex', 'finish'],
});
And then you can check the shape name in the create event:
// listen to when a new layer is created
map.on('pm:create', function(e) {
console.log(e)
if(e.shape === 'Polygon'){
alert('Original Polygon')
}else if(e.shape === 'PolygonCopy'){
alert('Copy Polygon')
}
});
https://jsfiddle.net/falkedesign/r0sm9auo/
When creating a polygon using Mapbox GL Draw I do not want the polygon to then be editable, clickable etc. After ending the draw event, I'd like to to just appear as finished like below when it's deselected.
Maybe this is embedded in the simple_select config option?
The Mapbox Draw plugin provides an interface for writing and hooking in custom modes, where a mode is defined as way to group sets of user interactions into one behavior. Mapbox Draw Static Mode is a custom mode that displays data stored in Draw but does not let users interact with it, which sounds like what you are looking for.
modes.simple_select.onDrag function disable the onDrag event.
I give you a small example to can contextualize it.
Inside your #map-init method you should have:
const modes = MapboxDraw.modes;
let draw = new MapboxDraw({
// your mapBoxDraw options
});
map.on("draw.create", updateArea);
modes.draw_polygon.clickAnywhere = function (state, e) {
//your polygon click restrictions
}
modes.simple_select.onDrag = function (state, e) {
//when polygon is deselected onDrag will be false and user not be able to drag it
};
function updateArea(e) {
// your stuff when you're drawing
}
Leaflet 1.0 seems to support mouse events on individual features drawn on L.Canvas (source code). How should I bind an event with the on() method?
The same way you bind event handlers to any Leaflet layer, with on():
var line = L.polyline(coords, {renderer: L.canvas()});
line.on('click', function(ev) {...} );
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) {...}