Add method to select features

Author: stfnkth

examples/standalone/select_features.py

@@ -0,0 +1,7 @@
+import openlayers.express as ox
+
+url = "https://openlayers.org/data/vector/us-states.json"
+
+m = ox.GeoJSONLayer(data=url, webgl=False).to_map()
+m.add_call("addSelectFeatures")
+m.save()

src/openlayers/express.py

@@ -44,14 +44,16 @@ def __init__(
         data: str | dict,
         id: str | None = None,
         style: FlatStyle | None = None,
+        webgl: bool = True,
         **kwargs,
     ):
+        vector_layer_class = WebGLVectorLayer if webgl else VectorLayer
         if isinstance(data, str):
             source = VectorSource(url=data)
         else:
             source = VectorSource(geojson=data)
 
-        self._model = WebGLVectorLayer(
+        self._model = vector_layer_class(
             source=source,
             style=style
             or default_style().model_copy(update=FlatStyle(**kwargs).model_dump2()),

src/openlayers/js/openlayers.standalone.js

@@ -5,6 +5,7 @@ import Overlay from "ol/Overlay";
 import { fromLonLat, transformExtent, useGeographic } from "ol/proj";
 import { JSONConverter } from "./json";
 import { addTooltipToMap } from "./tooltip";
+import { addSelectFeaturesToMap } from "./select-features";
 
 // --- Types
 import type Layer from "ol/layer/Layer";
@@ -238,4 +239,8 @@ export default class MapWidget {
   addTooltip(template: string | null): void {
     addTooltipToMap(this._map, template);
   }
+
+  addSelectFeatures(): void {
+    addSelectFeaturesToMap(this._map);
+  }
 }

srcjs/ipywidget-ts/map.ts

@@ -0,0 +1,53 @@
+import { Map } from "ol";
+import { FeatureLike } from "ol/Feature";
+import Feature from "ol/Feature";
+import Style, { StyleLike } from "ol/style/Style";
+import Fill from 'ol/style/Fill.js';
+import Stroke from 'ol/style/Stroke.js';
+import VectorLayer from "ol/layer/Vector";
+
+// TODO: Should be a parameter
+const highlightStyle = new Style({
+    fill: new Fill({
+        color: 'rgba(58, 154, 178,0.7)'
+    }),
+    stroke: new Stroke({
+        // color: 'rgba(241, 27, 0, 0.7)',
+        color: "rgba(220, 203, 78, 0.7)",
+        // color: "rgba(111, 178, 193, 0.7)",
+        width: 2
+    })
+});
+
+function addSelectFeaturesToMap(map: Map): void {
+    const selected = [] as Feature[];
+
+    map.on('singleclick', function (e) {
+        map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+            const isVectorLayer = layer instanceof VectorLayer;
+            console.log("isVectorLayer", isVectorLayer);
+            const f = feature as Feature;
+            const selIndex = selected.indexOf(f);
+            if (selIndex < 0) {
+                console.log("push");
+                selected.push(f);
+
+                // Does not work for WebGLVectorLayer
+                if (isVectorLayer)
+                    f.setStyle(highlightStyle);
+            } else {
+                console.log("delete");
+                selected.splice(selIndex, 1);
+
+                // Does not work for WebGLVectorLayer
+                if (isVectorLayer)
+                    f.setStyle();
+            }
+        });
+
+        const output = selected.map(f => { return f.getProperties(); });
+        console.log(output);
+    });
+}
+
+export { addSelectFeaturesToMap };