Enables snapping of draggable markers to polylines and other layers ! Now updated to work with Leaflet.Draw for Leaflet 1.0!
Check out the demo !
In order to use this plugin in your app you can either:
- install it via your favorite package manager:
npm i leaflet-snap
bower install git@github.com:makinacorpus/Leaflet.Snap.git
- download the repository and import the
leaflet.snap.js
file in your app.
It depends on Leaflet.GeometryUtil.
For snapping on shape drawing or edition snapping, it also depends on Leaflet.draw.
If your guide layer contains several thousands for features, adding the LayerIndex is recommended, this plugin takes advantage of the spatial index if it is available.
- Add
leaflet.snap.js
andleaflet.geometryutil.js
(optionallyleaflet.draw.js
)
var guideLayer = ...;
var marker = L.marker([48.488, 1.395]).addTo(map);
marker.snapediting = new L.Handler.MarkerSnap(map, marker);
marker.snapediting.addGuideLayer(guideLayer);
marker.snapediting.enable();
var guideLayers = [guides, road];
map.drawControl.setDrawingOptions({
polyline: { guideLayers: guideLayers },
polygon: { guideLayers: guideLayers, snapDistance: 5 },
});
var polyline = L.polyline(...).addTo(map);
polyline.snapediting = new L.Handler.PolylineSnap(map, polyline);
polyline.snapediting.addGuideLayer(guideLayer);
polyline.snapediting.enable();
Both L.Handler.MarkerSnap
and L.Handler.PolylineSnap
accept options as a third
argument.
L.EditToolbar.SnapEdit is an extension of L.EditToolbar.Edit in Leaflet.draw.
var polyline = L.polyline(...).addTo(map);
var editToolbar = new L.EditToolbar.SnapEdit(map, {
featureGroup: L.featureGroup([polyline]),
snapOptions: {
guideLayers: [guideLayer]
}
});
editToolbar.enable();
L.EditToolbar.SnapEdit
accepts options and initial guide layers.
snapDistance : (default 15) distance in pixels where snapping occurs
snapVertices : (default true) whether layers vertices add additional snap attraction
snap ( layer, latlng ) : fired when snapped to layer
at latlng
unsnap ( layer ) : fired when unsnapped from layer
L.Snap.Guidelines ia a class that works with Leaflet Draw to draw horizontal and vertical guidelines along all other existing rectangles and circles when in draw or edit mode, and allows the mouse to snap to those lines, to help the user to draw things that line up perfectly despite their being distance between them. Note that other shapes will always have snapping-prioirty over the guidelines.
var guideLines = new L.Snap.Guidelines(map, guideLayers, {});
guideStyle : The style of the guidelines, as a hash. By default, we have weight:1, color:black, opacity:0.1, and dashArray: 15, 10, 5.
enabled : as expected. enable : as expected. disable : as expected.
var gridlines = new L.Snap.Gridlines(map, guideLayers, {
'pixelSpacingX' : 98,
'pixelSpacingY' : 98
});
L.Snap.Gridlines draws a grid on the map, and enables L.Snap to snap to its lines. Intersections of NS/WE gridlines will be preferred over sticking to a single line, but other shapes will always have snapping priority over the grid itself.
maxBounds : Specifies the NSWE bounds for the gridlines. If the maxBounds option is not set, the maxBounds on the map itself is used by default.
numGridlines -or- numGridlinesLat/numGridlinesLng -or- gridSpacingLat/gridSpacingLng -or- pixelSpacingX/pixelSpacingY : Only one of these options (or pairs of options) should be set. the "num" options specify the number of gridlines to fit in the maxBounds for each direction, calculating their spacing based on the total width/height, while the "spacing" options do the opposite, calculating the number based on the spacing. Spacing also allows one to specify its values in pixel or latlng coordinates.
gridStyle : The style of the gridlines themselves, as a hash. By default, we have weight:1, color:black, and opacity:0.1.
enabled : as expected. enable : as expected. disable : as expected. disableSnap : disable snap without changing the show/hide status of the grid. disableSnap : re-enables snap without changing the show/hide status of the grid. calcDimensions : redraws the grid with new dimensions; options are the same as the constructor. show : shows the grid and disables snap on the grid. hide : hides the grid and disables snap on the grid.
- Fix to use leaflet-draw ^0.3.0
- Delete git module and use node module instead
- Can Snap for 'editing existing polyline with L.EditToolbar.SnapEdit'
- Example can be use with http / https
- Set the newly drawn point/vertex to the snapped location
- Disable snapping when the feature is deleted
- Fix Snaping if guide layer has Leaflet.LayerIndex
- Add init hooks to simplify initialization
- Mathieu Leplatre
- Tobias Bieniek
- Frédéric Bonifas