Save changed feature

Author: Stefan Kuethe

TODOS.md

@@ -0,0 +1,5 @@
+# TODOS
+
+## STAC layers
+
+https://openlayers.org/en/latest/examples/stac-item.html

notebooks/Untitled.ipynb renamed to notebooks/modify-interaction.ipynb

@@ -7,14 +7,12 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from openlayers.anywidget import MapWidget\n",
-    "from openlayers.json_defs import (\n",
-    "WebGLTileLayer, GeoTIFFSource, WebGLVectorLayer,VectorSource, TileLayer)"
+    "import openlayers as ol"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "id": "5f0015f6-9f02-4fcc-9949-a4d9d46515d3",
    "metadata": {},
    "outputs": [
@@ -30,14 +28,7 @@
     }
    ],
    "source": [
-    "source = GeoTIFFSource(\n",
-    "    sources=[\n",
-    "      {\n",
-    "        \"url\": 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',\n",
-    "      }\n",
-    "    ]\n",
-    ")\n",
-    "source"
+    "ol.GeoDataFrame.from_file()"
    ]
   },
   {
@@ -322,7 +313,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
+   "display_name": ".venv",
    "language": "python",
    "name": "python3"
   },

src/openlayers/js/openlayers.anywidget.js

@@ -13,6 +13,7 @@ import { defaultControls } from "./controls";
 
 // import { DrawControl } from "./custom-controls/draw";
 
+import { featureToGeoJSON } from "./utils";
 import { addTooltipToMap } from "./tooltip";
 import { addEventListernersToMapWidget } from "./events";
 import { addSelectFeaturesToMap } from "./select-features";
@@ -37,7 +38,7 @@ type Metadata = {
 
 // TODO: Rename to something like `FeatureStore`
 type Features = {
-  [key: string]: any[];
+  [layerId: string]: any[];
 }
 
 const jsonConverter = new JSONConverter();
@@ -69,7 +70,7 @@ export default class MapWidget {
   _container: HTMLElement;
   _map: Map;
   _metadata: Metadata = { layers: [], controls: [] };
-  // _features: Features = {};
+  _features: Features = {};
   _model: AnyModel | undefined;
 
   constructor(mapElement: HTMLElement, mapOptions: MyMapOptions, model?: AnyModel | undefined) {
@@ -263,13 +264,27 @@ export default class MapWidget {
     addDragAndDropVectorLayersToMap(this._map, formats, style);
   }
 
+  // Does not work for `WebGLVectorLayer`
   addModifyInteraction(layerId: string): void {
     const source = this.getLayer(layerId)?.getSource() as VectorSource;
     if (source) {
       const snap = new Snap({ source: source });
       this._map.addInteraction(snap);
       const modify = new Modify({ source: source });
       this._map.addInteraction(modify);
+
+      // Add event listener
+      source.on("changefeature", (e) => {
+        if (e.feature) {
+          const feature = featureToGeoJSON(e.feature);
+          console.log("feature changed", feature);
+          if (this._model) {
+            this._features[layerId] = [feature];
+            this._model.set("features", this._features);
+            this._model.save_changes();
+          }
+        }
+      });
     }
   }
 }