| Option | Type | Default | Description |
|--------|------|---------|-------------|
| position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-left' | Position of the control |
| collapsed | boolean | false | Start with toolbar collapsed |
| drawModes | DrawMode[] | All modes | Draw modes to enable |
| editModes | EditMode[] | All modes | Edit modes to enable |
| fileModes | FileMode[] | ['open', 'save'] | File operations to enable |
| toolbarOrientation | 'vertical' \| 'horizontal' | 'vertical' | Toolbar layout |
| columns | number | 1 | Number of button columns (vertical orientation only) |
| showLabels | boolean | false | Show text labels on buttons |
| simplifyTolerance | number | 0.001 | Default simplification tolerance |
| saveFilename | string | 'features.geojson' | Default filename for saving |
| showFeatureProperties | boolean | false | Show popup with feature properties when selected |
| fitBoundsOnLoad | boolean | true | Auto-zoom to extent when loading GeoJSON |
| onFeatureCreate | (feature) => void | - | Callback when feature is created |
| onFeatureEdit | (feature, oldFeature) => void | - | Callback when feature is edited |
| onFeatureDelete | (featureId) => void | - | Callback when feature is deleted |
| onSelectionChange | (features) => void | - | Callback when selection changes |
| onModeChange | (mode) => void | - | Callback when mode changes |
| onGeoJsonLoad | (result) => void | - | Callback when GeoJSON is loaded |
| onGeoJsonSave | (result) => void | - | Callback when GeoJSON is saved |
| enableAttributeEditing | boolean | false | Enable attribute editing panel |
| attributeSchema | AttributeSchema | - | Schema defining fields per geometry type |
| attributePanelPosition | 'left' \| 'right' | 'right' | Position of the attribute panel |
| attributePanelWidth | number | 300 | Width of the attribute panel in pixels |
| attributePanelMaxHeight | number \| string | '80vh' | Maximum height of the attribute panel (px or CSS value) |
| attributePanelTop | number | 10 | Offset from top of map container in pixels |
| attributePanelSideOffset | number | 10 | Offset from left/right side of map container in pixels |
| attributePanelTitle | string | 'Feature Properties' | Title of the attribute panel |
| onAttributeChange | (event) => void | - | Callback when feature attributes change |
| enableHistory | boolean | true | Enable undo/redo functionality |
| maxHistorySize | number | 50 | Maximum number of history entries |
| onHistoryChange | (canUndo, canRedo) => void | - | Callback when history state changes |

$3

`typescript
// Mode management
geoEditor.enableDrawMode('polygon');
geoEditor.enableEditMode('scale');
geoEditor.disableAllModes();

// Selection
geoEditor.selectFeatures(features);
geoEditor.clearSelection();
geoEditor.getSelectedFeatures();
geoEditor.getSelectedFeatureCollection();

// Clipboard
geoEditor.copySelectedFeatures();
geoEditor.pasteFeatures();
geoEditor.deleteSelectedFeatures();

// Get all features
geoEditor.getFeatures();
geoEditor.getAllFeatureCollection();

// File operations
geoEditor.openFileDialog(); // Open file picker dialog
geoEditor.loadGeoJson(geoJson); // Load GeoJSON programmatically
geoEditor.saveGeoJson('filename.geojson'); // Save/download GeoJSON

// Map view
geoEditor.fitToAllFeatures(); // Zoom map to show all features

// Operation snapshots
geoEditor.getLastCreatedFeature();
geoEditor.getLastEditedFeature();
geoEditor.getLastDeletedFeature();
geoEditor.getLastDeletedFeatureId();

// Get state
geoEditor.getState();

// Attribute editing
geoEditor.openAttributeEditor(feature); // Open editor for a feature
geoEditor.closeAttributeEditor(); // Close the editor
geoEditor.toggleAttributePanel(); // Toggle visibility
geoEditor.setAttributeSchema(schema); // Update schema dynamically
geoEditor.getAttributeSchema(); // Get current schema

// History (undo/redo)
geoEditor.undo(); // Undo last operation
geoEditor.redo(); // Redo last undone operation
geoEditor.canUndo(); // Check if undo is available
geoEditor.canRedo(); // Check if redo is available
geoEditor.clearHistory(); // Clear all history
geoEditor.getHistoryState(); // Get history state object
`

$3

Listen for events on the map container:

`typescript
map.getContainer().addEventListener('gm:union', (e) => {
console.log('Union result:', e.detail);
});

map.getContainer().addEventListener('gm:split', (e) => {
console.log('Split result:', e.detail);
});

map.getContainer().addEventListener('gm:simplify', (e) => {
console.log('Simplify result:', e.detail);
});

map.getContainer().addEventListener('gm:lassoend', (e) => {
console.log('Lasso selection:', e.detail);
});

map.getContainer().addEventListener('gm:geojsonload', (e) => {
console.log('GeoJSON loaded:', e.detail);
// detail: { features, count, filename }
});

map.getContainer().addEventListener('gm:geojsonsave', (e) => {
console.log('GeoJSON saved:', e.detail);
// detail: { featureCollection, count, filename }
});
`

Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| Ctrl+C | Copy selected features |
| Ctrl+V | Paste features |
| Ctrl+Z | Undo last operation |
| Ctrl+Y | Redo last undone operation |
| Delete | Delete selected features |
| Escape | Cancel operation / Clear selection |

Logging

GeoEditor logs the current selected FeatureCollection to the console whenever a feature is selected, created, edited, or deleted.

Standalone Feature Classes

You can also use the feature classes directly:

`typescript
import {
CopyFeature,
SimplifyFeature,
UnionFeature,
DifferenceFeature,
ScaleFeature,
SplitFeature,
FreehandFeature,
} from 'maplibre-gl-geo-editor';

// Union polygons
const union = new UnionFeature();
const result = union.union([polygon1, polygon2]);

// Simplify a feature
const simplify = new SimplifyFeature();
const simplified = simplify.simplify(feature, { tolerance: 0.01 });

// Get simplification stats
const stats = simplify.getSimplificationStats(feature, 0.01);
console.log(Reduced vertices by ${stats.reduction}%);
`

Development

`bash


Install dependencies

`bash


Pull the latest image

`bash


Build the image

| Tag | Description |
|-----|-------------|
| latest | Latest release |
| x.y.z | Specific version (e.g., 1.0.0) |
| x.y | Minor version (e.g., 1.0`) |

Dependencies

- MapLibre GL JS - Map rendering
- @geoman-io/maplibre-geoman-free - Basic drawing/editing
- @turf/turf - Geometry operations

License

MIT License - see LICENSE for details.

Credits

- Geoman for the excellent free drawing/editing plugin
- Turf.js for powerful geometry operations
- Inspired by maplibre-gl-layer-control