more docs for mode handling methods

docs/draw-modes/00-draw-marker.mdx

@@ -4,16 +4,21 @@ title: "Draw Marker"
 
 # Draw Marker Mode
 
-Draw Marker Mode allows you to add markers to the map by clicking on desired locations.
+Marker Mode allows you to add markers to the map by clicking on desired locations.
 
 You can enable Draw Marker Mode like this:
 
 ```js
-// Enable Draw Marker Mode like this:
 map.gm.enableDraw('marker');
+map.gm.disableDraw();
+map.gm.toggleDraw('marker');
+map.gm.drawEnabled('marker');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'marker');
+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:

docs/draw-modes/01-draw-circle_marker.mdx

@@ -4,16 +4,21 @@ title: "Draw Circle Marker"
 
 # Draw Circle Marker Mode
 
-Draw 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.
+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
-// Enable Circle Marker Mode like this:
 map.gm.enableDraw('circle_marker');
+map.gm.disableDraw();
+map.gm.toggleDraw('circle_marker');
+map.gm.drawEnabled('circle_marker');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'circle_marker');
+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:

docs/draw-modes/02-draw-text_marker.mdx

@@ -4,16 +4,21 @@ title: "Draw Text Marker"
 
 # Draw Text Marker Mode
 
-Draw Text Marker Mode allows you to add text labels to the map by clicking on desired locations and entering custom text.
+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
-// Enable Text Marker Mode like this:
 map.gm.enableDraw('text_marker');
+map.gm.disableDraw();
+map.gm.toggleDraw('text_marker');
+map.gm.drawEnabled('text_marker');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'text_marker');
+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:

docs/draw-modes/03-draw-circle.mdx

@@ -4,16 +4,21 @@ title: "Draw Circle"
 
 # Draw Circle Mode
 
-Draw Circle Mode allows you to add circles to the map by defining a center point and radius.
+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
-// Enable Circle Mode like this:
 map.gm.enableDraw('circle');
+map.gm.disableDraw();
+map.gm.toggleDraw('circle');
+map.gm.drawEnabled('circle');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'circle');
+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:

docs/draw-modes/04-draw-line.mdx

@@ -4,16 +4,21 @@ title: "Draw Line"
 
 # Draw Line Mode
 
-Draw Line Mode allows you to create lines on the map by clicking to add vertices.
+Line Mode allows you to create lines on the map by clicking to add vertices.
 
 You can enable Draw Line Mode like this:
 
 ```js
-// Enable Line Mode like this:
 map.gm.enableDraw('line');
+map.gm.disableDraw();
+map.gm.toggleDraw('line');
+map.gm.drawEnabled('line');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'line');
+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:

docs/draw-modes/05-draw-rectangle.mdx

@@ -4,16 +4,21 @@ title: "Draw Rectangle"
 
 # Draw Rectangle Mode
 
-Draw Rectangle Mode allows you to create rectangles on the map by clicking and dragging to define opposite corners.
+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
-// Enable Rectangle Mode like this:
 map.gm.enableDraw('rectangle');
+map.gm.disableDraw();
+map.gm.toggleDraw('rectangle');
+map.gm.drawEnabled('rectangle');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'rectangle');
+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:

docs/draw-modes/06-draw-polygon.mdx

@@ -4,16 +4,21 @@ title: "Draw Polygon"
 
 # Draw Polygon Mode
 
-Draw Polygon Mode allows you to create polygons on the map by clicking to add vertices and closing the shape.
+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
-// Enable Polygon Mode like this:
 map.gm.enableDraw('polygon');
+map.gm.disableDraw();
+map.gm.toggleDraw('polygon');
+map.gm.drawEnabled('polygon');
 
 // Or like this:
-map.gm.options.enableMode('draw', 'polygon');
+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:

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';
+
+<BrowserOnlyGmMap
+  gmOptions={drawFreehandOptions} />

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';
+
+<BrowserOnlyGmMap
+  gmOptions={drawCustomShapeOptions} />

docs/edit-modes/00-edit-drag.mdx

@@ -4,14 +4,19 @@ title: "Drag"
 
 # Drag Mode
 
-You can enable Drag Mode for all layers on a map like this:
+You can handle Drag Mode for all layers on a map like this:
 
 ```js
-// Enable Drag Mode like this:
 map.gm.enableGlobalDragMode();
+map.gm.disableGlobalDragMode();
+map.gm.toggleGlobalDragMode();
+map.gm.globalDragModeEnabled();
 
 // Or like this:
-map.gm.options.enableMode('edit', 'drag');
+map.gm.enableMode('edit', 'drag');
+map.gm.disableMode('edit', 'drag');
+map.gm.toggleMode('edit', 'drag');
+map.gm.isModeEnabled('edit', 'drag');
 ```
 
 

docs/edit-modes/01-edit-change.mdx

@@ -4,14 +4,19 @@ title: "Edit"
 
 # Edit Mode
 
-You can enable Edit Mode for all layers on a map like this:
+You can handle Edit Mode for all layers on a map like this:
 
 ```js
-// Enable Edit Mode like this:
 map.gm.enableGlobalEditMode();
+map.gm.disableGlobalEditMode();
+map.gm.toggleGlobalEditMode();
+map.gm.globalEditModeEnabled();
 
 // Or like this:
-map.gm.options.enableMode('edit', 'change');
+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`:

docs/edit-modes/02-edit-rotate.mdx

@@ -4,14 +4,19 @@ title: "Rotate"
 
 # Rotate Mode
 
-You can enable Rotate Mode for all layers on a map like this:
+You can handle Rotate Mode for all layers on a map like this:
 
 ```js
-// Enable Rotate Mode like this:
 map.gm.enableGlobalRotateMode();
+map.gm.disableGlobalRotateMode();
+map.gm.toggleGlobalRotateMode();
+map.gm.globalRotateModeEnabled();
 
 // Or like this:
-map.gm.options.enableMode('edit', 'rotate');
+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`: