Add fit bounds attr to Vector Layer

Author: stfnkth

examples/standalone/layers/geojson_vector_layer.py

@@ -7,7 +7,8 @@
         url=data,
         format=ol.formats.GeoJSON()
     ),
-    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5)
+    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5),
+    fit_bounds=True
 )
 
 m = ol.Map(layers=[ol.BasemapLayer.carto()])

examples/standalone/layers/topojson_vector_layer.py

@@ -7,7 +7,8 @@
         url=data,
         format=ol.formats.TopoJSON()
     ),
-    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5)
+    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5),
+    fit_bounds=True
 )
 
 m = ol.Map()

src/openlayers/js/openlayers.standalone.js

@@ -32,6 +32,7 @@ class TileLayer(Layer): ...
 
 class VectorLayer(Layer):
     style: dict | FlatStyle = default_style()
+    fit_bounds: bool = Field(False, serialization_alias="fitBounds")
 
     @field_validator("style")
     def validate_style(cls, v):

src/openlayers/models/layers.py

@@ -98,7 +98,13 @@ export default class MapWidget {
       layers: baseLayers,
     });
 
+    // events
+    this._map.getLayers().on("add", (e) => {
+      const layer = e.element;
+      console.log("layer add", layer.getProperties());
+    });
     this._map.on("loadend", () => this.updateMetadata());
+
     this._map.getControls().on("propertychange", (e) => {
       this.updateMetadata();
       console.log("control added or removed", this._metadata);
@@ -108,6 +114,7 @@ export default class MapWidget {
       this.updateMetadata();
       console.log("layer added or removed", this._metadata);
     });
+    // ---
 
     // Add controls
     for (let controlDef of mapOptions.controls || []) {
@@ -207,6 +214,16 @@ export default class MapWidget {
 
   addLayer(layerDef: JSONDef): void {
     const layer = parseLayerDef(layerDef);
+    // Fit bounds for VectorSources
+    if (layer.get("fitBounds")) {
+      const source = layer.getSource() as VectorSource;
+      if (source) {
+        source.on("featuresloadend", (e) => {
+          this._map.getView().fit(source.getExtent());
+        });
+      }
+    }
+
     this._map.addLayer(layer);
     /*
     this._metadata.layers.push({