maplibre-gl-geo-editor 0.1.0 → 0.3.0

package/README.md

@@ -14,6 +14,7 @@ A powerful MapLibre GL plugin for creating and editing geometries. Extends the f
 - **Rectangle** - Draw rectangles
 - **Circle** - Draw circles
 - **Marker** - Place point markers
+- **Freehand** - Draw shapes by dragging (custom implementation)
 
 ### Basic Edit Tools (via Geoman Free)
 - **Drag** - Move features on the map
@@ -23,6 +24,7 @@ A powerful MapLibre GL plugin for creating and editing geometries. Extends the f
 - **Delete** - Remove selected features (supports multi-select)
 
 ### Advanced Edit Tools (Custom Implementation)
+- **Select** - Click to select features (shows properties popup when enabled)
 - **Scale** - Resize features with interactive handles
 - **Copy** - Duplicate features (Ctrl+C/V support)
 - **Split** - Split polygons/lines with a drawn line
@@ -32,6 +34,10 @@ A powerful MapLibre GL plugin for creating and editing geometries. Extends the f
 - **Lasso** - Select multiple features by drawing a polygon (supports union/difference/drag)
 - **Reset** - Clear selection and disable active tools (toolbar button)
 
+### File Operations
+- **Open** - Load GeoJSON file from disk (auto-zooms to extent when enabled)
+- **Save** - Download current features as GeoJSON file
+
 ## Installation
 
 ```bash
@@ -68,11 +74,14 @@ map.on('load', () => {
     const geoEditor = new GeoEditor({
       position: 'top-left',
       toolbarOrientation: 'vertical',
-      drawModes: ['polygon', 'line', 'rectangle', 'circle', 'marker'],
+      columns: 2,  // Display buttons in 2 columns (reduces toolbar height)
+      drawModes: ['polygon', 'line', 'rectangle', 'circle', 'marker', 'freehand'],
       editModes: [
-        'drag', 'change', 'rotate', 'cut', 'delete',
+        'select', 'drag', 'change', 'rotate', 'cut', 'delete',
         'scale', 'copy', 'split', 'union', 'difference', 'simplify', 'lasso'
       ],
+      showFeatureProperties: true,  // Show popup with properties on selection
+      fitBoundsOnLoad: true,        // Auto-zoom to extent when loading GeoJSON
       onFeatureCreate: (feature) => console.log('Created:', feature),
       onSelectionChange: (features) => console.log('Selected:', features.length),
     });
@@ -130,8 +139,10 @@ function App() {
           map={map}
           geoman={geoman}
           position="top-left"
-          drawModes={['polygon', 'line', 'marker']}
-          editModes={['drag', 'change', 'scale', 'copy', 'union', 'split']}
+          drawModes={['polygon', 'line', 'marker', 'freehand']}
+          editModes={['select', 'drag', 'change', 'scale', 'copy', 'union', 'split']}
+          showFeatureProperties={true}
+          fitBoundsOnLoad={true}
         />
       )}
     </div>
@@ -149,14 +160,21 @@ function App() {
 | `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 |
 
 ### Methods
 
@@ -181,6 +199,14 @@ geoEditor.deleteSelectedFeatures();
 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();
@@ -211,6 +237,16 @@ map.getContainer().addEventListener('gm:simplify', (e) => {
 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
@@ -238,6 +274,7 @@ import {
   DifferenceFeature,
   ScaleFeature,
   SplitFeature,
+  FreehandFeature,
 } from 'maplibre-gl-geo-editor';
 
 // Union polygons