diff --git a/.gitignore b/.gitignore index b2d6de3..7abee88 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +# IDE +.idea + # Dependencies /node_modules diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..a04ba38 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +engine-strict=true +resolution-mode=highest +@geoman-io:registry=https://npm.geoman.io/ diff --git a/docs/01-basics.md b/docs/01-basics.md new file mode 100644 index 0000000..e46e7ba --- /dev/null +++ b/docs/01-basics.md @@ -0,0 +1,108 @@ +--- +title: "Basic Usage" +--- + +# Basic Usage + +## Installation + +### Pro Version + +```shell +# install pro version +npm install @geoman-io/maplibre-geoman-pro +``` + +Add the following content to .npmrc in your project root + +```shell +@geoman-io:registry=https://npm.geoman.io/ +//npm.geoman.io/:_authToken="`<YOUR LICENSE KEY>`" +``` + +Replace `` with your license key. +Don't have a license key yet? [Purchase one here](https://geoman.io/pricing). + +### Free Version + +```shell +# install free version +npm install @geoman-io/maplibre-geoman-free +``` + +## Expected HTML Structure +```html + + + + Geoman Maplibre + + + +
+ + +``` + +## Maplibre and Geoman initialization +```typescript +import ml from 'maplibre-gl'; +import { type GmOptionsPartial } from '@geoman-io/maplibre-geoman-pro'; + +import 'maplibre-gl/dist/maplibre-gl.css'; +import '@geoman-io/maplibre-geoman-pro/dist/maplibre-geoman.css'; + + +const mapStyle: ml.StyleSpecification = { + version: 8, + glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf', + sources: { + 'osm-tiles': { + type: 'raster', + tiles: [ + 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + ], + tileSize: 256, + attribution: '© OpenStreetMap contributors', + }, + }, + layers: [ + { + id: 'osm-tiles-layer', + type: 'raster', + source: 'osm-tiles', + minzoom: 0, + maxzoom: 19, + }, + ], +}; + +const map = new ml.Map({ + container: 'dev-map', + style: mapLibreStyle, + center: [0, 51], + zoom: 5, +}); + +const gmOptions: GmOptionsPartial = { + // geoman options here +}; + +const geoman = new Geoman(map, gmOptions); + +map.on('gm:loaded', () => { + console.log('Geoman fully loaded'); + + // Here you can add your geojson shapes for example + const shapeGeoJson = { + type: 'Feature', + geometry: { type: 'Point', coordinates: [0, 51] }, + }; + map.gm.features.addGeoJsonFeature({ shapeGeoJson }); +}); +``` diff --git a/docs/02-events.md b/docs/02-events.md new file mode 100644 index 0000000..5826515 --- /dev/null +++ b/docs/02-events.md @@ -0,0 +1,31 @@ +--- +title: "Events" +--- + +# Event Listening + +Event listening works the same way as in Maplibre. You can listen to all events fired by Geoman. + +```typescript +// example of listening to the create event +map.on('gm:create', (event: GMEvent) => { + log.debug('Event', event); +}); +``` + +To debug all events, you can use the following code. This will display all Geoman events in the browser console. + +```typescript +import { type GlobalEventsListenerParemeters } from '@geoman-io/maplibre-geoman-pro'; + +map.gm.setGlobalEventsListener((event: GlobalEventsListenerParemeters) => { + if (event.type === 'converted') { + console.log('Regular event', event); + } else if (event.type === 'system') { + console.log('System event', event); + } +}); + +// you can disable the global events listener when you don't need it anymore +map.gm.setGlobalEventsListener(null); +``` diff --git a/docs/03-mode-switching.md b/docs/03-mode-switching.md new file mode 100644 index 0000000..2407547 --- /dev/null +++ b/docs/03-mode-switching.md @@ -0,0 +1,24 @@ +--- +title: "Modes Handling" +--- + +# Mode Handling + +All available modes can be enabled, disabled, or toggled using the following methods: + +For example, to handle the `edit:drag` mode: +```typescript +// enable mode +map.gm.options.enableMode('edit', 'drag'); + +// disable mode +map.gm.options.disableMode('edit', 'drag'); + +// toggle mode +map.gm.options.toggleMode('edit', 'drag'); + +// check mode state +map.gm.options.isModeEnabled('edit', 'drag'); +``` + +TypeScript support is available, so you can see all available options for each method in Geoman. diff --git a/docs/12.utils.md b/docs/12.utils.md deleted file mode 100644 index 91403be..0000000 --- a/docs/12.utils.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -sidebar_position: 12 -title: Utils ---- -### Utils - -The following methods are available on `L.PM.Utils`: - -| Method | Returns | Description | -| :------------------------------------------------------------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | -| calcMiddleLatLng(`map`, `latlng1`, `latlng2`) | `LatLng` | Returns the middle LatLng between two LatLngs. | -| getTranslation(`path`) | `String` | Returns the translation of the passed `path`. path = json-string f.ex. `tooltips.placeMarker`. | -| findLayers(`map`) | `Array` | Returns all layers that are available for Leaflet-Geoman. | -| circleToPolygon(`circle`, `sides = 60`, `withBearing = true`) | `Polygon` | Converts a circle into a polygon with default 60 sides. For CRS.Simple maps `withBearing` needs to be false. | -| pxRadiusToMeterRadius(`radiusInPx`, `map`, `center`) | `Number` | Converts a px-radius (CircleMarker) to meter-radius (Circle). The center LatLng is needed because the earth has different projections on different places. | -| getMeasurements(`layer`, `map`, `displayFormat`) | `Object` | Calculate the measurements of any layer. The option `displayFormat` can be `metric` or `imperial`. | diff --git a/docs/14.lazy-loading.md b/docs/14.lazy-loading.md deleted file mode 100644 index a5d9ea7..0000000 --- a/docs/14.lazy-loading.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -sidebar_position: 12 -title: Lazy Loading ---- -### Lazy Loading - -If you want to keep your initial webpage loading size low you might want to deferre Geoman javascript to load only when actually needed on the webpage. In that case if the L.Map object is already initialized when the Geoman javascript is loaded, Geoman won't attach to the existing map object and the `pm` property on the map object will be undefined. In order for Geoman to attach it self to your map object you need to run the following command after Geoman javascript file was loaded. - -```js -L.PM.reInitLayer(map); -``` - -Using ES6 Module, a simple example would look something like this: - -```js -import * as L from 'leaflet' - -let map = L.Map(); - -// map created and display on webpage -... - -/* drawing script */ -// at this point map.pm is undefined -if (!map.pm) { - await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free'); - L.PM.reInitLayer(map) -} -// map.pm is now defined and can be used to draw on map -``` diff --git a/docs/16.keyboard.md b/docs/16.keyboard.md deleted file mode 100644 index 0b94eb7..0000000 --- a/docs/16.keyboard.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -sidebar_position: 16 -title: Keyboard ---- -### Keyboard - -We implemented a built-in keyboard listener to make one central place where keyboard events can be accessed (without adding a listener yourself). - -The following methods are available on `map.pm.Keyboard`: - -| Method | Returns | Description | -| :---------------------------------- | :-------- | :----------------------------------------------------------------------------------------------------------------------- | -| getLastKeyEvent(`type = 'current'`) | `Object` | Returns the last event. Also `keydown` and `keyup` can be passed, to get the specific one. | -| getPressedKey() | `String` | Returns the current pressed key. [KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) | -| isShiftKeyPressed() | `Boolean` | Returns true if the `Shift` key is currently pressed. | -| isAltKeyPressed() | `Boolean` | Returns true if the `Alt` key is currently pressed. | -| isCtrlKeyPressed() | `Boolean` | Returns true if the `Ctrl` key is currently pressed. | -| isMetaKeyPressed() | `Boolean` | Returns true if the `Meta` key is currently pressed. | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :---------- | :----- | :---------------------------------------------------------------------------------------------------------------------- | :------------------------------ | -| pm:keyevent | `e` | Fired when `keydown` or `keyup` on the document is fired. `eventType` = `keydown / keyup`, `focusOn` = `document / map` | `event`, `eventType`, `focusOn` | diff --git a/docs/changelog/_category_.json b/docs/changelog/_category_.json deleted file mode 100644 index 385850a..0000000 --- a/docs/changelog/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Changelog", - "position": 20, - "link": { - "type": "generated-index" - } - } - \ No newline at end of file diff --git a/docs/changelog/free.md b/docs/changelog/free.md deleted file mode 100644 index ba17496..0000000 --- a/docs/changelog/free.md +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Leaflet-Geoman Free ---- - -## v2.17.0 - -* Updates esbuild to 8.56, prettier to 3.2.4 and fixes lint config (1444) and swap to esbuild by @mscno in https://github.com/geoman-io/leaflet-geoman/pull/1445 -* Add translation of "rotateButton" in languages that lack translation of "rotateButton" by @xiyuvi in https://github.com/geoman-io/leaflet-geoman/pull/1442 -* Add Kyrgyz language support by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1448 -* After disabling & enabling of button, don't call disable on the draw layer. by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1424 -* fix global keyboard and window listeners are not removed after the map is destroyed by @plainheart in https://github.com/geoman-io/leaflet-geoman/pull/1434 -* Improve esbuild bundle script to watch css changes and output sourcemaps by @mscno in https://github.com/geoman-io/leaflet-geoman/pull/1451 -* Snap by priority to all shapes in a radius of 5px instead of to the nearest by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1454 -* Minor: Force rotateEnabled() to always return a boolean. by @strfx in https://github.com/geoman-io/leaflet-geoman/pull/1455 -* Additional Custom Control Methods by @TurtIeSocks in https://github.com/geoman-io/leaflet-geoman/pull/1295 -* Prevent drawing of rectangle where all corners have the same position by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1470 -* Update translations pt_br and add translations pt_pt by @leoneljdias in https://github.com/geoman-io/leaflet-geoman/pull/1466 -* Add fallback to english for translations by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1461 -* Prevent opening popup on ignored layers while drawing by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1471 -* Add sourcemaps to dist (#1480) by @mscno in https://github.com/geoman-io/leaflet-geoman/pull/1483 -* Remove CSS :focus of marker-icon style to fix jumping while zooming by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1488 -* Backport Pro changes into OSS by @Falke-Design in https://github.com/geoman-io/leaflet-geoman/pull/1490 - - -## v2.16.0 - -### !! Breaking Changes !! - -_This is only relevant for projects using very old versions of babel/webpack loaders_ - -This version introduces new build tools in the library build toolchain. More specifically we have swapped webpack for eslint. This has improved our build speeds and made the build pipeline simpler and easier to maintain going forward. -However the move to esbuild has also caused the library build assets (minified js files) to be compiled using a more modern version of ECMAScript. The current build files now use the [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) ?. syntax and this can cause issues with projects using older versions of webpack/babel or similar loaders. - -If you face issues with upgrading to version v2.16.0 we suggest that you upgrade your own loaders and build toolchain to a version compatible with modern ECMAScript syntax. - -### Minor Changes - -* Add Kyrgyz translation: #1448 - -### Patches - -* Update translation for rotation button title: #1442 -* Fix handling of drawing modes after disabling a control button: #1424 -* Unbind global listeners after the map is removed: #1434 -* Sort snapping layers by priority in a radius of 5px: #1454 -* Force rotateEnabled() to always return a boolean: #1455 - -### Chores - -* Updates esbuild to 8.56, prettier to 3.2.4 and fixes lint config (1444) and swap to esbuild by @mscno in https://github.com/geoman-io/leaflet-geoman/pull/1445 - -### Credits - -Huge thanks to @Falke-Design, @xiyuvi, @strfx and @plainheart for helping! - -### New Contributors -* @mscno made their first contribution in https://github.com/geoman-io/leaflet-geoman/pull/1445 -* @xiyuvi made their first contribution in https://github.com/geoman-io/leaflet-geoman/pull/1442 -* @plainheart made their first contribution in https://github.com/geoman-io/leaflet-geoman/pull/1434 - -**Full Changelog**: https://github.com/geoman-io/leaflet-geoman/compare/2.15.0...2.16.0 - - - -## v2.15.0: Custom Rotation, More Events & Fixes - -### Minor Changes - -- Allow custom rotation point via `setRotationCenter`: #1362 -- Add `pm:intersect` event to Draw mode and refactor old intersection code: #1368 -- Add onVertexClick to Rectangle, Circle and CircleMarker: #1367 - -### Patches - -- Auto Prettier on commit: #1413 -- Fix Norwegian translation typos (lower case): #1322 -- Update docs: #1360 -- Update persian translation: #1387 -- Update polish translation: #1365 -- Remove autofocus from Text Layers: #1409 -- Replace hard-coded Earth radius with `L.CRS.Earth.R`: #1406 -- Draw.Rectangle now correctly returns corners of rotated rectangle: #1373 -- Leaflet-Geoman now consistently uses crosshair as the cursor while drawing: #1410 -- [Refactor] Extends Circle from CircleMarker: #1309 -- Auto detect initial angle of Rectangle: #1370 -- Update GlobalModes for Removal and Rotate + some little fixes: #1418 -- Chore(docs): update docs website: 144c0c89a55a93f011d7b90170c7dee748de8189 -- Chore(deps): Bump minimist from 1.2.5 to 1.2.8: #1325 -- Chore(deps-dev): Bump webpack from 5.36.2 to 5.76.0: #1335 -- Fix listen to layerremove instead of pm:remove to keep snapList updated: #1343 -- Update lint config and lint all files: 62b6ee6377fc2ef6a7ec35903f53d27e65b3b949 -- Chore(deps-dev): Bump postcss from 8.4.5 to 8.4.31: #1403 -- Chore(deps-dev): Bump word-wrap from 1.2.3 to 1.2.4: #1381 -- Use preferred tile.openstreetmap.org URL: #1393 -- Fix disabling snapping with altKey: #1379 -- Chore(deps): Bump tough-cookie and @cypress/request: #1414 -- Chore(deps-dev): Bump @babel/traverse from 7.16.5 to 7.23.4: #1415 -- Update node version: #1420 - -### Credits - -Huge thanks to @strfx, @Falke-Design, @andreasvatne, @cksadra, @artur1989, @0scvr, @AlimurtuzaCodes, @beig, and @Dimitar5555 for helping! - -## v2.14.2 - -### Patches - -- Fix map dragging after editing Text-Layer -- Fix multiple instances of Rotation -- Fix TypeScript translation - - -## v2.14.1: More events and helper functions + fixes - -### Minor Changes - -- 🇫🇮 Add Finnish translations -- 🇰🇷 Add Korean translation -- Add more text-layer events -- Add `setInitAngle` option for rectangles -- Add `setStyle` to Draw class to update style of currently drawn shape - -### Patches - -- Change `rotateEnabled` return type from `void` to `boolean` -- Optimize performance and prevent a Leaflet bug -- Fix rotation of newly added layer -- `getGeomanLayers()` now properly returns the scale help-layer -- Draw start now always puts first marker at the center of the map -- Update README with Pro options & title of test -- Chore(npm): add engines and nvmrc for easier node version handling - -## v2.14.0: Various Fixes - -### Minor Changes - -- 🇫🇮 Add Finnish translations: #1262 -- 🇰🇷 Add Korean translation: #1268 -- Add more text-layer events: #1265 -- Add `setInitAngle` option for rectangles: #1260 -- Add `setStyle` to Draw class to update style of currently drawn shape: #1290 - -### Patches - -- Change rotateEnabled return type void to boolean (#1264): #1263 -- Optimize performance and prevent Leaflet bug: #1277 -- Fix rotation of new added layer: #1270 -- Remove .only from tests: b7effdc37ea25792f54860fece6dd4b2ff6061da -- Doesn't return the rotation help-layer over getGeomanLayers(): #1287 -- Draw start now always puts first marker at the center of the map: #1261 -- Update Readme with Pro options & title of test: #1291 -- Chore(npm): add engines and nvmrc for easier node version handling: 7fcd102cc6250462e737a6b25a11f2f25a4f0099 -- Move fixes from Pro code into OSS: #1280 - -### Credits - -Huge thanks to @masysma, @sundo-dylan, and @Falke-Design for helping! - - -## v2.13.1: Japanese, Leaflet 1.9.2 and more fixes - -### Patches - -- Upgrade to Leaflet 1.9.2: #1239 -- Fix auto-focus on text-layer: #1244 -- Fix vertex remove of Multipolygon: #1243 -- Change css to set .active style to direct children only: #1241 -- Add version to TypeScript definition: #1238 -- Fix opt-in for text-layer and add the text to its options: #1240 -- Fix snapping when finishing draw on a segment of another layer: #1236 -- TS Type Return Improvements: #1215 -- Optimize isEmptyDeep for 300x performance improvement when dragging vertexes: #1230 -- Avoid empty clientX and clientY values when dragging marker in mobile…: #1208 -- Added Japanese translation: #1225 -- Update Afghanistan translation: #1237 -- Update Spanish translation: #1212 -- Chore(deps): Bump terser from 5.10.0 to 5.15.1: #1249 -- Chore(deps): Bump loader-utils from 1.4.0 to 1.4.1: #1254 -- Chore(deps): Bump ansi-regex from 3.0.0 to 5.0.1: #1250 -- Chore(deps): Bump minimatch from 3.0.4 to 3.1.2: #1255 -- Chore(deps): Bump moment from 2.29.1 to 2.29.4: #1198 - -### Credits - -Huge thanks to @SuperPat45, @ByMykel, @Falke-Design, @TurtIeSocks, @drzhbe, @wvddrss, @na3shkw, and @cksadra for helping! - - -## v2.13.0: Add Text Layer Support & Fixes - -### Minor Changes - -- Add Text Layer: #1120 -![textlayer](https://geoman-static.onrender.com/assets/text-layer.gif) - - -### Patches - -- Fix TS GlobalOptions: #1168 -- Fix ALT + TAB / blur in Chrome: #1167 -- Fix returning renderer for preferCanvas: #1166 -- Enable disabled button incl. functions: #1165 -- Fix: Update TS so that there is no error when compiling: #1155 -- Set title on the buttonContainer instead of the icon: #1171 -- Fixed error when call function disable/enable control button before initializing the control: #1143 - -### Credits - -Huge thanks to @Falke-Design, @jtsamper, and @vvlladd28 for helping! - -## v2.12.0: Add New Events & Support Leaflet 1.8 - -### Minor Changes - -- Add new events `pm:dragenable`, `pm:dragdisable`, `pm:change`: #1112 -- Update to Leaflet v1.8.0: #1140 - -### Patches - -- Improvement disable control button when change state we do not redraw panel: #1094 -- Chore(deps): Bump moment from 2.29.1 to 2.29.2: #1135 -- Remove engine: #1084 -- Fix(canvas): properly detect canvas renderer when added manually: #1076 -- Chore(deps): Bump nanoid from 3.1.30 to 3.2.0: #1085 -- Fix(toolbar): Fixed redirect to another web page when clicking in the disabled control button: #1090 -- Fix(editing): Fix isRelevant check for Drag and Edit Mode: #1107 -- Fix(altitude): Keep altitude on latlng while dragging: #1108 -- Fix(TypeScript): allow custom buttons in addControls: #1109 -- Fix(cursorMarker): Fix visibility of cursorMarker: #1110 -- Chore(deps): Bump minimist from 1.2.5 to 1.2.6: #1132 -- Fix Marker & Polyline TS: #1133 - -### Credits - -Huge thanks to @Falke-Design and @vvlladd28 for helping! \ No newline at end of file diff --git a/docs/changelog/pro.md b/docs/changelog/pro.md deleted file mode 100644 index ac3d72c..0000000 --- a/docs/changelog/pro.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Leaflet-Geoman Pro ⭐ ---- - -## v2.12.0: Added Union and Difference Modes - -- Add [Union feature](/docs/modes/9.union-mode.md) that merges two layers into one -- Add [Difference feature](/docs/modes/10.difference-mode.md) that subtracts one layer from another and returns the difference as a new layer -- Various bug fixes and improvements -- Merged all updates from [Leaflet-Geoman Free 2.17.0](https://github.com/geoman-io/leaflet-geoman/releases/tag/v2.17.0) - -## v2.11.0: Added SnapGuides - -### Features -Add SnapGuide feature that enables 90° guides while drawing and editing shapes - -![Snap Guides Demo](https://geoman-static.onrender.com/assets/snap-guides-fast.gif) - -Snap Guides are a powerful tool to create precise geometries. They are especially useful when drawing or editing shapes. Exclusive for Leaflet-Geoman Pro ⭐ - - - -### Patches -* Add measurement translations for all languages -* Fix bug with snapping priority - -## v2.10.0 - -- Merged all updates from [Leaflet-Geoman Free 2.15.0](https://github.com/geoman-io/leaflet-geoman/releases/tag/v2.15.0) - - -## v2.9.0 - -### Patches - -- Merged all updates from [Leaflet-Geoman Free 2.14.1](https://github.com/geoman-io/leaflet-geoman/releases/tag/v2.14.1) -- `getGeomanLayers()` now properly returns the scale help-layer -- Cleanup polygon shape while drawing -- Fixed various pinning bugs -- Remove duplicated function pxRadiusToMeter -- Fix pinning bugs - -## v2.8.1 - -### Features - -#### Add a vertex by clicking on line -`addVertexOnClick` -``` -map.pm.setGlobalOptions({addVertexOnClick: true}); -``` - -#### Closed Polygon drawing -`closedPolygonEdge` -`closedPolygonFill` - -``` -map.pm.setGlobalOptions({ - closedPolygonEdge: true, - closedPolygonFill: true -}) -``` - -#### Circle cutting -New option `allowCircleCut` per default `true` -Or cut as Circle shape: `cutAsCircle: true` / `map.pm.enableDraw('CutCircle')` - -#### AutoTracing - -Control: `autoTracingOption` -Options: `autoTracing`, `autoTraceMaxZoom`, `autoTraceMaxDistance` - -``` -map.pm.setGlobalOptions({autoTracing: true}); -``` - -![AutoTracing Demo](https://geoman-static.onrender.com/assets/auto-tracing.gif) - -## v2.8.0 - -### Features - -- Merge OSS 2.13.0 (Add Text Layer Support & Fixes) - - -## v2.7.0 - -### Minor Changes - -- Moved tests for Pro features into seperate files and fix an error with measurement: #41 -- Listen on layer remove event while scaling - remove temp layer: #42 -- Feature/oss 2.11.4: #40 -- Merge OSS 2.12: #44 - -### Patches - -- Fix Tooltip test: #43 - - -## v2.6.0 - - -### Features - -#### Add Scale Mode - -Scale mode allows you to scale shapes by dragging a corner of the shape. - - -### Minor Changes - -- Update from OSS version 2.11.2: #39 -- Enhance Split with latest OSS improvements: #38 - -### Patches - -## v2.5.0 - -### Minor Changes - -*Split* -![geoman-pro-split](https://geoman-static.onrender.com/assets/split.gif) - -*Measurement* -![geoman-pro-measurement](https://geoman-static.onrender.com/assets/measurement-demo.gif) - - -- Snapping now works on circle border: #587 -- Harmonize Drag Events for Markers and Circle Center: #591 -- CircleMarkers are now editable in size and Layers can be snapped to circle border: #603 -- Add Greek Translation: #611 -- Add option to hide middle markers . Fixes #411: #615 -- Add Powerful Toolbar Customizations . Fixes #614: #602 -- Added function to get all Geoman layers: #625 -- Toolbar Blocks can now be positioned independently: #626 -- Shape fix in events: #643 -- Add Hungarian translation: #647 -- Add Split feature: #19 -- Merge OSS 2.7.0 & Split & Measurement: #21 -- Split fixes: #22 -- Merge Leaflet-Geoman 2.8.0: b19f5a50ad4f02400be8f68d0b23b28b4d20530a -- Measurment CleanUp: 7994440f63ecc572de61bfe5449671c377799188 -- Fix open Points like translation, imperial, TODOs: 975fa62061a974341144ce73df1837b1d48ee40d -- Fix typo: #637 -- Replace difference and intersection from turf: #633 -- Cut edit event: #624 -- Add Merge Options: d6d682a37303e3ae1707047d3d37a8fa33c04a18 -- Update Readme: 52d19214850c6513d5b924362863ab2bea5f8db7 -- Add a small test: 97c7877e269451f9ff661504cf27683ee36d920a -- Add Mesasurement imperial format: 329680856609aecaa6d91137680f0d835924a6fa -- Fix Testing Bug: #658 -- Merge pull request #655 from geoman-io/develop: a3e389b4f61bda11c27108f3ee85af70e609d8a9 -- Merge OSS 2.7.0: db932e29bb3c7c1a31136f0d28aca30923621ba1 -- Review fixes: d111cb0f7370a3b9594897f741e8ee89fa7def77 -- Add support for multi-polygon: 43489065455b180dcb87ba697dce9f75640c71cf -- Close Tooltip while dragging: 33f925f4ff7415af07ffccb6a85e372a425a9f0d -- Merge OSS with Split & Master: 3b36d4ccc1c6b51fa96a08e1fee1c0d3da2e36ac -- Merge branch 'measure' into develop: 9a049d2390f18f002776273cc9d6515af46b1cd6 -- Merge Measurement: ceba6014b85fa456126150487d40a53a0551ee7d -- Updated some dependencies: 5679397040aa1782bdb699ffad45de99cc011be1 - -### Patches - -- Updated Swedish translations: #571 -- CSS Corner fix: #570 -- Changing drag cursor behavior if preferCanvas is true. Fixes #528: #590 -- Fix Marker SNap Behaviour when Drag Mode was previously enabled.: #577 -- Updated Russian language: #581 -- Updated Russian language (#600): #581 -- Fix Bug with preventMarkerRremoval . Fixes #576: #597 -- Fix css for toolbar / controls on the right side: #601 -- Updated documentation . Fixes #525, fixes #574: #593 -- Marker drag check . Fixes #567: #594 -- Support multiple self intersection . Fixes #455: #592 -- Fix Prevention Of Draw-Finish when Self Intersection is forbidden: #548 -- Fix Ghost Layers after cut: #598 -- Remove Polygon on Vertex Removal if there are less than 3 vertices left . Fixes #606: #613 -- Fix cutPolygon typo. Fixes 620: 8880b1f2a58c9f99d7b3720762bd29abdeafb53b -- Fix finishOn dblclick bug . Fixes #631: #632 -- Fix Circle Drag Bug . Fixes #617: #623 -- Fix bug when circle is the only layer on the map: #627 -- Create LICENSE.md: 47cd94eee9f18707d769f5ea7f520099aa903869 -- Typo drag -> removal: a957555f8f56d0539765497fbfb88c37cba59467 - -### Credits \ No newline at end of file diff --git a/docs/customize/2.language.md b/docs/customize/2.language.md deleted file mode 100644 index 31568f1..0000000 --- a/docs/customize/2.language.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_position: 2 -title: Customize Language ---- -#### Customize Language - -Change the language of user-facing copy in Leaflet-Geoman - -```js -map.pm.setLang("de"); -``` - -Currently available languages are `cz`, `da`, `de`, `el`, `en`, `es`, `fa`, `fi`, `fr`, `hu`, `id`, `it`, `ja`, `ko`, `ky`, `nl`, `no`, `pl`, `pt_br`, `ro`, `ru`, `sv`, `tr`, `ua`, `zh` and `zh_tw`. -To add translations to the plugin, you can add [a translation file](https://github.com/geoman-io/leaflet-geoman/tree/master/src/assets/translations) via Pull Request. - -You can also provide your own custom translations. - -```js -const customTranslation = { - tooltips: { - placeMarker: "Custom Marker Translation", - }, -}; - -map.pm.setLang("customName", customTranslation, "en"); -``` - -The 3rd parameter is the fallback language in case you only want to override a few Strings. -See the [english translation file](https://github.com/geoman-io/leaflet-geoman/blob/master/src/assets/translations/en.json) for all available strings. - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------ | :----- | :------------------------------ | :-------------------------------------------------- | -| pm:langchange | `e` | Fired when language is changed. | `activeLang`, `oldLang`, `fallback`, `translations` | diff --git a/docs/customize/4.style.md b/docs/customize/4.style.md deleted file mode 100644 index b957d77..0000000 --- a/docs/customize/4.style.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_position: 4 -title: Customize Style ---- -#### Customize Style - -To customize the style of the drawn layer with leaflet options, you can either pass the options to `enableDraw` or set the options generally: - -```js -map.pm.setPathOptions({ - color: "orange", - fillColor: "green", - fillOpacity: 0.4, -}); -``` - -If you want to exclude shapes from receiving these path options, use the second parameter like this: - -```javascript -map.pm.setPathOptions( - { color: "orange" }, - { - ignoreShapes: ["Circle", "Rectangle"], - } -); -``` - -You can also merge the new style with the current one, if you pass the parameter `merge: true`: - -```javascript -map.pm.setPathOptions( - { color: "orange" }, - { - merge: true, - } -); -``` diff --git a/docs/customize/6.toolbar.md b/docs/customize/6.toolbar.md deleted file mode 100644 index a7b9729..0000000 --- a/docs/customize/6.toolbar.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -sidebar_position: 6 -title: Toolbar ---- -### Toolbar - -The following methods are available on `map.pm.Toolbar`: - -| Method | Returns | Description | -| :---------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| changeControlOrder(`order`) | - | Pass an array of button names to reorder the buttons in the Toolbar. | -| getControlOrder() | `Array` | Current order of the buttons in the Toolbar. | -| setBlockPosition(`block`,`position`) | - | The position of a block (`draw`, `edit`, `custom`, `options`⭐) in the Toolbar can be changed. If not set, the value from `position` of the Toolbar is taken. [Details](#toolbar-block-position) | -| getBlockPositions() | `Object` | Returns a Object with the positions for all blocks. | -| setButtonDisabled(`name`, `Boolean`) | - | Enable / disable a button. | -| createCustomControl(`options`) | - | To add a custom Control to the Toolbar. [Details](#adding-newcustom-controls) | -| copyDrawControl(`instance`, `options`) | `Object` | Creates a copy of a draw Control. Returns the `drawInstance` and the `control`. | -| changeActionsOfControl(`name`, `actions`) | - | Change the actions of an existing button. | - -#### Customize Controls - -There are 4 control blocks in the Toolbar: `draw`, `edit`, `custom` and `options`⭐ -You can disable / enable entire blocks. To display the Toolbar as one block instead of 4, use `oneBlock: true`. - -```js -map.pm.addControls({ - drawControls: true, - editControls: false, - optionsControls: true, - customControls: true, - oneBlock: false, -}); -``` - -Reorder the buttons with: - -```js -map.pm.Toolbar.changeControlOrder([ - "drawCircle", - "drawRectangle", - "removalMode", - "editMode", -]); -``` - -Receive the current order with: - -```js -map.pm.Toolbar.getControlOrder(); -``` - -#### Toolbar Block Position - -You can set different positions per block `draw`, `edit`, `options`⭐, `custom`: - -Possible values are `'topleft'`, `'topright'`, `'bottomleft'`, `'bottomright'`. - -```javascript -map.pm.addControls({ - positions: { - draw: "topright", - edit: "topleft", - }, -}); -``` - -```javascript -map.pm.Toolbar.setBlockPosition("draw", "topright"); -``` - -```javascript -map.pm.Toolbar.getBlockPositions(); -``` - -#### Adding New/Custom Controls - -```js -// add a new custom control -map.pm.Toolbar.createCustomControl(options); -``` - -| Option | Default | Description | -| :-------------------- | :------- | :----------------------------------------------------------------------------------- | -| name | Required | Name of the control. | -| block | '' | block of the control. `draw`, `edit`, `custom`, `options`⭐ | -| title | '' | Text showing when you hover the control. | -| className | '' | CSS class with the Icon. | -| onClick | - | Function fired when clicking the control. | -| afterClick | - | Function fired after clicking the control. | -| actions | [ ] | Action that appears as tooltip. Look under [Actions](#actions) for more information. | -| toggle | true | Control can be toggled. | -| disabled | false | Control is disabled. | -| disableOtherButtons | true | Control disables other buttons if enabled. | -| disableByOtherButtons | true | Control disabled if other buttons is enabled. | - -#### Inherit from an Existing Control - -This effectively copies an existing control that you can customize. - -```js -// copy a rectangle and customize its name, block, title and actions -map.pm.Toolbar.copyDrawControl("Rectangle", { - name: "RectangleCopy", - block: "custom", - title: "Display text on hover button", - actions: actions, -}); -``` - -#### Actions - -You can add your own actions to existing or custom buttons. - -Here, we configure 3 separate actions in an array. - -```js -// creates new actions -const actions = [ - // uses the default 'cancel' action - "cancel", - // creates a new action that has text, no click event - { text: "Custom text, no click" }, - // creates a new action with text and a click event - { - text: "click me", - onClick: () => { - alert("🙋‍♂️"); - }, - }, -]; -``` - -Default actions available are: `cancel`, `removeLastVertex`, `finish`, `finishMode`. - -Change actions of an existing button: - -```js -map.pm.Toolbar.changeActionsOfControl("Rectangle", actions); -``` - -Pass actions to your custom buttons through the `actions` property mentioned under [Inherit from an Existing Control](#inherit-from-an-existing-control) - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------- | :----- | :-------------------------------------- | :------------------------------------ | -| pm:buttonclick | `e` | Fired when a Toolbar button is clicked. | `btnName`, `button` | -| pm:actionclick | `e` | Fired when a Toolbar action is clicked. | `text`, `action`, `btnName`, `button` | diff --git a/docs/customize/_category_.json b/docs/customize/_category_.json deleted file mode 100644 index ccd50ef..0000000 --- a/docs/customize/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Customization", - "position": 10, - "link": { - "type": "generated-index" - } - } - \ No newline at end of file diff --git a/docs/draw-modes/00-draw-marker.mdx b/docs/draw-modes/00-draw-marker.mdx new file mode 100644 index 0000000..e591772 --- /dev/null +++ b/docs/draw-modes/00-draw-marker.mdx @@ -0,0 +1,44 @@ +--- +title: "Draw Marker" +--- + +# Draw Marker Mode + +Marker Mode allows you to add markers to the map by clicking on desired locations. + +You can enable Draw Marker Mode like this: + +```js +map.gm.enableDraw('marker'); +map.gm.disableDraw(); +map.gm.toggleDraw('marker'); +map.gm.drawEnabled('marker'); + +// Or like this: +map.gm.enableMode('draw', 'marker'); +map.gm.disableMode('draw', 'marker'); +map.gm.toggleMode('draw', 'marker'); +map.gm.isModeEnabled('draw', 'marker'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired during marker drawing operations. | `map`, `shape` | +| `gm:create` | `event`| Fired during marker drawing operations. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired during marker drawing operations. | `map`, `shape` | + + +## Behavior + +Marker drawing operates by: +1. Clicking on the map to place a marker +2. The marker is immediately placed at the clicked location + +## Live Draw Marker Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawMarkerOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/01-draw-circle_marker.mdx b/docs/draw-modes/01-draw-circle_marker.mdx new file mode 100644 index 0000000..7f5cb7a --- /dev/null +++ b/docs/draw-modes/01-draw-circle_marker.mdx @@ -0,0 +1,44 @@ +--- +title: "Draw Circle Marker" +--- + +# Draw Circle Marker Mode + +Circle Marker Mode allows you to add circle markers to the map. Circle markers are circles with a fixed radius in pixels that maintain their screen size regardless of zoom level. + +You can enable Draw Circle Marker Mode like this: + +```js +map.gm.enableDraw('circle_marker'); +map.gm.disableDraw(); +map.gm.toggleDraw('circle_marker'); +map.gm.drawEnabled('circle_marker'); + +// Or like this: +map.gm.enableMode('draw', 'circle_marker'); +map.gm.disableMode('draw', 'circle_marker'); +map.gm.toggleMode('draw', 'circle_marker'); +map.gm.isModeEnabled('draw', 'circle_marker'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when circle marker drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a circle marker is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when circle marker drawing is completed. | `map`, `shape` | + +## Behavior + +Circle marker drawing operates by: +1. Clicking on the map to place the circle marker center +2. The circle marker is created with a default radius +3. The circle marker maintains its pixel size regardless of zoom level + +## Live Draw Circle Marker Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawCircleMarkerOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/02-draw-text_marker.mdx b/docs/draw-modes/02-draw-text_marker.mdx new file mode 100644 index 0000000..8815c70 --- /dev/null +++ b/docs/draw-modes/02-draw-text_marker.mdx @@ -0,0 +1,46 @@ +--- +title: "Draw Text Marker" +--- + +# Draw Text Marker Mode + +Text Marker Mode allows you to add text labels to the map by clicking on desired locations and entering custom text. + +You can enable Draw Text Marker Mode like this: + +```js +map.gm.enableDraw('text_marker'); +map.gm.disableDraw(); +map.gm.toggleDraw('text_marker'); +map.gm.drawEnabled('text_marker'); + +// Or like this: +map.gm.enableMode('draw', 'text_marker'); +map.gm.disableMode('draw', 'text_marker'); +map.gm.toggleMode('draw', 'text_marker'); +map.gm.isModeEnabled('draw', 'text_marker'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when text marker drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a text marker is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when text marker drawing is completed. | `map`, `shape` | + + +## Behavior + +Text marker drawing operates by: +1. Clicking on the map to place the text marker +2. A text input field appears where you can enter your text +3. Click outside the text field to complete the marker +4. The text marker is placed at the clicked location with the entered text + +## Live Draw Text Marker Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawTextMarkerOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/03-draw-circle.mdx b/docs/draw-modes/03-draw-circle.mdx new file mode 100644 index 0000000..2a7053e --- /dev/null +++ b/docs/draw-modes/03-draw-circle.mdx @@ -0,0 +1,46 @@ +--- +title: "Draw Circle" +--- + +# Draw Circle Mode + +Circle Mode allows you to add circles to the map by defining a center point and radius. + +You can enable Draw Circle Mode like this: + +```js +map.gm.enableDraw('circle'); +map.gm.disableDraw(); +map.gm.toggleDraw('circle'); +map.gm.drawEnabled('circle'); + +// Or like this: +map.gm.enableMode('draw', 'circle'); +map.gm.disableMode('draw', 'circle'); +map.gm.toggleMode('draw', 'circle'); +map.gm.isModeEnabled('draw', 'circle'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when circle drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a circle is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when circle drawing is completed. | `map`, `shape` | + +## Behavior + +Circle drawing operates by: +1. Clicking on the map to place the circle center +2. Moving the mouse to adjust the radius +3. Clicking again to finalize the circle + +The circle is represented as a GeoJSON polygon with 80 steps by default for smooth rendering. + +## Live Draw Circle Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawCircleOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/04-draw-line.mdx b/docs/draw-modes/04-draw-line.mdx new file mode 100644 index 0000000..bf57267 --- /dev/null +++ b/docs/draw-modes/04-draw-line.mdx @@ -0,0 +1,45 @@ +--- +title: "Draw Line" +--- + +# Draw Line Mode + +Line Mode allows you to create lines on the map by clicking to add vertices. + +You can enable Draw Line Mode like this: + +```js +map.gm.enableDraw('line'); +map.gm.disableDraw(); +map.gm.toggleDraw('line'); +map.gm.drawEnabled('line'); + +// Or like this: +map.gm.enableMode('draw', 'line'); +map.gm.disableMode('draw', 'line'); +map.gm.toggleMode('draw', 'line'); +map.gm.isModeEnabled('draw', 'line'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when line drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a line is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when line drawing is completed. | `map`, `shape` | + +## Behavior + +Line drawing operates by: +1. Clicking on the map to place the first vertex +2. Moving the mouse to see a preview of the line segment +3. Clicking again to add additional vertices +4. Double-clicking or clicking on the first vertex to complete the line + +## Live Draw Line Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawLineOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/05-draw-rectangle.mdx b/docs/draw-modes/05-draw-rectangle.mdx new file mode 100644 index 0000000..22df34e --- /dev/null +++ b/docs/draw-modes/05-draw-rectangle.mdx @@ -0,0 +1,44 @@ +--- +title: "Draw Rectangle" +--- + +# Draw Rectangle Mode + +Rectangle Mode allows you to create rectangles on the map by clicking and dragging to define opposite corners. + +You can enable Draw Rectangle Mode like this: + +```js +map.gm.enableDraw('rectangle'); +map.gm.disableDraw(); +map.gm.toggleDraw('rectangle'); +map.gm.drawEnabled('rectangle'); + +// Or like this: +map.gm.enableMode('draw', 'rectangle'); +map.gm.disableMode('draw', 'rectangle'); +map.gm.toggleMode('draw', 'rectangle'); +map.gm.isModeEnabled('draw', 'rectangle'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when rectangle drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a rectangle is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when rectangle drawing is completed. | `map`, `shape` | + +## Behavior + +Rectangle drawing operates by: +1. Clicking and holding on the map to set the first corner +2. Dragging to define the rectangle dimensions +3. Releasing the mouse button to complete the rectangle + +## Live Draw Rectangle Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawRectangleOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/06-draw-polygon.mdx b/docs/draw-modes/06-draw-polygon.mdx new file mode 100644 index 0000000..e06cdcd --- /dev/null +++ b/docs/draw-modes/06-draw-polygon.mdx @@ -0,0 +1,45 @@ +--- +title: "Draw Polygon" +--- + +# Draw Polygon Mode + +Polygon Mode allows you to create polygons on the map by clicking to add vertices and closing the shape. + +You can enable Draw Polygon Mode like this: + +```js +map.gm.enableDraw('polygon'); +map.gm.disableDraw(); +map.gm.toggleDraw('polygon'); +map.gm.drawEnabled('polygon'); + +// Or like this: +map.gm.enableMode('draw', 'polygon'); +map.gm.disableMode('draw', 'polygon'); +map.gm.toggleMode('draw', 'polygon'); +map.gm.isModeEnabled('draw', 'polygon'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- |:--------------------------| +| `gm:drawstart` | `event`| Fired when polygon drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a polygon is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when polygon drawing is completed. | `map`, `shape` | + +## Behavior + +Polygon drawing operates by: +1. Clicking on the map to place the first vertex +2. Moving the mouse to see a preview of the polygon segment +3. Clicking to add additional vertices +4. Closing the polygon by clicking on the first vertex + +## Live Draw Polygon Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawPolygonOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/07-draw-freehand.mdx b/docs/draw-modes/07-draw-freehand.mdx new file mode 100644 index 0000000..aa1e5c9 --- /dev/null +++ b/docs/draw-modes/07-draw-freehand.mdx @@ -0,0 +1,47 @@ +--- +title: "Draw Freehand" +--- + +# Draw Freehand Mode + +Freehand Mode allows you to create freehand lines or shapes on the map by continuously dragging the mouse or touch input. This mode is ideal for drawing natural, flowing lines without the need to click for each vertex. + +You can handle Draw Freehand Mode like this: + +```js +map.gm.enableDraw('freehand'); +map.gm.disableDraw(); +map.gm.toggleDraw('freehand'); +map.gm.drawEnabled('freehand'); + +// Or like this: +map.gm.enableMode('draw', 'freehand'); +map.gm.disableMode('draw', 'freehand'); +map.gm.toggleMode('draw', 'freehand'); +map.gm.isModeEnabled('draw', 'freehand'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :----------- | :----- | :---------------------------------------------- | :------------------------ | +| `gm:drawstart` | `event` | Fired when freehand drawing starts. | `map`, `shape` | +| `gm:create` | `event` | Fired when a freehand shape is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event` | Fired when freehand drawing is completed. | `map`, `shape` | + +## Behavior + +Freehand drawing operates by: + +1. **Initiating Drawing**: Click and hold the mouse button to start drawing. +2. **Drawing**: Move the cursor to draw a continuous line or shape. The path is dynamically rendered as you move. +3. **Completing Drawing**: Release the mouse button to finalize the shape. + +## Live Draw Freehand Example + + +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawFreehandOptions } from '../../src/components/examples/mode-options.ts'; + + diff --git a/docs/draw-modes/08-draw-custom_shape.mdx b/docs/draw-modes/08-draw-custom_shape.mdx new file mode 100644 index 0000000..628610c --- /dev/null +++ b/docs/draw-modes/08-draw-custom_shape.mdx @@ -0,0 +1,97 @@ +--- +title: "Draw Custom Shape" +--- + +# Draw Custom Shape Mode + +Custom Shape Mode allows you to create predefined shapes on the map by selecting from available options. This mode is ideal for adding consistent and reusable shapes without the need to manually define each vertex. + +You can handle Draw Custom Shape Mode like this: + +```js +map.gm.enableDraw('custom_shape'); +map.gm.disableDraw(); +map.gm.toggleDraw('custom_shape'); +map.gm.drawEnabled('custom_shape'); + +// Or like this: +map.gm.enableMode('draw', 'custom_shape'); +map.gm.disableMode('draw', 'custom_shape'); +map.gm.toggleMode('draw', 'custom_shape'); +map.gm.isModeEnabled('draw', 'custom_shape'); +``` + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :----------------------------------------------- | :------------------------ | +| `gm:drawstart` | `event`| Fired when custom shape drawing starts. | `map`, `shape` | +| `gm:create` | `event`| Fired when a custom shape is created. | `map`, `shape`, `feature` | +| `gm:drawend` | `event`| Fired when custom shape drawing is completed. | `map`, `shape` | + +## Customizing Custom Shape Behavior + +You can customize the custom shape drawing behavior by defining the available shapes and their configurations. This allows you to offer different predefined shapes that users can select and draw on the map. + +Example configuration: + +```js + +const customShapeTriangle = { + type: 'Feature', + properties: { + shape: 'triangle' + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [4.0, 51.2], + [5.4, 52.4], + [6.8, 51.2], + [4.0, 51.2] + ] + ] + } +}; + +const customShapeRectangle = { + type: 'Feature', + properties: { + shape: 'rectangle' + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [-0.47, 51.67], + [1.43, 51.67], + [1.43, 53.32], + [-0.47, 53.32], + [-0.47, 51.67] + ] + ] + } +}; + +map.gm.options.controls.draw.custom_shape.options = [ + { + type: 'select', + label: 'Shape', + name: 'shape', + value: { title: 'Triangle', value: JSON.stringify(customShapeTriangle) }, + choices: [ + { title: 'Triangle', value: JSON.stringify(customShapeTriangle) }, + { title: 'Rectangle', value: JSON.stringify(customShapeRectangle) } + ] + } +]; +``` + +## Live Draw Custom Shape Example + +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { drawCustomShapeOptions } from '../../src/components/examples/mode-options'; + + diff --git a/docs/draw-modes/_category_.json b/docs/draw-modes/_category_.json new file mode 100644 index 0000000..00e7a00 --- /dev/null +++ b/docs/draw-modes/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Draw Modes", + "position": 102, + "collapsible": true, + "link": { + "type": "generated-index" + } +} diff --git a/docs/edit-modes/00-edit-drag.mdx b/docs/edit-modes/00-edit-drag.mdx new file mode 100644 index 0000000..b430809 --- /dev/null +++ b/docs/edit-modes/00-edit-drag.mdx @@ -0,0 +1,61 @@ +--- +title: "Drag" +--- + +# Drag Mode + +You can handle Drag Mode for all layers on a map like this: + +```js +map.gm.enableGlobalDragMode(); +map.gm.disableGlobalDragMode(); +map.gm.toggleGlobalDragMode(); +map.gm.globalDragModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'drag'); +map.gm.disableMode('edit', 'drag'); +map.gm.toggleMode('edit', 'drag'); +map.gm.isModeEnabled('edit', 'drag'); +``` + + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalDragMode()` | - | Enables global Drag Mode. | +| `disableGlobalDragMode()` | - | Disables global Drag Mode. | +| `toggleGlobalDragMode()` | - | Toggles global Drag Mode. | +| `globalDragModeEnabled()` | `Boolean` | Returns `true` if global Drag Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:dragstart` | `event`| Fired when a layer starts being dragged. | `map`, `feature`, `shape` | +| `gm:drag` | `event`| Fired when a layer is dragged. | `map`, `feature`, `shape` | +| `gm:dragend` | `event`| Fired when a layer stops being dragged. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :----------------------- | :----- | :------------------------------- | :--------------------- | +| `gm:globaldragmodetoggled` | `event` | Fired when Drag Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Drag Mode events on the map instance like this: + +```js +map.on('gm:globaldragmodetoggled', (event) => { + console.log(event); +}); +``` + +## Live Drag Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editDragOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/01-edit-change.mdx b/docs/edit-modes/01-edit-change.mdx new file mode 100644 index 0000000..3a42fa0 --- /dev/null +++ b/docs/edit-modes/01-edit-change.mdx @@ -0,0 +1,60 @@ +--- +title: "Edit" +--- + +# Edit Mode + +You can handle Edit Mode for all layers on a map like this: + +```js +map.gm.enableGlobalEditMode(); +map.gm.disableGlobalEditMode(); +map.gm.toggleGlobalEditMode(); +map.gm.globalEditModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'change'); +map.gm.disableMode('edit', 'change'); +map.gm.toggleMode('edit', 'change'); +map.gm.isModeEnabled('edit', 'change'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalEditMode()` | - | Enables global Edit Mode. | +| `disableGlobalEditMode()` | - | Disables global Edit Mode. | +| `toggleGlobalEditMode()` | - | Toggles global Edit Mode. | +| `globalEditModeEnabled()` | `Boolean` | Returns `true` if global Edit Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:-------------------------| :----- | :------------------------------------------- | :-------------------------| +| `gm:editstart` | `event`| Fired when a layer starts being changed. | `map`, `feature`, `shape` | +| `gm:edit` | `event`| Fired when a layer is being changed. | `map`, `feature`, `shape` | +| `gm:editend` | `event`| Fired when a layer stops being changed. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globaleditmodetoggled` | `event` | Fired when Edit Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Edit Mode events on the map instance like this: + +```js +map.on('gm:globaleditmodetoggled', (event) => { + console.log(event); +}); +``` + +## Live Edit Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editChangeOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/02-edit-rotate.mdx b/docs/edit-modes/02-edit-rotate.mdx new file mode 100644 index 0000000..55c8b41 --- /dev/null +++ b/docs/edit-modes/02-edit-rotate.mdx @@ -0,0 +1,60 @@ +--- +title: "Rotate" +--- + +# Rotate Mode + +You can handle Rotate Mode for all layers on a map like this: + +```js +map.gm.enableGlobalRotateMode(); +map.gm.disableGlobalRotateMode(); +map.gm.toggleGlobalRotateMode(); +map.gm.globalRotateModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'rotate'); +map.gm.disableMode('edit', 'rotate'); +map.gm.toggleMode('edit', 'rotate'); +map.gm.isModeEnabled('edit', 'rotate'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalRotateMode()` | - | Enables global Rotate Mode. | +| `disableGlobalRotateMode()` | - | Disables global Rotate Mode. | +| `toggleGlobalRotateMode()` | - | Toggles global Rotate Mode. | +| `globalRotateModeEnabled()` | `Boolean` | Returns `true` if global Rotate Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :--------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:rotatestart` | `event`| Fired when a layer starts being rotated. | `map`, `feature`, `shape` | +| `gm:rotate` | `event`| Fired when a layer is being rotated. | `map`, `feature`, `shape` | +| `gm:rotateend` | `event`| Fired when a layer stops being rotated. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalrotatemodetoggled` | `event` | Fired when Rotate Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Rotate Mode events on the map instance like this: + +```js +map.on('gm:globalrotatemodetoggled', (event) => { + console.log(event); +}); +``` + +## Live Rotate Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editRotateOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/03-edit-scale.mdx b/docs/edit-modes/03-edit-scale.mdx new file mode 100644 index 0000000..33a7fb1 --- /dev/null +++ b/docs/edit-modes/03-edit-scale.mdx @@ -0,0 +1,70 @@ +--- +title: "Scale ⭐" +--- + +# Scale Mode + +You can handle Scale Mode for all layers on a map like this: + +```js +map.gm.enableGlobalScaleMode(); +map.gm.disableGlobalScaleMode(); +map.gm.toggleGlobalScaleMode(); +map.gm.globalScaleModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'scale'); +map.gm.disableMode('edit', 'scale'); +map.gm.toggleMode('edit', 'scale'); +map.gm.isModeEnabled('edit', 'scale'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalScaleMode()` | - | Enables global Scale Mode. | +| `disableGlobalScaleMode()` | - | Disables global Scale Mode. | +| `toggleGlobalScaleMode()` | - | Toggles global Scale Mode. | +| `globalScaleModeEnabled()` | `Boolean` | Returns `true` if global Scale Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :--------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:scalestart` | `event`| Fired when a layer starts being scaled. | `map`, `feature`, `shape` | +| `gm:scale` | `event`| Fired when a layer is being scaled. | `map`, `feature`, `shape` | +| `gm:scaleend` | `event`| Fired when a layer stops being scaled. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalscalemodetoggled` | `event` | Fired when Scale Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Scale Mode events on the map instance like this: + +```js +map.on('gm:globalscalemodetoggled', (event) => { + console.log(event); +}); +``` + +## Supported Features + +Scale mode supports the following feature types: +- Polygons +- Rectangles +- Lines +- Circles + +When scaling, the feature will maintain its proportions relative to its centroid point. For rectangles, the scaling operation preserves the rectangular shape while adjusting its size. + +## Live Scale Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editScaleOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/04-edit-copy.mdx b/docs/edit-modes/04-edit-copy.mdx new file mode 100644 index 0000000..58d74dd --- /dev/null +++ b/docs/edit-modes/04-edit-copy.mdx @@ -0,0 +1,67 @@ +--- +title: "Copy ⭐" +--- + +# Copy Mode + +You can handle Copy Mode for all layers on a map like this: + +```js +map.gm.enableGlobalCopyMode(); +map.gm.disableGlobalCopyMode(); +map.gm.toggleGlobalCopyMode(); +map.gm.globalCopyModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'copy'); +map.gm.disableMode('edit', 'copy'); +map.gm.toggleMode('edit', 'copy'); +map.gm.isModeEnabled('edit', 'copy'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalCopyMode()` | - | Enables global Copy Mode. | +| `disableGlobalCopyMode()` | - | Disables global Copy Mode. | +| `toggleGlobalCopyMode()` | - | Toggles global Copy Mode. | +| `globalCopyModeEnabled()` | `Boolean` | Returns `true` if global Copy Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:copystart` | `event`| Fired when a layer starts being copied. | `map`, `feature`, `shape` | +| `gm:copy` | `event`| Fired when a layer is being copied. | `map`, `feature`, `shape` | +| `gm:copyend` | `event`| Fired when a layer is copied. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalcopymodetoggled` | `event` | Fired when Copy Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Copy Mode events on the map instance like this: + +```js +map.on('gm:globalcopymodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Copy mode operates in two ways: + +1. **Sticky Mode Enabled**: A shape can be selected once and then copied multiple times on each subsequent click. +2. **Sticky Mode Disabled**: A shape is copied when a user drags it to a new location. + +## Live Copy Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editCopyOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/05-edit-cut.mdx b/docs/edit-modes/05-edit-cut.mdx new file mode 100644 index 0000000..2b41206 --- /dev/null +++ b/docs/edit-modes/05-edit-cut.mdx @@ -0,0 +1,67 @@ +--- +title: "Cut" +--- + +# Cut Mode + +Cut mode allows you to cut holes in existing shapes or remove parts of them. You can handle Cut Mode for all layers on a map like this: + +```js +map.gm.enableGlobalCutMode(); +map.gm.disableGlobalCutMode(); +map.gm.toggleGlobalCutMode(); +map.gm.globalCutModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'cut'); +map.gm.disableMode('edit', 'cut'); +map.gm.toggleMode('edit', 'cut'); +map.gm.isModeEnabled('edit', 'cut'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalCutMode()` | - | Enables global Cut Mode. | +| `disableGlobalCutMode()` | - | Disables global Cut Mode. | +| `toggleGlobalCutMode()` | - | Toggles global Cut Mode. | +| `globalCutModeEnabled()` | `Boolean` | Returns `true` if global Cut Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:cutstart` | `event`| Fired when a cut operation starts. | `map`, `feature`, `shape` | +| `gm:cut` | `event`| Fired during the cut operation. | `map`, `feature`, `shape` | +| `gm:cutend` | `event`| Fired when a cut operation is completed. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :----------------------- | :----- | :------------------------------- | :--------------------- | +| `gm:globalcutmodetoggled` | `event` | Fired when Cut Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Cut Mode events on the map instance like this: + +```js +map.on('gm:globalcutmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +The Cut Mode operates by: +1. Selecting a target shape to cut +2. Drawing a polygon that defines the area to be removed +3. The intersection of the drawn polygon with the target shape will be removed + +## Live Cut Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editCutOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/06-edit-split.mdx b/docs/edit-modes/06-edit-split.mdx new file mode 100644 index 0000000..7c39b2b --- /dev/null +++ b/docs/edit-modes/06-edit-split.mdx @@ -0,0 +1,68 @@ +--- +title: "Split ⭐" +--- + +# Split Mode + +Split Mode allows you to draw a line that splits all underlying Polygons and Lines. When a feature is split, the original feature will be replaced with the resulting split features. + +You can handle Split Mode for all layers on a map like this: + +```js +map.gm.enableGlobalSplitMode(); +map.gm.disableGlobalSplitMode(); +map.gm.toggleGlobalSplitMode(); +map.gm.globalSplitModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'split'); +map.gm.disableMode('edit', 'split'); +map.gm.toggleMode('edit', 'split'); +map.gm.isModeEnabled('edit', 'split'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-------------------------------| +| `enableGlobalSplitMode()` | - | Enables global Split Mode. | +| `disableGlobalSplitMode()` | - | Disables global Split Mode. | +| `toggleGlobalSplitMode()` | - | Toggles global Split Mode. | +| `globalSplitModeEnabled()` | `Boolean` | Returns `true` if global Split Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :------------------------------------------- | :------------------------------------------| +| `gm:split` | `event`| Fired during the split operation. | `map`, `originalFeature`, `features` | +| `gm:create` | `event`| Fired during the split operation. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalsplitmodetoggled` | `event` | Fired when Split Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Split Mode events on the map instance like this: + +```js +map.on('gm:globalsplitmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Split mode operates by: +1. Drawing a line across features you want to split +2. The line will split any intersecting polygons or lines into separate features +3. Original features are replaced with the resulting split features + +## Live Split Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editSplitOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/07-edit-union.mdx b/docs/edit-modes/07-edit-union.mdx new file mode 100644 index 0000000..6147d6b --- /dev/null +++ b/docs/edit-modes/07-edit-union.mdx @@ -0,0 +1,75 @@ +--- +title: "Union ⭐" +--- + +# Union Mode + +Union Mode allows you to merge multiple polygons into a single polygon. The original features will be replaced with the resulting union feature. + +You can handle Union Mode for all layers on a map like this: + +```js +map.gm.enableGlobalUnionMode(); +map.gm.disableGlobalUnionMode(); +map.gm.toggleGlobalUnionMode(); +map.gm.globalUnionModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'union'); +map.gm.disableMode('edit', 'union'); +map.gm.toggleMode('edit', 'union'); +map.gm.isModeEnabled('edit', 'union'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalUnionMode()` | - | Enables global Union Mode. | +| `disableGlobalUnionMode()` | - | Disables global Union Mode. | +| `toggleGlobalUnionMode()` | - | Toggles global Union Mode. | +| `globalUnionModeEnabled()` | `Boolean` | Returns `true` if global Union Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :------------------------------------------- | :------------------------------------------| +| `gm:union` | `event`| Fired during the union operation. | `map`, `originalFeatures`, `feature` | +| `gm:create` | `event`| Fired during the union operation. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalunionmodetoggled` | `event` | Fired when Union Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Union Mode events on the map instance like this: + +```js +map.on('gm:globalunionmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Union mode operates by: +1. Selecting multiple polygons to merge +2. The selected polygons will be combined into a single polygon +3. Original features are replaced with the resulting union feature + +### Supported Shapes + +Union mode supports the following feature types: +- Polygons +- Rectangles +- Circles + +## Live Union Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editUnionOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/olverlapped-features.json'; + + diff --git a/docs/edit-modes/08-edit-difference.mdx b/docs/edit-modes/08-edit-difference.mdx new file mode 100644 index 0000000..82206a2 --- /dev/null +++ b/docs/edit-modes/08-edit-difference.mdx @@ -0,0 +1,75 @@ +--- +title: "Difference ⭐" +--- + +# Difference Mode + +Difference Mode allows you to subtract one polygon from another. The original feature will be replaced with the resulting difference feature. + +You can handle Difference Mode for all layers on a map like this: + +```js +map.gm.enableGlobalDifferenceMode(); +map.gm.disableGlobalDifferenceMode(); +map.gm.toggleGlobalDifferenceMode(); +map.gm.globalDifferenceModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'difference'); +map.gm.disableMode('edit', 'difference'); +map.gm.toggleMode('edit', 'difference'); +map.gm.isModeEnabled('edit', 'difference'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalDifferenceMode()` | - | Enables global Difference Mode. | +| `disableGlobalDifferenceMode()` | - | Disables global Difference Mode. | +| `toggleGlobalDifferenceMode()` | - | Toggles global Difference Mode. | +| `globalDifferenceModeEnabled()` | `Boolean` | Returns `true` if global Difference Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :----------------- | :----- | :------------------------------------------- | :----------------------------------------------------- | +| `gm:difference` | `event`| Fired during the difference operation. | `map`, `originalFeatures`, `feature` | +| `gm:create` | `event`| Fired during the difference operation. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :---------------------------- | :------ | :------------------------------------- | :--------------------- | +| `gm:globaldifferencemodetoggled` | `event` | Fired when Difference Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Difference Mode events on the map instance like this: + +```js +map.on('gm:globaldifferencemodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Difference mode operates by: +1. Selecting a target polygon (the one to subtract from) +2. Drawing or selecting another polygon that will be subtracted from the target +3. The original feature is replaced with the resulting difference feature + +### Supported Shapes + +Difference mode supports the following feature types: +- Polygons +- Rectangles +- Circles + +## Live Difference Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editDifferenceOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/olverlapped-features.json'; + + diff --git a/docs/edit-modes/09-edit-line_simplification.mdx b/docs/edit-modes/09-edit-line_simplification.mdx new file mode 100644 index 0000000..da5e5df --- /dev/null +++ b/docs/edit-modes/09-edit-line_simplification.mdx @@ -0,0 +1,73 @@ +--- +title: "Line Simplification ⭐" +--- + +# Line Simplification Mode + +Line Simplification Mode allows you to simplify line geometry by removing vertices. This is useful for smoothing complex lines or reducing the number of points in a line. + +You can handle Line Simplification Mode for all layers on a map like this: + +```js +map.gm.enableGlobalLineSimplificationMode(); +map.gm.disableGlobalLineSimplificationMode(); +map.gm.toggleGlobalLineSimplificationMode(); +map.gm.globalLineSimplificationModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'line_simplification'); +map.gm.disableMode('edit', 'line_simplification'); +map.gm.toggleMode('edit', 'line_simplification'); +map.gm.isModeEnabled('edit', 'line_simplification'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalLineSimplificationMode()` | - | Enables global Line Simplification Mode. | +| `disableGlobalLineSimplificationMode()` | - | Disables global Line Simplification Mode. | +| `toggleGlobalLineSimplificationMode()` | - | Toggles global Line Simplification Mode. | +| `globalLineSimplificationModeEnabled()` | `Boolean` | Returns `true` if global Line Simplification Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:line_simplification` | `event`| Fired during simplification. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------------------- | :------ | :--------------------------------------------- | :--------------------- | +| `gm:globallinesimplificationmodetoggled` | `event` | Fired when Line Simplification Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Line Simplification Mode events on the map instance like this: + +```js +map.on('gm:globalline_simplificationmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Line Simplification mode operates by: +1. Selecting a line feature to simplify +2. Clicking on vertices you want to remove from the line +3. The line geometry will be updated with the selected vertices removed + +### Supported Shapes + +Line Simplification mode supports the following feature types: +- Lines +- Polygons + +## Live Line Simplification Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editLineSimplificationOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/10-edit-lasso.mdx b/docs/edit-modes/10-edit-lasso.mdx new file mode 100644 index 0000000..051c2e0 --- /dev/null +++ b/docs/edit-modes/10-edit-lasso.mdx @@ -0,0 +1,71 @@ +--- +title: "Lasso ⭐" +--- + +# Lasso Mode + +Lasso Mode allows you to select multiple features by drawing a polygon around them. The selection behavior can be configured to either select features that intersect with or are contained within the lasso polygon. + +You can handle Lasso Mode for all layers on a map like this: + +```js +map.gm.enableGlobalLassoMode(); +map.gm.disableGlobalLassoMode(); +map.gm.toggleGlobalLassoMode(); +map.gm.globalLassoModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'lasso'); +map.gm.disableMode('edit', 'lasso'); +map.gm.toggleMode('edit', 'lasso'); +map.gm.isModeEnabled('edit', 'lasso'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalLassoMode()` | - | Enables global Lasso Mode. | +| `disableGlobalLassoMode()` | - | Disables global Lasso Mode. | +| `toggleGlobalLassoMode()` | - | Toggles global Lasso Mode. | +| `globalLassoModeEnabled()` | `Boolean` | Returns `true` if global Lasso Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :-------------- | :----- | :------------------------------------------- | :-------------------| +| `gm:lasso` | `event`| Fired during lasso selection. | `map`, `features` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globallassomodetoggled` | `event` | Fired when Lasso Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Lasso Mode events on the map instance like this: + +```js +map.on('gm:globallassomodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Lasso mode operates in three selection modes: +- **Append**: Add selected features to the current selection +- **Subtract**: Remove selected features from the current selection +- **Reset**: Clear current selection and create a new selection + +The selection type can be configured to either: +- **Intersects**: Select features that intersect with the lasso polygon +- **Contains**: Select only features that are completely contained within the lasso polygon + +## Live Lasso Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editLassoOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/11-edit-delete.mdx b/docs/edit-modes/11-edit-delete.mdx new file mode 100644 index 0000000..24cc854 --- /dev/null +++ b/docs/edit-modes/11-edit-delete.mdx @@ -0,0 +1,67 @@ +--- +title: "Remove" +--- + +# Remove Mode + +Remove Mode allows you to delete features from the map by clicking on them. + +You can handle Remove Mode for all layers on a map like this: + +```js +map.gm.enableGlobalRemovalMode(); +map.gm.disableGlobalRemovalMode(); +map.gm.toggleGlobalRemovalMode(); +map.gm.globalRemovalModeEnabled(); + +// Or like this: +map.gm.enableMode('edit', 'delete'); +map.gm.disableMode('edit', 'delete'); +map.gm.toggleMode('edit', 'delete'); +map.gm.isModeEnabled('edit', 'delete'); +``` + +The following methods are available on `map.gm`: + +| Method | Returns | Description | +|:------------------------------------------------------------------| :-------- | :-----------------------------| +| `enableGlobalRemovalMode()` | - | Enables global Remove Mode. | +| `disableGlobalRemovalMode()` | - | Disables global Remove Mode. | +| `toggleGlobalRemovalMode()` | - | Toggles global Remove Mode. | +| `globalRemovalModeEnabled()` | `Boolean` | Returns `true` if global Remove Mode is enabled. `false` when disabled. | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------- | :----- | :------------------------------------------- | :-------------------------| +| `gm:remove` | `event`| Fired when a feature is removed. | `map`, `feature`, `shape` | + +The following events are available on a map instance: + +| Event | Params | Description | Output | +| :------------------------- | :------ | :--------------------------------- | :--------------------- | +| `gm:globalremovalmodetoggled` | `event` | Fired when Remove Mode is toggled. | `enabled`, `map` | + +You can also listen to specific Remove Mode events on the map instance like this: + +```js +map.on('gm:globalremovalmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Remove mode operates by: +1. Clicking on a feature to remove it from the map +2. The feature and all its associated markers will be deleted immediately +3. The removal cannot be undone + +## Live Remove Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { editDeleteOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/edit-modes/_category_.json b/docs/edit-modes/_category_.json new file mode 100644 index 0000000..bb7e88b --- /dev/null +++ b/docs/edit-modes/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Edit Modes", + "position": 101, + "collapsible": true, + "link": { + "type": "generated-index" + } +} diff --git a/docs/getting-started/_category_.json b/docs/getting-started/_category_.json deleted file mode 100644 index 6912c22..0000000 --- a/docs/getting-started/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Getting Started", - "position": 2, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important Geoman concepts." - } -} \ No newline at end of file diff --git a/docs/getting-started/free-version.md b/docs/getting-started/free-version.md deleted file mode 100644 index 36dc5fa..0000000 --- a/docs/getting-started/free-version.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -sidebar_position: 1 -title: "Free Version" ---- -## Installation - -#### Install via npm - -```bash -npm i @geoman-io/leaflet-geoman-free -``` - -#### Install Manually - -Download [`leaflet-geoman.css`](https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css) and [`leaflet-geoman.js`](https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js) and include them in your project. - -#### Include via CDN - -**CSS** - - -```html - -``` - -**JS** - -```html - -``` - -#### Include as ES6 Module - -```js -import * as L from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "@geoman-io/leaflet-geoman-free"; -import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"; -``` - -## Getting Started - -#### Init Leaflet-Geoman - -Just include `leaflet-geoman.js` right after Leaflet. It initializes itself. - -#### Exclude layers - -If you want certain layers to be ignored by Leaflet-Geoman, pass `pmIgnore: true` to -their options when creating them. - -Example: - -```js -L.marker([51.50915, -0.096112], { pmIgnore: true }).addTo(map); -``` - -Enable Leaflet-Geoman again on an ignored layer: - -```js -layer.options.pmIgnore = false; -L.PM.reInitLayer(layer); -``` - -This logic is reversed when using Opt-In (see below). - -#### Opt-In - -This section is only relevant if you **don't want Leaflet-Geoman to initialize itself**. -If you want to use Leaflet-Geoman as Opt-In, call the following function right after importing: - -```js -L.PM.setOptIn(true); -``` - -And to disable it: - -```js -L.PM.setOptIn(false); -``` - -To enable Leaflet-Geoman on a map or a layer, you need to pass `pmIgnore: false` so they are **not ignored** anymore. - -Enable on a map: - -```js -const map = L.map("map", { pmIgnore: false }); -``` - -Enable on a layer: - -```js -L.marker([51.50915, -0.096112], { pmIgnore: false }).addTo(map); -``` - -Opt-In also causes newly drawn layers to be ignored. -You can initialize them right after they have been drawn like this: - -```js -map.on("pm:create", (e) => { - e.layer.options.pmIgnore = false; - L.PM.reInitLayer(e.layer); -}); -``` diff --git a/docs/getting-started/pro-version.md b/docs/getting-started/pro-version.md deleted file mode 100644 index 459a70e..0000000 --- a/docs/getting-started/pro-version.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -sidebar_position: 2 -title: "Pro Version" ---- -## Installation - -Add the following content to `.npmrc` in your project root - -```ini -@geoman-io:registry=https://npm.geoman.io/ -//npm.geoman.io/:_authToken="" -``` - -Replace `` with your license key. -_Don't have a license key yet? [Purchase one here](https://geoman.io/#pricing)._ - -#### Install via npm - -```bash -npm install @geoman-io/leaflet-geoman-pro -``` - -#### Import in your project after leaflet - -```js -import * as L from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "@geoman-io/leaflet-geoman-pro"; -import "@geoman-io/leaflet-geoman-pro/dist/leaflet-geoman.css"; -``` - -## Getting Started - -#### Init Leaflet-Geoman - -Just include `leaflet-geoman.js` right after Leaflet. It initializes itself. - -#### Exclude layers - -If you want certain layers to be ignored by Leaflet-Geoman, pass `pmIgnore: true` to -their options when creating them. - -Example: - -```js -L.marker([51.50915, -0.096112], { pmIgnore: true }).addTo(map); -``` - -Enable Leaflet-Geoman again on an ignored layer: - -```js -layer.options.pmIgnore = false; -L.PM.reInitLayer(layer); -``` - -This logic is reversed when using Opt-In (see below). - -#### Opt-In - -This section is only relevant if you **don't want Leaflet-Geoman to initialize itself**. -If you want to use Leaflet-Geoman as Opt-In, call the following function right after importing: - -```js -L.PM.setOptIn(true); -``` - -And to disable it: - -```js -L.PM.setOptIn(false); -``` - -To enable Leaflet-Geoman on a map or a layer, you need to pass `pmIgnore: false` so they are **not ignored** anymore. - -Enable on a map: - -```js -const map = L.map("map", { pmIgnore: false }); -``` - -Enable on a layer: - -```js -L.marker([51.50915, -0.096112], { pmIgnore: false }).addTo(map); -``` - -Opt-In also causes newly drawn layers to be ignored. -You can initialize them right after they have been drawn like this: - -```js -map.on("pm:create", (e) => { - e.layer.options.pmIgnore = false; - L.PM.reInitLayer(e.layer); -}); -``` diff --git a/docs/helper-modes/00-helper-snapping.mdx b/docs/helper-modes/00-helper-snapping.mdx new file mode 100644 index 0000000..e370393 --- /dev/null +++ b/docs/helper-modes/00-helper-snapping.mdx @@ -0,0 +1,77 @@ +--- +title: "Snapping" +--- + +# Snapping Helper Mode + +The Snapping Helper Mode enables alignment of features by "snapping" them to nearby elements on the map. This mode provides tools to control, activate, or deactivate snapping for layers or shapes during editing. + +You can handle Snapping Helper Mode with the following methods: + +```js +map.gm.enableMode('helper', 'snapping'); +map.gm.disableMode('helper', 'snapping'); +map.gm.toggleMode('helper', 'snapping'); +map.gm.isModeEnabled('helper', 'snapping'); +``` + +### Events for Snapping Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:---------------------------| :-------| :------------------------------------- | :-----------------------------| +| `gm:globalsnappingmodetoggled` | `event` | Fired when Snapping Helper Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Snapping Helper Mode events on the map instance like this: + +```js +map.on('gm:globalsnappingmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Snapping works with the following shape types: +- Markers +- Circle markers +- Text markers +- Lines +- Rectangles +- Polygons +- Circles +- Guide lines + +The snapping helper: +1. Calculates distances to nearby vertices and lines +2. Snaps to the closest point within tolerance +3. Prioritizes vertex snapping over line snapping +4. Uses a default tolerance of 18 pixels[1] + +## Configuration + +```js +// Enable snapping +map.gm.markerPointer.setSnapping(true); + +// Disable snapping +map.gm.markerPointer.setSnapping(false); + +// Pause snapping temporarily +map.gm.markerPointer.pauseSnapping(); + +// Resume snapping +map.gm.markerPointer.resumeSnapping(); +``` + +## Live Snapping Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperSnappingOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/01-helper-snap_guides.mdx b/docs/helper-modes/01-helper-snap_guides.mdx new file mode 100644 index 0000000..eedc150 --- /dev/null +++ b/docs/helper-modes/01-helper-snap_guides.mdx @@ -0,0 +1,59 @@ +--- +title: "Snap Guides ⭐" +--- + +# Snap Guides Helper Mode + +The Snap Guides Helper Mode adds visual guidelines that assist in snapping features to specific angles or points during map editing. This mode is useful when precise alignment is necessary while creating or modifying shapes. + +You can enable Snap Guides Helper Mode with the following methods: + +```js +map.gm.enableMode('helper', 'snap_guides'); +map.gm.disableMode('helper', 'snap_guides'); +map.gm.toggleMode('helper', 'snap_guides'); +map.gm.isModeEnabled('helper', 'snap_guides'); +``` + +### Events for Snap Guides Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:-------------------------------| :-------| :------------------------------------- | :-----------------------------| +| `gm:globalsnappingmodetoggled` | `event` | Fired when Snap Guides Helper Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Snap Guides Helper Mode events on the map instance like this: + +```js +map.on('gm:globalsnappingmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Snap guides work with the following shape types: +- Lines +- Polygons +- Rectangles +- Circles +- Multi-polygons + +The Snap Guides helper: +1. Calculates and displays guidelines at specific angles or along existing features. +2. Helps users to snap to key points like intersections or perpendicular lines. +3. Snaps features to the closest guide point, with priority given to perpendicular or aligned snapping guides. +4. Custom snapping tolerance can be configured for guides. + + +## Live Snap Guides Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperSnapGuidesOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/02-helper-measurements.mdx b/docs/helper-modes/02-helper-measurements.mdx new file mode 100644 index 0000000..e39d403 --- /dev/null +++ b/docs/helper-modes/02-helper-measurements.mdx @@ -0,0 +1,57 @@ +--- +title: "Measurements ⭐" +--- + +# Measurements Helper Mode + +The Measurements Helper Mode provides tools to display live measurements such as distance, area, and perimeter for various shapes during map editing. This mode works with different shape types to dynamically calculate and display measurements as users draw or modify features. + +You can enable Measurements Helper Mode with the following method: + +```js +map.gm.enableMode('helper', 'measurements'); +map.gm.disableMode('helper', 'measurements'); +map.gm.toggleMode('helper', 'measurements'); +map.gm.isModeEnabled('helper', 'measurements'); +``` + +### Events for Measurements Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:----------------------------------| :-------| :------------------------------------- | :-------------------------| +| `gm:globalmeasurementmodetoggled` | `event` | Fired when Measurements Helper Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Measurements Helper Mode events on the map instance like this: + +```js +map.on('gm:globalmeasurementmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Measurements can be calculated for the following shape types: +- Markers +- Lines +- Rectangles +- Polygons +- Circles + +The helper dynamically: +1. Calculates distances, areas, and perimeters for shapes. +2. Updates these measurements in real-time as the shape is drawn or modified. +3. Displays the information in an interactive popup. + +## Live Measurements Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperMeasurementsOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/03-helper-pin.mdx b/docs/helper-modes/03-helper-pin.mdx new file mode 100644 index 0000000..122991b --- /dev/null +++ b/docs/helper-modes/03-helper-pin.mdx @@ -0,0 +1,49 @@ +--- +title: "Pin ⭐" +--- + +# Pin Helper Mode + +The Pin Helper Mode allows you to "pin" markers or vertices together, enabling synchronized movement of all connected points when any one of them is dragged. This mode is useful for maintaining alignment across features that share the same coordinates. + +You can enable Pin Helper Mode with the following methods: + +```js +map.gm.enableMode('helper', 'pin'); +map.gm.disableMode('helper', 'pin'); +map.gm.toggleMode('helper', 'pin'); +map.gm.isModeEnabled('helper', 'pin'); +``` + +### Events for Pin Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:---------------------------| :-------| :------------------------------------- | :-----------------------------| +| `gm:globalpinmodetoggled` | `event` | Fired when Pin Helper Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Pin Helper Mode events on the map instance like this: + +```js +map.on('gm:globalpinmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +When Pin Mode is enabled: +1. **Synchronized Movement**: Dragging a marker or vertex will move all other markers/vertices with the same coordinates (`latLng`) in sync. +2. **Automatic Pinning**: This functionality is applied to any markers or vertices at identical coordinates, automatically linking them. + +## Live Pinning Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperPinOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/04-helper-auto_trace.mdx b/docs/helper-modes/04-helper-auto_trace.mdx new file mode 100644 index 0000000..0f972b8 --- /dev/null +++ b/docs/helper-modes/04-helper-auto_trace.mdx @@ -0,0 +1,55 @@ +--- +title: "Auto Trace ⭐" +--- + +# Auto Trace Helper Mode + +The Auto Trace Helper Mode assists users in drawing and connecting shapes by automatically tracing the shortest path between selected points. This mode can be applied to create or complete shapes like lines and polygons by tracing along existing paths. + +You can enable Auto Trace Helper Mode with the following method: + +```js +map.gm.enableMode('helper', 'auto_trace'); +map.gm.disableMode('helper', 'auto_trace'); +map.gm.toggleMode('helper', 'auto_trace'); +map.gm.isModeEnabled('helper', 'auto_trace'); +``` + +### Events for Auto Trace Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:------------------------------| :-------| :------------------------------------- | :-----------------------| +| `gm:globalauto_tracemodetoggled` | `event` | Fired when Auto Trace Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Auto Trace Helper Mode events on the map instance like this: + +```js +map.on('gm:globalauto_tracemodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +Auto tracing works with the following shape types: +- Lines +- Polygons +- Rectangles +- Circles + +The Auto Trace Helper: +1. Calculates the shortest path between two specified points. +2. Adds intermediate points along the traced path if needed to maintain shape accuracy. + +## Live Auto Trace Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperAutoTraceOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/05-helper-zoom_to_features.mdx b/docs/helper-modes/05-helper-zoom_to_features.mdx new file mode 100644 index 0000000..00c608a --- /dev/null +++ b/docs/helper-modes/05-helper-zoom_to_features.mdx @@ -0,0 +1,49 @@ +--- +title: "Zoom to Features" +--- + +# Zoom to Features Helper Mode + +The Zoom to Features Helper Mode allows users to zoom the map to fit all displayed features within the viewport, making it easier to locate and view all active map features at once. + +You can enable Zoom to Features Helper Mode with the following method: + +```js +map.gm.enableMode('helper', 'zoom_to_features'); +map.gm.disableMode('helper', 'zoom_to_features'); +map.gm.toggleMode('helper', 'zoom_to_features'); +map.gm.isModeEnabled('helper', 'zoom_to_features'); +``` + +### Events for Zoom to Features Helper Mode + +The following events are available on a map instance: + +| Event | Params | Description | Output | +|:---------------------------------------| :-------| :------------------------------------------- | :-----------------| +| `gm:globalzoom_to_featuresmodetoggled` | `event` | Fired when Zoom to Features Mode is toggled. | `enabled`, `map` | + +### Example Usage + +You can listen for specific Zoom to Features Helper Mode events on the map instance like this: + +```js +map.on('gm:globalzoom_to_featuresmodetoggled', (event) => { + console.log(event); +}); +``` + +## Behavior + +When Zoom to Features Mode is activated: +1. **Map Adjustment**: Automatically calculates the bounding box to encompass all visible features. +2. **Padding**: Adds a 20-pixel padding around the features to ensure they fit well within the view. + +## Live Zoom to Features Example +import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap'; +import { helperZoomToFeaturesOptions } from '../../src/components/examples/mode-options'; +import features from '../../src/components/examples/geojson/basic-edit.json'; + + diff --git a/docs/helper-modes/_category_.json b/docs/helper-modes/_category_.json new file mode 100644 index 0000000..e643f89 --- /dev/null +++ b/docs/helper-modes/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Helper Modes", + "position": 103, + "collapsible": true, + "link": { + "type": "generated-index" + } +} diff --git a/docs/index.md b/docs/index.md index 4750f7c..a54b068 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,29 +1,19 @@ --- -sidebar_position: 1 +sidebar_position: 0 title: "Introduction" -description: "Explore Leaflet-Geoman documentation: your guide to mastering this powerful geo-editing tool. Dive into tutorials, code snippets, API references and more." +description: "Explore MapLibre-Geoman documentation: your guide to mastering this powerful geo-editing tool. Dive into tutorials, code snippets, API references and more." slug: "/" --- # Documentation -### For Leaflet-Geoman (Free & ⭐ Pro) +### For MapLibre-Geoman (Free & ⭐ Pro) -A Leaflet Plugin For Creating And Editing Geometry Layers +A MapLibre Plugin For Creating And Editing Geometry Layers Draw, Edit, Drag, Cut, Rotate, Split, Scale, Measure, Snap and Pin Layers. -![](/img/geoman-docs.png) +![](/img/geoman-maplibre-demo.png) Supports Markers, CircleMarkers, Polylines, Polygons, Circles, Rectangles, ImageOverlays, LayerGroups, GeoJSON, MultiLineStrings and MultiPolygons Features _not_ available in the free version are marked with a star (⭐). - -**Get Started** - -- [🆓 Install Free Version](/docs/getting-started/free-version) -- [⭐ Install Pro Version](/docs/getting-started/pro-version) - -**Configuration and Setup** - -- Check out the different [configuration options](/docs/options/index) -- Explore the many different [editing modes](/docs/modes/index) \ No newline at end of file diff --git a/docs/layer-groups.md b/docs/layer-groups.md deleted file mode 100644 index d85a14b..0000000 --- a/docs/layer-groups.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 7 -title: "Layer Groups" ---- -### LayerGroup - -Leaflet-Geoman can only work correct with `L.FeatureGroup` and `L.GeoJSON` (the extended versions of L.LayerGroup) we need the events `layeradd` and `layerremove`. - -The following methods are available for LayerGroups on `layergroup.pm`: - -| Method | Returns | Description | -| :------------------------------------------------------------------ | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| enable(`options`) | - | Enable all layers in the LayerGroup. | -| disable() | - | Disable all layers in the LayerGroup. | -| enabled() | `Boolean` | Returns if minimum one layer is enabled. | -| toggleEdit(`options`) | - | Toggle enable / disable on all layers. | -| getLayers(`deep=false`,`filterGeoman=true`, `filterGroupsOut=true`) | `Array` | Returns the layers of the LayerGroup. `deep=true` return also the children of LayerGroup children. `filterGeoman=true` filter out layers that don't have Leaflet-Geoman or temporary stuff. `filterGroupsOut=true` does not return the LayerGroup layers self. | -| setOptions(`options`) | - | Apply Leaflet-Geoman options to all children. | -| getOptions() | `Object` | Returns the options of the LayerGroup. | -| dragging() | - | Returns if currently a layer in the LayerGroup is dragging. | - -
-Workaround to work with L.LayerGroup (Click to expand) - -We are adding the same code to L.LayerGroup as in [L.FeatureGroup](https://github.com/Leaflet/Leaflet/blob/master/src/layer/FeatureGroup.js#L28) - -```js -L.LayerGroup.prototype.addLayerOrg = L.LayerGroup.prototype.addLayer; -L.LayerGroup.prototype.addLayer = function (layer) { - layer.addEventParent(this); - this.addLayerOrg(layer); - return this.fire("layeradd", { layer: layer }); -}; - -L.LayerGroup.prototype.removeLayerOrg = L.LayerGroup.prototype.removeLayer; -L.LayerGroup.prototype.removeLayer = function (layer) { - layer.removeEventParent(this); - this.removeLayerOrg(layer); - return this.fire("layerremove", { layer: layer }); -}; -``` - -
diff --git a/docs/modes/0.index.md b/docs/modes/0.index.md deleted file mode 100644 index 84acce0..0000000 --- a/docs/modes/0.index.md +++ /dev/null @@ -1,5 +0,0 @@ -# Modes - -Leaflet-Geoman has different modes. -Only one mode can be active at a time. Enable them to let your users create and manipulate layers on the map. -You can enable them programatically, via the provided toolbar or by building your own toolbar. diff --git a/docs/modes/1.draw-mode.md b/docs/modes/1.draw-mode.md deleted file mode 100644 index 08758f5..0000000 --- a/docs/modes/1.draw-mode.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Draw Mode ---- - -### Draw Mode - -Use Draw Mode on a map like this: - -```js -// enable polygon Draw Mode -map.pm.enableDraw("Polygon", { - snappable: true, - snapDistance: 20, -}); - -// disable Draw Mode -map.pm.disableDraw(); -``` - -Currently available shapes are `Marker`, `CircleMarker`, `Circle`, `Line`, `Rectangle`, `Polygon`, `Text`, `Cut`, `CutCircle`⭐ and `Split`⭐. - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :------------------------------------------- | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| enableDraw(`shape`,`options`) | - | Enable Draw Mode with the passed shape. The `options` are optional. | -| disableDraw() | - | Disable Draw Mode. | -| Draw.getShapes() | `Array` | Array of available shapes. | -| Draw.getActiveShape() | `String` | Returns the active shape. | -| globalDrawModeEnabled() | `Boolean` | Returns `true` if global Draw Mode is enabled. `false` when disabled. | -| setPathOptions(`options`, `optionsModifier`) | - | Customize the style of the drawn layer. Only for L.Path layers. Shapes can be excluded with a `ignoreShapes` array or merged with the current style with `merge: true` in `optionsModifier` [Details](#customize-style). | -| setGlobalOptions(`options`) | - | Set `globalOptions` and apply them. | -| applyGlobalOptions() | - | Apply the current `globalOptions` to all existing layers. | -| getGlobalOptions() | `Object` | Returns the `globalOptions`. | -| getGeomanLayers(`Boolean`) | `Array` | Returns all Leaflet-Geoman layers on the map as array. Pass `true` to get a L.FeatureGroup. | -| getGeomanDrawLayers(`Boolean`) | `Array` | Returns all drawn Leaflet-Geoman layers on the map as array. Pass `true` to get a L.FeatureGroup. | -| Draw.`shape`.setOptions(`options`) | - | Applies the options to the drawing shape and calls `setStyle`. `map.pm.Draw.Line.setOptions(options)`. | -| Draw.`shape`.setStyle(`options`) | - | Applies the styles (`templineStyle`, `hintlineStyle`, `pathOptions`, `markerStyle`) to the drawing layer. `map.pm.Draw.Line.setStyle(options)`. | - -See the available options in the table below. - -| Option | Default | Description | -|:-----------------------|:------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| snappable | `true` | Enable snapping to other layers vertices for precision drawing. Can be disabled by holding the `ALT` key. | -| snapDistance | `20` | The distance to another vertex when a snap should happen. | -| snapMiddle | `false` | Allow snapping in the middle of two vertices (middleMarker). | -| snapSegment | `true` | Allow snapping between two vertices. | -| requireSnapToFinish | `false` | Require the last point of a shape to be snapped. | -| tooltips | `true` | Show helpful tooltips for your user. | -| allowSelfIntersection | `true` | Allow self intersections. | -| templineStyle | `{ color: '#3388ff' },` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the lines between drawn vertices/markers. | -| hintlineStyle | `{ color: '#3388ff', dashArray: [5, 5] }` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the helper line between last drawn vertex and the cursor. | -| pathOptions | `null` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the drawn layer (Only for L.Path layers). | -| markerStyle | `{ draggable: true }` | [Leaflet marker options](https://leafletjs.com/reference.html#marker-icon) (only for drawing markers). | -| cursorMarker | `true` | Show a marker at the cursor. | -| finishOn | `null` | Leaflet layer event to finish the drawn shape, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). `snap` is also an option for Line, Polygon and Rectangle. | -| hideMiddleMarkers | `false` | Hide the middle Markers in Edit Mode from Polyline and Polygon. | -| minRadiusCircle | `null` | Set the min radius of a `Circle`. | -| maxRadiusCircle | `null` | Set the max radius of a `Circle`. | -| minRadiusCircleMarker | `null` | Set the min radius of a `CircleMarker`. | -| maxRadiusCircleMarker | `null` | Set the max radius of a `CircleMarker`. | -| ~~editable~~ | `false` | **Deprecated** use `resizeableCircleMarker` instead. | -| resizableCircle | `true` | Enables radius editing while drawing a Circle. | -| resizeableCircleMarker | `false` | Enables radius editing while drawing a CircleMarker. | -| markerEditable | `true` | Markers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them). | -| continueDrawing | `false` / `true` | Draw Mode stays enabled after finishing a layer to immediately draw the next layer. Defaults to `true` for Markers and CircleMarkers and `false` for all other layers. | -| rectangleAngle | `0` | Rectangle can drawn with a rotation angle 0-360 degrees | -| layersToCut | `[]` | Cut-Mode: Only the passed layers can be cut. Cutted layers are removed from the Array until no layers are left anymore and cutting is working on all layers again. | -| textOptions | `{}` | Text Layer options. Look into [textOptions](#text-layer-drawing). | -| closedPolygonEdge | `false` | Closes the Polygon while drawing ⭐. | -| closedPolygonFill | `false` | Shows the Polygon fill while drawing ⭐. | -| autoTracing | `false` | Enables auto tracing while drawing ⭐. | -| allowCircleCut | `true` | Allow Cutting of a Circle ⭐. | - -This options can only set over `map.pm.setGlobalOptions({})`: - -| Option | Default | Description | -| :--------- | :------ | :--------------------------------------------------------- | -| layerGroup | `map` | Add the created layers to a layergroup instead to the map. | - -You can listen to map events to hook into the drawing procedure like this: - -```js -map.on("pm:drawstart", (e) => { - console.log(e); -}); -``` - -Here's a list of map events you can listen to: - -| Event | Params | Description | Output | -| :----------------------- | :----- | :-------------------------------------------------------------------------------------- | :------------------------------ | -| pm:globaldrawmodetoggled | `e` | Fired when Drawing Mode is toggled. | `enabled`, test, `shape`, `map` | -| pm:drawstart | `e` | Called when Draw Mode is enabled. Payload includes the shape type and working layer. | `shape`, `workingLayer` | -| pm:drawend | `e` | Called when Draw Mode is disabled. Payload includes the shape type. | `shape` | -| pm:create | `e` | Called when a shape is drawn/finished. Payload includes shape type and the drawn layer. | `shape`, `layer` | - -There are also several events for layers during draw. Register an event like this: - -```js -// listen to vertexes being added to currently drawn layer (called workingLayer) -map.on("pm:drawstart", ({ workingLayer }) => { - workingLayer.on("pm:vertexadded", (e) => { - console.log(e); - }); -}); -``` - -Here's a list of layer events you can listen to: - -| Event | Params | Description | Output | -|:----------------|:-------|:----------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------| -| pm:vertexadded | `e` | Called when a new vertex is added. Payload includes the new vertex, it's marker, index, working layer and shape type. | `shape`, `workingLayer`, `marker`, `latlng` | -| pm:snapdrag | `e` | Fired during a marker move/drag. Payload includes info about involved layers and snapping calculation. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:snap | `e` | Fired when a vertex is snapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:unsnap | `e` | Fired when a vertex is unsnapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:centerplaced | `e` | Called when the center of a circle is placed/moved. | `shape`, `workingLayer`, `latlng` | -| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` | -| pm:intersect | `e` | When `allowSelfIntersection: false`, this event is fired as soon as a self-intersection is detected. | `layer`, `intersection`, `shape` | -For making the snapping to other layers selective, you can add the "snapIgnore" option to your layers to disable the snapping to them during drawing. - -```js -//This layer will be ignored by the snapping engine during drawing -L.geoJSON(data, { - snapIgnore: true, -}); -``` diff --git a/docs/modes/10.difference-mode.md b/docs/modes/10.difference-mode.md deleted file mode 100644 index 4e5411b..0000000 --- a/docs/modes/10.difference-mode.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Difference Mode ⭐ ---- - -### Difference Mode ⭐ - -![Difference Feature](https://geoman-static.onrender.com/assets/difference.gif) - -You can enable Difference Mode for all layers on a map like this: - -```js -map.pm.enableGlobalDifferenceMode(); -``` - -The difference mode in Leaflet-Geoman allows users to subtract one leaflet layer from another. This mode can be enabled programmatically or through the provided toolbar. It supports subtracting polygons (or multipolygons). The difference mode simplifies separating geometries. The difference mode works by selecting two layers to differentiate, then the difference mode will create a new layer that represents the difference between the two selected layers. The new layer will be added to the map and the two selected layers will be removed from the map. - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :----------------------- | :-------- | :--------------------------------------------------------------------- | -| enableGlobalDifferenceMode() | - | Enables global Difference Mode. | -| disableGlobalDifferenceMode() | - | Disables global Difference Mode. | -| toggleGlobalDifferenceMode() | - | Toggles global Difference Mode. | -| globalDifferenceModeEnabled() | `Boolean` | Returns `true` if global Difference Mode is enabled. `false` when disabled. | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------------------ | :----- | :---------------------------------------- | :----------------------------------------------------- | -| pm:globaldifferencemodetoggled | `e` | Fired when Scale Mode is toggled. | `enabled`, `map` | -| pm:difference | `e` | Fired when a new layer is created by difference of two other layers. | `resultLayer`, `subtractedLayers` | \ No newline at end of file diff --git a/docs/modes/2.edit-mode.md b/docs/modes/2.edit-mode.md deleted file mode 100644 index 46136fc..0000000 --- a/docs/modes/2.edit-mode.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Edit Mode ---- - -### Edit Mode - -You can enable Edit Mode for all layers on a map like this: - -```js -// enable global Edit Mode -map.pm.enableGlobalEditMode(options); -``` - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :------------------------------ | :-------- | :-------------------------------------------------------------------- | -| enableGlobalEditMode(`options`) | - | Enables global Edit Mode. | -| disableGlobalEditMode() | - | Disables global Edit Mode. | -| toggleGlobalEditMode(`options`) | - | Toggles global Edit Mode. | -| globalEditModeEnabled() | `Boolean` | Returns `true` if global Edit Mode is enabled. `false` when disabled. | - -Enable Edit Mode only for one layer: - -```js -// enable Edit Mode -layer.pm.enable({ - allowSelfIntersection: false, -}); -``` - -The following methods are available for layers under `layer.pm`: - -| Method | Returns | Description | -| :-------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------- | -| enable(`options`) | - | Enables Edit Mode. The passed options are preserved, even when the mode is enabled via the Toolbar. `options` is optional. | -| disable() | - | Disables Edit Mode. | -| toggleEdit(`options`) | - | Toggles Edit Mode. Passed options are preserved. `options` is optional. | -| enabled() | `Boolean` | Returns `true` if Edit Mode is enabled. `false` when disabled. | -| hasSelfIntersection() | `Boolean` | Returns `true` if `Line` or `Polygon` has a self intersection. | -| remove() | - | Removes the layer with the same checks as GlobalRemovalMode. | -| getShape() | `String` | Returns the shape of the layer. | -| setOptions(`options`) | - | Set the options on the layer. | -| getOptions() | `Object` | Returns the options of the layer. | - -#### Edit Mode Options - -See the available options in the table below. - -| Option | Default | Description | -| :----------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| snappable | `true` | Enable snapping to other layers vertices for precision drawing. Can be disabled by holding the `ALT` key. | -| snapDistance | `20` | The distance to another vertex when a snap should happen. | -| allowSelfIntersection | `true` | Allow/Disallow self-intersections on Polygons and Polylines. | -| allowSelfIntersectionEdit | `false` | Allow/Disallow to change vertices they are connected to a intersecting line. Only working if allowSelfIntersection is `true` and the layer is already self-intersecting while enabling Edit Mode. | -| preventMarkerRemoval | `false` | Disable the removal of markers/vertexes via right click. | -| removeLayerBelowMinVertexCount | `true` | If `true`, vertex removal that cause a layer to fall below their minimum required vertices will remove the entire layer. If `false`, these vertices can't be removed. Minimum vertices are 2 for Lines and 3 for Polygons. | -| syncLayersOnDrag | `false` | Defines which layers should dragged with this layer together. `true` syncs all layers in the same LayerGroup(s) or you pass an `Array` of layers to sync. | -| allowEditing | `true` | Edit-Mode for the layer can disabled (`pm.enable()`). | -| allowRemoval | `true` | Removing can be disabled for the layer. | -| allowCutting | `true` | Layer can be prevented from cutting. | -| allowRotation | `true` | Layer can be prevented from rotation. | -| draggable | `true` | Dragging can be disabled for the layer. | -| addVertexOn | `click` | Leaflet layer event to add a vertex to a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). | -| addVertexValidation | `undefined` | A function for validation if a vertex (of a Line / Polygon) is allowed to add. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | -| removeVertexOn | `contextmenu` | Leaflet layer event to remove a vertex from a Line or Polygon, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). | -| removeVertexValidation | `undefined` | A function for validation if a vertex (of a Line / Polygon) is allowed to remove. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | -| moveVertexValidation | `undefined` | A function for validation if a vertex / helper-marker is allowed to move / drag. It passes a object with `[layer, marker, event}`. For example to check if the layer has a certain property or if the `Ctrl` key is pressed. | -| limitMarkersToCount | `-1` | Shows only `n` markers closest to the cursor. Use `-1` for no limit. | -| limitMarkersToZoom | `-1` | Shows markers when under the given zoom level. ⭐ | -| limitMarkersToViewport | `false` | Shows only markers in the viewport. ⭐ | -| limitMarkersToClick | `false` | Shows markers only after the layer was clicked. ⭐ | -| pinning | `false` | Pin shared vertices/markers together during edit [Details](#pinning-⭐). ⭐ | -| allowPinning | `true` | Layer can be prevented from pinning.⭐ | -| allowScale | `true` | Layer can be prevented from scaling.⭐ | -| centerScaling | `true` | Scale origin is the center, else it is the opposite corner. If `false` Alt-Key can be used. [Scale Mode](#scale-mode-). ⭐ | -| uniformScaling | `true` | Width and height are scaled with the same ratio. If `false` Shift-Key can be used. [Scale Mode](#scale-mode-). ⭐ | -| allowAutoTracing | `true` | Layer can be prevented from auto tracing.⭐ | -| addVertexOnClick | `false` | Add Vertices while clicking on the line of Polyline or Polygon⭐ | - -You can listen to events related to editing on events like this: - -```js -// listen to when a layer is changed in Edit Mode -layer.on("pm:edit", (e) => { - console.log(e); -}); -``` - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :----------------- | :----- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ | -| pm:edit | `e` | Fired when a layer is edited. | `layer`, `shape` | -| pm:update | `e` | Fired when Edit Mode is disabled and a layer is edited and its coordinates have changed. | `layer`, `shape` | -| pm:enable | `e` | Fired when Edit Mode on a layer is enabled. | `layer`, `shape` | -| pm:disable | `e` | Fired when Edit Mode on a layer is disabled. | `layer`, `shape` | -| pm:vertexadded | `e` | Fired when a vertex is added. | `layer`, `indexPath`, `latlng`, `marker`, `shape` | -| pm:vertexremoved | `e` | Fired when a vertex is removed. | `layer`, `indexPath`, `marker`, `shape` | -| pm:vertexclick | `e` | Fired when a vertex is clicked. | `layer`, `indexPath`, `markerEvent`, `shape` | -| pm:markerdragstart | `e` | Fired when dragging of a marker which corresponds to a vertex starts. | `layer`, `indexPath`, `markerEvent`, `shape` | -| pm:markerdrag | `e` | Fired when dragging a vertex-marker. | `layer`, `indexPath`, `markerEvent`, `shape` | -| pm:markerdragend | `e` | Fired when dragging of a vertex-marker ends. | `layer`, `indexPath`, `markerEvent`, `shape`, `intersectionReset` | -| pm:layerreset | `e` | Fired when coords of a layer are reset. E.g. by self-intersection. | `layer`, `indexPath`, `markerEvent`, `shape` | -| pm:snapdrag | `e` | Fired during a marker move/drag. Payload includes info about involved layers and snapping calculation. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:snap | `e` | Fired when a vertex-marker is snapped to another vertex. Also fired on the marker itself. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:unsnap | `e` | Fired when a vertex-marker is unsnapped from a vertex. Also fired on the marker itself. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` | -| pm:intersect | `e` | When `allowSelfIntersection: false`, this event is fired as soon as a self-intersection is detected. | `layer`, `intersection`, `shape` | -| pm:centerplaced | `e` | Fired when the center of a circle is moved. | `layer`, `latlng`, `shape` | -| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :----------------------- | :----- | :------------------------------- | :--------------- | -| pm:globaleditmodetoggled | `e` | Fired when Edit Mode is toggled. | `enabled`, `map` | - -You can also listen to specific Edit Mode events on the map instance like this: - -```js -map.on("pm:globaleditmodetoggled", (e) => { - console.log(e); -}); -``` diff --git a/docs/modes/3.drag-mode.md b/docs/modes/3.drag-mode.md deleted file mode 100644 index 42e6172..0000000 --- a/docs/modes/3.drag-mode.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Drag Mode ---- - -### Drag Mode - -You can enable Drag Mode for all layers on a map like this: - -```js -// enable Drag Mode like this: -map.pm.enableGlobalDragMode(); -``` - -Or you enable dragging for a specific layer: - -```js -layer.pm.enableLayerDrag(); -``` - -The following methods are available on `layer.pm`: - -| Method | Returns | Description | -| :----------------- | :-------- | :--------------------------------------------- | -| enableLayerDrag() | - | Enables dragging for the layer. | -| disableLayerDrag() | - | Disables dragging for the layer. | -| layerDragEnabled() | `Boolean` | Returns if Drag Mode is enabled for the layer. | -| dragging() | `Boolean` | Returns if the layer is currently dragging. | - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :---------------------- | :-------- | :-------------------------------------------------------------------- | -| enableGlobalDragMode() | - | Enables global Drag Mode. | -| disableGlobalDragMode() | - | Disables global Drag Mode. | -| toggleGlobalDragMode() | - | Toggles global Drag Mode. | -| globalDragModeEnabled() | `Boolean` | Returns `true` if global Drag Mode is enabled. `false` when disabled. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :------------- | :----- | :------------------------------------------- | :------------------------------------------------------------------------ | -| pm:dragstart | `e` | Fired when a layer starts being dragged. | `layer`, `shape` | -| pm:drag | `e` | Fired when a layer is dragged. | `layer`, `containerPoint`,`latlng`, `layerPoint`,`originalEvent`, `shape` | -| pm:dragend | `e` | Fired when a layer stops being dragged. | `layer`, `shape` | -| pm:dragenable | `e` | Fired when Drag Mode on a layer is enabled. | `layer`, `shape` | -| pm:dragdisable | `e` | Fired when Drag Mode on a layer is disabled. | `layer`, `shape` | -| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :----------------------- | :----- | :------------------------------- | :--------------- | -| pm:globaldragmodetoggled | `e` | Fired when Drag Mode is toggled. | `enabled`, `map` | - -You can also listen to specific Drag Mode events on the map instance like this: - -```js -map.on("pm:globaldragmodetoggled", (e) => { - console.log(e); -}); -``` diff --git a/docs/modes/4.removal-mode.md b/docs/modes/4.removal-mode.md deleted file mode 100644 index 44df4a7..0000000 --- a/docs/modes/4.removal-mode.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Removal Mode ---- - -### Removal Mode - -You can enable Removal Mode for all layers on a map like this: - -```js -// enable removal mode like this: -map.pm.enableGlobalRemovalMode(); -``` - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :------------------------- | :-------- | :----------------------------------------------------------------------- | -| enableGlobalRemovalMode() | - | Enables global removal mode. | -| disableGlobalRemovalMode() | - | Disables global removal mode. | -| toggleGlobalRemovalMode() | - | Toggles global removal mode. | -| globalRemovalModeEnabled() | `Boolean` | Returns `true` if global removal mode is enabled. `false` when disabled. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :-------- | :----- | :--------------------------------------------- | :--------------- | -| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :-------------------------- | :----- | :------------------------------------------------------- | :--------------- | -| pm:globalremovalmodetoggled | `e` | Fired when Removal Mode is toggled | `enabled`, `map` | -| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` | -| layerremove | `e` | Standard Leaflet event. Fired when any layer is removed. | `layer` | - -You can also listen to specific removal mode events on the map instance like this: - -```js -map.on("pm:globalremovalmodetoggled", (e) => { - console.log(e); -}); -``` diff --git a/docs/modes/5.cut-mode.md b/docs/modes/5.cut-mode.md deleted file mode 100644 index e7bf33f..0000000 --- a/docs/modes/5.cut-mode.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Cut Mode ---- - -### Cut Mode - -![cut polygon](https://geoman-static.onrender.com/assets/leaflet-pm-cut-demo.gif) - -Enables drawing for the shape "Cut" to draw a polygon that gets subtracted from all underlying polygons. This way you can create holes, cut polygons or polylines in half or remove parts of it. - -Important: the cutted layer will be replaced, not updated. Listen to the `pm:cut` event to update your layer references in your code. The `pm:cut` event will provide you with the original layer and returns the resulting layer(s) that is/are added to the map as a Polygon / MultiPolygon or Polyline / MultiPolyline. - -```js -// enable cutting mode -map.pm.enableGlobalCutMode({ - allowSelfIntersection: false, -}); -``` - -Available options are the same as in [Draw Mode](/modes/draw-mode). -If the option `layersToCut: [layer1, layer2]` is passed, only this certain layers will be cutted. - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :----------------------------- | :-------- | :-------------------------------------------------------------------------------------------- | -| enableGlobalCutMode(`options`) | - | Enable Cut Mode. [View Options](/docs/modes/edit-mode#edit-mode-options) (same as Edit Mode) | -| disableGlobalCutMode() | - | Disable Cut Mode. | -| toggleGlobalCutMode(`options`) | - | Toggle Cut. [View Options](/docs/modes/edit-mode#edit-mode-options) (same as Edit Mode) Mode. | -| globalCutModeEnabled() | `Boolean` | Returns `true` if global cut mode is enabled. `false` when disabled. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :------ | :----- | :---------------------------------- | :-------------------------------- | -| pm:cut | `e` | Fired when the layer being cut. | `shape`, `layer`, `originalLayer` | -| pm:edit | `e` | Fired when a layer is edited / cut. | `layer`, `shape` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :---------------------- | :----- | :--------------------------------- | :-------------------------------- | -| pm:globalcutmodetoggled | `e` | Fired when Cut Mode is toggled. | `enabled`, `map` | -| pm:cut | `e` | Fired when any layer is being cut. | `shape`, `layer`, `originalLayer` | - -### Cutting Circles ⭐ - -By default, cutting mode works on Polygons and similar shapes (Rectangles, MultiPolygons, etc). - -If you want to allow your users to cut circles, pass `allowCircleCut: true` to the options of the global cut mode: - -```js -// enable cutting mode with a circle -map.pm.enableGlobalCutMode({ - allowCircleCut: true, -}); -``` - -### Cut as a Circle ⭐ - -By Default, the cutting shape is a polygon. You can change this to cut as a circle. - -You can also enable Cut-Mode with a Circle like this: - -```js -map.pm.enableDraw("CutCircle"); -``` - -If you use the toolbar, you can change the toolbar's cut-button behavior to use a circle instead of a polygon: - -```js -map.pm.setGlobalOptions({ cutAsCircle: true }); -``` diff --git a/docs/modes/6.rotation-mode.md b/docs/modes/6.rotation-mode.md deleted file mode 100644 index 986595b..0000000 --- a/docs/modes/6.rotation-mode.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Rotation Mode ---- - -### Rotation Mode - -![Rotation Feature](https://geoman-static.onrender.com/assets/rotate.gif) - -The rotation is clockwise. It starts in the North with 0° and goes over East (90°) and South (180°) to West (270°). -The rotation center is the center (`layer.getCenter()`) of a Polygon with the LatLngs of the layer. - -**Rotation of Rectangles:** - -If a rotated rectangle is created programmatically, it is important to set the initial angle with `setInitAngle(degrees)`. - -```js -const rect = L.rectangle(coords).addTo(map); // the Leaflet constructor always creates a non-rotated rectangle -rect.setLatLngs(coords); // setting the rotated coordinates -rect.pm.setInitAngle(angle); -``` - -You can enable Rotate Mode for all layers on a map like this: - -```js -map.pm.enableGlobalRotateMode(); -``` - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :------------------------ | :-------- | :---------------------------------------------------------------------- | -| enableGlobalRotateMode() | - | Enables global Rotate Mode. | -| disableGlobalRotateMode() | - | Disables global Rotate Mode. | -| toggleGlobalRotateMode() | - | Toggles global Rotate Mode. | -| globalRotateModeEnabled() | `Boolean` | Returns `true` if global Rotate Mode is enabled. `false` when disabled. | - -The following methods are available for layers under `layer.pm`: - -| Method | Returns | Description | -|:------------------------------|:----------|:----------------------------------------------------------------------------| -| enableRotate() | - | Enables Rotate Mode on the layer. | -| disableRotate() | - | Disables Rotate Mode on the layer. | -| rotateEnabled() | `Boolean` | Returns if Rotate Mode is enabled for the layer. | -| rotateLayer(`degrees`) | - | Rotates the layer by `x` degrees. | -| rotateLayerToAngle(`degrees`) | - | Rotates the layer to `x` degrees. | -| getAngle() | `Degrees` | Returns the angle of the layer in degrees. | -| setInitAngle(`degrees`) | - | Set the initial angle of the layer in degrees. | -| setRotationCenter(`center`) | - | Change the center of rotation. Pass null to use the shape's default center. | -| getRotationCenter() | `LatLng` | Returns the center of rotation. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :--------------- | :----- | :------------------------------------------- | :----------------------------------------------------------------------------------- | -| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` | -| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` | -| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` | -| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` | -| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` | -| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------------------- | :----- | :------------------------------------------- | :----------------------------------------------------------------------------------- | -| pm:globalrotatemodetoggled | `e` | Fired when Rotate Mode is toggled. | `enabled`, `map` | -| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` | -| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` | -| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` | -| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` | -| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` | diff --git a/docs/modes/7.split-mode.md b/docs/modes/7.split-mode.md deleted file mode 100644 index dd4dbd5..0000000 --- a/docs/modes/7.split-mode.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Split Mode ⭐ ---- - -### Split Mode ⭐ - -![Split Mode Demo](https://geoman-static.onrender.com/assets/split.gif) - -Enable drawing for the shape "Split" to draw a line that splits all underlying Polygons and Polylines. - -Important: the splitted layer will be replaced, not updated. Listen to the `pm:split` event to update your layer references in your code. The `pm:split` event will provide you with the original layer and returns the resulting layer(s) that is/are added to the map as a Polygon / MultiPolygon or Polyline / MultiPolyline. - -```js -// enable cutting mode -map.pm.enableGlobalSplitMode({ - allowSelfIntersection: false, -}); -``` - -Available options are the same as in [Draw Mode](#draw-mode) and in table below: - -| Option | Default | Description | -| :-------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| splitOnlyMarkedLayers | `false` | If it is set to `false` layers can be excluded with the option `splitMark: false`. Set it to `true` to enable splitting only for the layers with the option `splitMark: true`. | - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :------------------------------- | :-------- | :--------------------------------------------------------------------------------------------- | -| enableGlobalSplitMode(`options`) | - | Enable Split Mode. [View Options](/docs/modes/edit-mode#edit-mode-options) (same as Edit Mode) | -| disableGlobalSplitMode() | - | Disable Split Mode. | -| toggleGlobalSplitMode(`options`) | - | Toggle Split Mode. [View Options](/docs/modes/edit-mode#edit-mode-options) (same as Edit Mode) | -| globalSplitModeEnabled() | `Boolean` | Returns `true` if global Split Mode is enabled. `false` when disabled. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :------- | :----- | :-------------------------------------------------------------------------------------------------- | :----------------------------------------------- | -| pm:split | `e` | Fired when the layer being split. Returns a LayerGroup containing all resulting layers in `layers`. | `shape`, `splitLayer`, `layers`, `originalLayer` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------------------ | :----- | :----------------------------------- | :----------------------------------------------- | -| pm:globalsplitmodetoggled | `e` | Fired when Split Mode is toggled. | `enabled`, `map` | -| pm:split | `e` | Fired when any layer is being split. | `shape`, `splitLayer`, `layers`, `originalLayer` | diff --git a/docs/modes/8.scale-mode.md b/docs/modes/8.scale-mode.md deleted file mode 100644 index 17d2e26..0000000 --- a/docs/modes/8.scale-mode.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Scale Mode ⭐ ---- - -### Scale Mode ⭐ - -You can enable Scale Mode for all layers on a map like this: - -```js -map.pm.enableGlobalScaleMode(); -``` - -With the option `centerScaling` the scale origin cen be the center of the layer or the opposite corner of the dragged marker. If `false` Alt-Key can be used. -The option `uniformScaling` the scales the width and the height with the same ratio. If `false` Shift-Key can be used. - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :----------------------- | :-------- | :--------------------------------------------------------------------- | -| enableGlobalScaleMode() | - | Enables global Scale Mode. | -| disableGlobalScaleMode() | - | Disables global Scale Mode. | -| toggleGlobalScaleMode() | - | Toggles global Scale Mode. | -| globalScaleModeEnabled() | `Boolean` | Returns `true` if global Scale Mode is enabled. `false` when disabled. | - -The following methods are available for layers under `layer.pm`: - -| Method | Returns | Description | -| :-------------------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------- | -| enableScale() | - | Enables Scale Mode on the layer. | -| disableScale() | - | Disables Scale Mode on the layer. | -| scaleEnabled() | `Boolean` | Returns if Scale Mode is enabled for the layer. | -| scaleLayer(`percent`) | - | Scale the layer by `x` percent. Also an Object with `{w: width, h: height}` can be passed. Scale up `> 0` , scale down `< 0`. | - -The following events are available on a layer instance: - -| Event | Params | Description | Output | -| :-------------- | :----- | :---------------------------------------- | :----------------------------------------------------- | -| pm:scaleenable | `e` | Fired when scale is enabled for a layer. | `layer`, `helpLayer` | -| pm:scaledisable | `e` | Fired when scale is disabled for a layer. | `layer` | -| pm:scalestart | `e` | Fired when scale starts on a layer. | `layer`, `helpLayer`, `originLatLngs`, `originLatLngs` | -| pm:scale | `e` | Fired when a layer is scaled. | `layer`, `helpLayer`, `oldLatLngs`, `newLatLngs` | -| pm:scaleend | `e` | Fired when scale ends on a layer. | `layer`, `helpLayer`, `originLatLngs`, `newLatLngs` | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------------------ | :----- | :---------------------------------------- | :----------------------------------------------------- | -| pm:globalscalemodetoggled | `e` | Fired when Scale Mode is toggled. | `enabled`, `map` | -| pm:scaleenable | `e` | Fired when scale is enabled for a layer. | `layer`, `helpLayer` | -| pm:scaledisable | `e` | Fired when scale is disabled for a layer. | `layer` | -| pm:scalestart | `e` | Fired when scale starts on a layer. | `layer`, `helpLayer`, `originLatLngs`, `originLatLngs` | -| pm:scale | `e` | Fired when a layer is scaled. | `layer`, `helpLayer`, `oldLatLngs`, `newLatLngs` | -| pm:scaleend | `e` | Fired when scale ends on a layer. | `layer`, `helpLayer`, `originLatLngs`, `newLatLngs` | diff --git a/docs/modes/9.union-mode.md b/docs/modes/9.union-mode.md deleted file mode 100644 index 4ac0936..0000000 --- a/docs/modes/9.union-mode.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Union Mode ⭐ ---- - -### Union Mode ⭐ - -![Union Feature](https://geoman-static.onrender.com/assets/union.gif) - -You can enable Union Mode for all layers on a map like this: - -```js -map.pm.enableGlobalUnionMode(); -``` - -The union mode in Leaflet-Geoman allows users to merge two leaflet layers into one. This mode can be enabled programmatically or through the provided toolbar. It supports merging polygons (or multipolygons). The union mode simplifies combining geometries. The union mode works by selecting two layers to union, then the union mode will create a new layer that is the union of the two selected layers. The new layer will be added to the map and the two selected layers will be removed from the map. - -The following methods are available on `map.pm`: - -| Method | Returns | Description | -| :----------------------- | :-------- | :--------------------------------------------------------------------- | -| enableGlobalUnionMode() | - | Enables global Union Mode. | -| disableGlobalUnionMode() | - | Disables global Union Mode. | -| toggleGlobalUnionMode() | - | Toggles global Union Mode. | -| globalUnionModeEnabled() | `Boolean` | Returns `true` if global Union Mode is enabled. `false` when disabled. | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :------------------------ | :----- | :---------------------------------------- | :----------------------------------------------------- | -| pm:globalunionmodetoggled | `e` | Fired when Scale Mode is toggled. | `enabled`, `map` | -| pm:union | `e` | Fired when a new layer is created by union of two other layers. | `resultLayer`, `mergedLayers` | \ No newline at end of file diff --git a/docs/modes/_category_.json b/docs/modes/_category_.json deleted file mode 100644 index 47b7fec..0000000 --- a/docs/modes/_category_.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "label": "Modes", - "position": 3, - "link": { - "type": "generated-index" - } -} diff --git a/docs/options/0.index.md b/docs/options/0.index.md deleted file mode 100644 index 77434cc..0000000 --- a/docs/options/0.index.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: "Options" ---- - -### Options - -You have many options available when drawing and editing your layers (described above). -You can set the options per layer as described above, or you can set them globally for all layers. This is especially useful when you use the toolbar and can't change the options programmatically. - -Examples: - -```js -layer.pm.enable({ pinning: true, snappable: false }); -``` - -```js -map.pm.setGlobalOptions({ pinning: true, snappable: false }); -``` - -The following options are additionally to the [Draw](#draw-mode) and [Edit Mode](#edit-mode) options. - -| Option | Default | Description | -| :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| snappingOrder | `Array` | Prioritize the order of snapping. Default: `['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']`. | -| layerGroup | `map` | add the created layers to a layergroup instead to the map. | -| panes | `Object` | Defines in which [panes](https://leafletjs.com/reference.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane' }`. | -| cutAsCircle | `false` | Enable cutting in shape form of a Circle. | - -The following events are available on a map instance: - -| Event | Params | Description | Output | -| :---------------------- | :----- | :------------------------------------- | :----- | -| pm:globaloptionschanged | `e` | Fired when global options are changed. | | - -Some details about a few more powerful options: diff --git a/docs/options/1.snapping.md b/docs/options/1.snapping.md deleted file mode 100644 index e5a41f5..0000000 --- a/docs/options/1.snapping.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_position: 1 -title: "Snapping" ---- -### Snapping - -Snap the dragged marker/vertex to other layers for precision drawing. -Snapping can be disabled for layers with the layer option `snapIgnore: true`. With `snapIgnore: false` it will be always snappable, also if `pmIgnore` is set. -Can also be disabled by holding the `ALT` key. - -![Snapping Options](https://geoman-static.onrender.com/assets/snapping.gif) diff --git a/docs/options/2.pinning.md b/docs/options/2.pinning.md deleted file mode 100644 index a7702fe..0000000 --- a/docs/options/2.pinning.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -sidebar_position: 2 -title: Pinning ⭐ ---- - -### Pinning ⭐ - -When dragging a vertex/marker, you can pin all other Markers/Vertices that have the same latlng to the dragged marker. Exclusive for Leaflet-Geoman Pro ⭐ - -![Pinning Option](https://geoman-static.onrender.com/assets/pinning.gif) diff --git a/docs/options/3.measurement.md b/docs/options/3.measurement.md deleted file mode 100644 index 6fff219..0000000 --- a/docs/options/3.measurement.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -sidebar_position: 3 -title: Measurement ⭐ ---- - -### Measurement ⭐ - -![Measurement Demo](https://geoman-static.onrender.com/assets/measurement-demo.gif) - -Calculates the measurement of a layer while drawing and editing. Exclusive for Leaflet-Geoman Pro ⭐ - -```js -map.pm.setGlobalOptions({ measurements: { measurement: true, displayFormat: 'metric', ... } }) -``` - -See the available options in the table below. - -| Option | Default | Description | -| :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------------- | -| measurement | `true` | Enable measurement calculation. | -| showTooltip | `true` | Shows the tooltip during draw and edit. | -| showTooltipOnHover | `true` | Shows the tooltip when hovering a finished layer. | -| displayFormat | `metric` | Displayed format in the tooltip `metric` or `imperial`. | -| totalLength | `true` | Shows the total length in the tooltip `Line`. | -| segmentLength | `true` | Shows the segment length in the tooltip `Line`, `Polygon`. | -| area | `true` | Shows the area in the tooltip `Polygon`, `Rectangle`, `Circle`, `CircleMarker`. | -| radius | `true` | Shows the radius in the tooltip `Circle`, `CircleMarker`. | -| perimeter | `true` | Shows the perimeter in the tooltip `Polygon`, `Rectangle`, `Circle`, `CircleMarker`. | -| height | `true` | Shows the height in the tooltip `Rectangle`. | -| width | `true` | Shows the width in the tooltip `Rectangle`. | -| coordinates | `true` | Shows the coordinates in the tooltip `Marker`, `CircleMarker` and the current dragged marker while drawing / editing. | - -The calculated measurements are available on `layer.pm.measurements`. - -You can also calculate measurements of any layer with: - -```js -L.PM.Utils.getMeasurements(layer, map, displayFormat); // displayFormat: 'metric' | 'imperial' -``` diff --git a/docs/options/4.auto-tracing.md b/docs/options/4.auto-tracing.md deleted file mode 100644 index 9b0bfec..0000000 --- a/docs/options/4.auto-tracing.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -sidebar_position: 4 -title: AutoTracing ⭐ ---- - -### AutoTracing ⭐ - -![AutoTracing Demo](https://geoman-static.onrender.com/assets/auto-tracing.gif) - -While drawing / cutting it is possible to auto trace the coordinates of another Layer. Exclusive for Leaflet-Geoman Pro ⭐ - -```js -map.pm.setGlobalOptions({ autoTracing: true }); -``` - -See the available options in the table below. - -| Option | Default | Description | -| :------------------- | :------ | :--------------------------------------------------------------------------------- | -| autoTracing | `true` | Enables auto tracing while drawing. | -| autoTraceMaxZoom | `10` | Until which zoom level the coordinates of the layers in the viewport will be used. | -| autoTraceMaxDistance | `20` | The distance to the layer when a snap for auto tracing should happen. | - -Here's a list of map events you can listen to: - -| Event | Params | Description | Output | -| :--------------------- | :----- | :------------------------------------------------------------- | :------------ | -| pm:autotracestart | `e` | Fired when auto tracing is started and connected with a layer. | | -| pm:autotracelinechange | `e` | Fired when auto tracing hintline is changed. | `hintLatLngs` | -| pm:autotraceend | `e` | Fired when auto tracing is ended. | | diff --git a/docs/options/5.performance.md b/docs/options/5.performance.md deleted file mode 100644 index af6da1d..0000000 --- a/docs/options/5.performance.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -sidebar_position: 5 -title: Performance ---- - -### Performance - -Leaflet-Geoman offers a set of special options to increase performance when working with very large datasets. -The problem with leaflet and very large datasets, are the amount of elements in the DOM. The following options reduce the amount of DOM nodes significantly. Thus, allowing for buttery smooth editing even with super large datasets. - -See the available options in the table below. - -| Option | Default | Description | -| :--------------------- | :------ | :------------------------------------------------------------------- | -| limitMarkersToCount | `-1` | Shows only `n` markers closest to the cursor. Use `-1` for no limit. | -| limitMarkersToZoom | `-1` | Shows markers when under the given zoom level. ⭐ | -| limitMarkersToViewport | `false` | Shows only markers in the viewport. ⭐ | -| limitMarkersToClick | `false` | Shows markers only after the layer was clicked. ⭐ | - -All options can be used together. In fact, the performance increases even more when using multiple options together, depending on your desired user experience. - -They are part of the options for Edit Mode. [See usage and full options table there](/docs/modes/edit-mode). diff --git a/docs/options/6.snap-guides.md b/docs/options/6.snap-guides.md deleted file mode 100644 index 068eedd..0000000 --- a/docs/options/6.snap-guides.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -sidebar_position: 6 -title: Snap Guides ⭐ ---- - -### Snap Guides - -![Snap Guides Demo](https://geoman-static.onrender.com/assets/snap-guides-fast.gif) - -Snap Guides are a powerful tool to create precise geometries. They are especially useful when drawing or editing shapes. Exclusive for Leaflet-Geoman Pro ⭐ - -Snap Guides are 90° guides that help you to align your shapes. They are displayed as dashed lines and snap to the orthogonal direction (90°) of the current vertex line. diff --git a/docs/options/_category_.json b/docs/options/_category_.json deleted file mode 100644 index b2caa1e..0000000 --- a/docs/options/_category_.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "label": "Options", - "position": 6, - "link": { - "type": "generated-index" - } -} \ No newline at end of file diff --git a/docs/text-layer.md b/docs/text-layer.md deleted file mode 100644 index 88951ca..0000000 --- a/docs/text-layer.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_position: 5 -title: "Text Layer" ---- -### Text Layer - -![text-layer](https://geoman-static.onrender.com/assets/text-layer.gif) - -Additional to the default methods and options there are a few more possibilities for Text Layers: - -#### Text Layer Drawing: - -```js -map.pm.enableDraw("Text", { textOptions: { text: "Geoman is fantastic! 🚀" } }); -``` - -See the available options for `textOptions` in the table below. - -| Option | Default | Description | -| :------------- | :------ | :------------------------------------------------------------ | -| text | `` | Predefined text. | -| focusAfterDraw | `true` | Directly after placing the marker, text editing is activated. | -| removeIfEmpty | `true` | The text layer is removed if no text is written. | -| className | `` | Custom CSS Classes. Separated by a space. | - -#### Text Layer Editing: - -The following methods are available on `layer.pm`: - -| Method | Returns | Description | -| :-------------- | :------------ | :-------------------------------------------------------------------- | -| focus() | - | Activate text editing. Layer needs first to be enabled `.enable()`. | -| blur() | - | Deactivate text editing. Layer needs first to be enabled `.enable()`. | -| hasFocus() | `Boolean` | Is text editing active. | -| getElement() | `HTMLElement` | Returns the `