Add drag and drop interaction

Author: stfnkth

examples/standalone/layers/kml_vector_layer.py

@@ -13,4 +13,6 @@
 m = ol.Map()
 m.add_layer(kml_layer)
 m.add_tooltip()
+# m.add_call("addDragAndDropVectorLayers")
+m.add_drag_and_drop_vector_layers_interaction()
 m.save("/tmp/ol-example.html")

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "openlayers"
-version = "0.1.0-rc.2"
+version = "0.1.0-rc.3"
 description = "Python Bindings for OpenLayersJS"
 readme = "README.md"
 authors = [{ name = "Stefan Kuethe", email = "[email protected]" }]

src/openlayers/js/openlayers.standalone.js

@@ -152,6 +152,9 @@ 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 set_opacity(self, layer_id: str, opacity: float = 1) -> None:
         """Set the opacity of a layer
 

src/openlayers/map.py

@@ -0,0 +1,46 @@
+// See https://openlayers.org/en/latest/examples/drag-and-drop.html
+// ---
+import type { Map } from "ol";
+
+import GPX from 'ol/format/GPX.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import IGC from 'ol/format/IGC.js';
+import KML from 'ol/format/KML.js';
+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';
+
+function addDragAndDropToMap(map: Map): 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(),
+            ],
+        });
+        dragAndDropInteraction.on('addfeatures', function (event: any) {
+            const vectorSource = new VectorSource({
+                features: event.features,
+            });
+            map.addLayer(
+                new VectorLayer({
+                    source: vectorSource,
+                }),
+            );
+            map.getView().fit(vectorSource.getExtent());
+        });
+        map.addInteraction(dragAndDropInteraction);
+    }
+    setInteraction();
+}
+
+export { addDragAndDropToMap };

srcjs/ipywidget-ts/drag-and-drop.ts

@@ -6,6 +6,7 @@ import { fromLonLat, transformExtent, useGeographic } from "ol/proj";
 import { JSONConverter } from "./json";
 import { addTooltipToMap } from "./tooltip";
 import { addSelectFeaturesToMap } from "./select-features";
+import { addDragAndDropToMap as addDragAndDropVectorLayersToMap } from "./drag-and-drop";
 
 // --- Types
 import type Layer from "ol/layer/Layer";
@@ -254,4 +255,8 @@ export default class MapWidget {
   addSelectFeatures(): void {
     addSelectFeaturesToMap(this._map, this._model);
   }
+
+  addDragAndDropVectorLayers(formats?: any[]): void {
+    addDragAndDropVectorLayersToMap(this._map);
+  }
 }