basic docs for draw modes

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

@@ -1,15 +1,39 @@
 ---
-title: "Marker"
+title: "Draw Marker"
 ---
 
-## Marker Mode
+## Draw Marker Mode
 
-You can enable Marker Mode on your map to allow users to draw marker geometries.
+Draw Marker Mode allows you to add markers to the map by clicking on desired locations.
 
-<!-- Add detailed documentation and code examples for Marker Mode here -->
+You can enable Draw Marker Mode like this:
 
-## Live Marker Example
+```js
+// Enable Draw Marker Mode like this:
+map.gm.enableDraw('marker');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawMarkerOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawMarkerOptions} />

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

@@ -1,15 +1,39 @@
 ---
-title: "Circle Marker"
+title: "Draw Circle Marker"
 ---
 
-## Circle Marker Mode
+## Draw Circle Marker Mode
 
-You can enable Circle Marker Mode on your map to allow users to draw circle marker geometries.
+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.
 
-<!-- Add detailed documentation and code examples for Circle Marker Mode here -->
+You can enable Draw Circle Marker Mode like this:
 
-## Live Circle Marker Example
+```js
+// Enable Circle Marker Mode like this:
+map.gm.enableDraw('circle_marker');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawCircleMarkerOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawCircleMarkerOptions} />

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

@@ -1,15 +1,41 @@
 ---
-title: "Text Marker"
+title: "Draw Text Marker"
 ---
 
-## Text Marker Mode
+## Draw Text Marker Mode
 
-You can enable Text Marker Mode on your map to allow users to draw text marker geometries.
+Draw Text Marker Mode allows you to add text labels to the map by clicking on desired locations and entering custom text.
 
-<!-- Add detailed documentation and code examples for Text Marker Mode here -->
+You can enable Draw Text Marker Mode like this:
 
-## Live Text Marker Example
+```js
+// Enable Text Marker Mode like this:
+map.gm.enableDraw('text_marker');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawTextMarkerOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawTextMarkerOptions} />

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

@@ -1,15 +1,41 @@
 ---
-title: "Circle"
+title: "Draw Circle"
 ---
 
-## Circle Mode
+## Draw Circle Mode
 
-You can enable Circle Mode on your map to allow users to draw circle geometries.
+Draw Circle Mode allows you to add circles to the map by defining a center point and radius.
 
-<!-- Add detailed documentation and code examples for Circle Mode here -->
+You can enable Draw Circle Mode like this:
 
-## Live Circle Example
+```js
+// Enable Circle Mode like this:
+map.gm.enableDraw('circle');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawCircleOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawCircleOptions} />

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

@@ -1,15 +1,40 @@
 ---
-title: "Line"
+title: "Draw Line"
 ---
 
-## Line Mode
+## Draw Line Mode
 
-You can enable Line Mode on your map to allow users to draw line geometries.
+Draw Line Mode allows you to create lines on the map by clicking to add vertices.
 
-<!-- Add detailed documentation and code examples for Line Mode here -->
+You can enable Draw Line Mode like this:
 
-## Live Line Example
+```js
+// Enable Line Mode like this:
+map.gm.enableDraw('line');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawLineOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawLineOptions} />

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

@@ -1,15 +1,39 @@
 ---
-title: "Rectangle"
+title: "Draw Rectangle"
 ---
 
-## Rectangle Mode
+## Draw Rectangle Mode
 
-You can enable Rectangle Mode on your map to allow users to draw rectangle geometries.
+Draw Rectangle Mode allows you to create rectangles on the map by clicking and dragging to define opposite corners.
 
-<!-- Add detailed documentation and code examples for Rectangle Mode here -->
+You can enable Draw Rectangle Mode like this:
 
-## Live Rectangle Example
+```js
+// Enable Rectangle Mode like this:
+map.gm.enableDraw('rectangle');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawRectangleOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawRectangleOptions} />

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

@@ -1,15 +1,40 @@
 ---
-title: "Polygon"
+title: "Draw Polygon"
 ---
 
-## Polygon Mode
+## Draw Polygon Mode
 
-You can enable Polygon Mode on your map to allow users to draw polygon geometries.
+Draw Polygon Mode allows you to create polygons on the map by clicking to add vertices and closing the shape.
 
-<!-- Add detailed documentation and code examples for Polygon Mode here -->
+You can enable Draw Polygon Mode like this:
 
-## Live Polygon Example
+```js
+// Enable Polygon Mode like this:
+map.gm.enableDraw('polygon');
+
+// Or like this:
+map.gm.options.enableMode('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';
 
-<BrowserOnlyGmMap gmOptions={drawPolygonOptions} />
+<BrowserOnlyGmMap
+  gmOptions={drawPolygonOptions} />