Refactor drag and drop interaction

Author: stfnkth

examples/standalone/layers/kml_vector_layer.py

@@ -11,8 +11,10 @@
 )
 
 m = ol.Map()
-m.add_layer(kml_layer)
+# m.add_layer(kml_layer)
 m.add_tooltip()
 # m.add_call("addDragAndDropVectorLayers")
-m.add_drag_and_drop_vector_layers_interaction()
+m.add_drag_and_drop_vector_layers_interaction(
+    formats=[ol.formats.KML(extract_styles=False)],
+    style=ol.FlatStyle(stroke_color="red", stroke_width=3, circle_radius=5, circle_stroke_color="green"))
 m.save("/tmp/ol-example.html")

src/openlayers/js/openlayers.anywidget.js

@@ -12,6 +12,7 @@
 from .models.sources import OSM, SourceT
 from .models.view import View
 from .styles import FlatStyle
+from .models.formats import FormatT, GeoJSON, GPX, TopoJSON, KML
 
 
 class Map(object):
@@ -152,8 +153,17 @@ def add_select_features(self) -> None:
         """
         self.add_call("addSelectFeatures")
 
-    def add_drag_and_drop_vector_layers_interaction(self, style: FlatStyle | dict = None) -> None:
-        return self.add_call("addDragAndDropVectorLayers")
+    def add_drag_and_drop_vector_layers_interaction(
+        self,
+        formats: list[FormatT] = [GeoJSON(), TopoJSON(), GPX(), KML()],
+        style: FlatStyle | dict = None,
+    ) -> None:
+        """Add drag and drop interaction to map"""
+        formats = [f.model_dump() for f in formats]
+        if isinstance(style, FlatStyle):
+            style = style.model_dump()
+        
+        return self.add_call("addDragAndDropVectorLayers", formats, style)
 
     def set_opacity(self, layer_id: str, opacity: float = 1) -> None:
         """Set the opacity of a layer

src/openlayers/js/openlayers.standalone.js

@@ -1,6 +1,7 @@
 // See https://openlayers.org/en/latest/examples/drag-and-drop.html
 // ---
 import type { Map } from "ol";
+import type FeatureFormat from "ol/format/Feature";
 
 import GPX from 'ol/format/GPX.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
@@ -10,22 +11,25 @@ import TopoJSON from 'ol/format/TopoJSON.js';
 import DragAndDrop from 'ol/interaction/DragAndDrop.js';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
+import { FlatStyle } from "ol/style/flat";
 
-function addDragAndDropToMap(map: Map): void {
+const defaultFormats = [
+    new GPX(),
+    new GeoJSON(),
+    new IGC(),
+    new KML(),
+    new TopoJSON(),
+];
+
+function addDragAndDropToMap(map: Map, formats?: FeatureFormat[], style?: FlatStyle): void {
     let dragAndDropInteraction: any;
 
     function setInteraction() {
         if (dragAndDropInteraction) {
             map.removeInteraction(dragAndDropInteraction);
         }
         dragAndDropInteraction = new DragAndDrop({
-            formatConstructors: [
-                new GPX(),
-                new GeoJSON(),
-                new IGC(),
-                new KML(),
-                new TopoJSON(),
-            ],
+            formatConstructors: formats || defaultFormats
         });
         dragAndDropInteraction.on('addfeatures', function (event: any) {
             const vectorSource = new VectorSource({
@@ -34,6 +38,7 @@ function addDragAndDropToMap(map: Map): void {
             map.addLayer(
                 new VectorLayer({
                     source: vectorSource,
+                    style: style || undefined
                 }),
             );
             map.getView().fit(vectorSource.getExtent());

src/openlayers/map.py

@@ -15,6 +15,8 @@ import type VectorSource from "ol/source/Vector";
 import type VectorLayer from "ol/layer/Vector";
 import type WebGLVectorLayer from "ol/layer/WebGLVector";
 import type { Coordinate } from "ol/coordinate";
+import type FeatureFormat from "ol/format/Feature";
+import type { FlatStyle } from "ol/style/flat";
 import type { MyMapOptions } from ".";
 
 import type { AnyModel } from "@anywidget/types";
@@ -256,7 +258,9 @@ export default class MapWidget {
     addSelectFeaturesToMap(this._map, this._model);
   }
 
-  addDragAndDropVectorLayers(formats?: any[]): void {
-    addDragAndDropVectorLayersToMap(this._map);
+  addDragAndDropVectorLayers(formatsDef?: JSONDef[], style?: FlatStyle): void {
+    const formats = formatsDef?.map(item => jsonConverter.parse(item));
+    console.log("drag and drop formats", formats);
+    addDragAndDropVectorLayersToMap(this._map, formats, style);
   }
 }