0.1.5 • Published 3 years ago
mapbox-gl-snap-sdis67 v0.1.5
Mapbox-GL Draw Snap Mode
Custom mode for Mapbox GL Draw that adds snapping ability while drawing features. It provides options to show guiding lines, control snapping sensibility, and whether to snap to midpoints on each segment.
Demo
See a full example in the docs folder, or check at the Demo.
Install
npm i mapbox-gl-draw-snap-mode
or use CDN:
<script src='https://unpkg.com/mapbox-gl-draw-snap-mode'></script>
Usage
import {
SnapPolygonMode,
SnapPointMode,
SnapLineMode,
SnapModeDrawStyles,
} from "mapbox-gl-draw-snap-mode";
// or global variable mapboxGlDrawSnapMode when using script tag
const draw = new MapboxDraw({
modes: {
...MapboxDraw.modes,
draw_point: SnapPointMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
},
// Styling guides
styles: SnapModeDrawStyles,
userProperties: true,
// Config snapping features
snap: true,
snapOptions: {
snapPx: 15, // defaults to 15
snapToMidPoints: true, // defaults to false
},
guides: false,
});
draw.changeMode("draw_polygon");
Acknowledgement
this project is heavily inspired from work of @davidgilbertson and leaflet-geoman
project.