feat: zoom to fit the provided features in the viewport (#8082)

sissbruecker · web-flow · commit cbc0f79777ce · 2025-09-29T13:54:05.000+02:00
* feat: zoom to fit the provides features in the viewport

* move new API from MapBase to Map
diff --git a/vaadin-map-flow-parent/vaadin-map-flow-integration-tests/src/main/java/com/vaadin/flow/component/map/ZoomToFitPage.java b/vaadin-map-flow-parent/vaadin-map-flow-integration-tests/src/main/java/com/vaadin/flow/component/map/ZoomToFitPage.java
@@ -0,0 +1,62 @@
+/**
+ * Copyright 2000-2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.map;
+
+import java.util.List;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.component.map.configuration.Coordinate;
+import com.vaadin.flow.component.map.configuration.feature.MarkerFeature;
+import com.vaadin.flow.router.Route;
+
+@Route("vaadin-map/zoom-to-fit")
+public class ZoomToFitPage extends Div {
+    public static final MarkerFeature FEATURE_1 = new MarkerFeature(
+            new Coordinate(-40, 0));
+    public static final MarkerFeature FEATURE_2 = new MarkerFeature(
+            new Coordinate(-41, 0));
+    public static final MarkerFeature FEATURE_3 = new MarkerFeature(
+            new Coordinate(-42, 0));
+    public static final MarkerFeature FEATURE_4 = new MarkerFeature(
+            new Coordinate(40, 0));
+    public static final MarkerFeature FEATURE_5 = new MarkerFeature(
+            new Coordinate(41, 0));
+    public static final MarkerFeature FEATURE_6 = new MarkerFeature(
+            new Coordinate(42, 0));
+
+    public ZoomToFitPage() {
+        Map map = new Map();
+
+        map.getFeatureLayer().addFeature(FEATURE_1);
+        map.getFeatureLayer().addFeature(FEATURE_2);
+        map.getFeatureLayer().addFeature(FEATURE_3);
+
+        map.getFeatureLayer().addFeature(FEATURE_4);
+        map.getFeatureLayer().addFeature(FEATURE_5);
+        map.getFeatureLayer().addFeature(FEATURE_6);
+
+        // Initial zoom to fit
+        map.zoomToFit(List.of(FEATURE_1, FEATURE_2, FEATURE_3), 50, 0);
+
+        // Buttons to fit individual sets
+        NativeButton zoomToFirstSet = new NativeButton("Zoom to fit first set",
+                e -> map.zoomToFit(List.of(FEATURE_1, FEATURE_2, FEATURE_3), 50,
+                        0));
+        zoomToFirstSet.setId("zoom-to-first-set");
+
+        NativeButton zoomToSecondSet = new NativeButton(
+                "Zoom to fit second set",
+                e -> map.zoomToFit(List.of(FEATURE_4, FEATURE_5, FEATURE_6), 50,
+                        0));
+        zoomToSecondSet.setId("zoom-to-second-set");
+
+        add(map, zoomToFirstSet, zoomToSecondSet);
+    }
+}
diff --git a/vaadin-map-flow-parent/vaadin-map-flow-integration-tests/src/test/java/com/vaadin/flow/components/map/ZoomToFitIT.java b/vaadin-map-flow-parent/vaadin-map-flow-integration-tests/src/test/java/com/vaadin/flow/components/map/ZoomToFitIT.java
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2000-2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.components.map;
+
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.map.ZoomToFitPage;
+import com.vaadin.flow.component.map.configuration.Coordinate;
+import com.vaadin.flow.component.map.configuration.feature.MarkerFeature;
+import com.vaadin.flow.component.map.testbench.MapElement;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.tests.AbstractComponentIT;
+
+@TestPath("vaadin-map/zoom-to-fit")
+public class ZoomToFitIT extends AbstractComponentIT {
+
+    private MapElement map;
+
+    @Before
+    public void init() {
+        open();
+        map = $(MapElement.class).waitForFirst();
+    }
+
+    @Test
+    public void initialZoomToFit_showsFirstSet() {
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_1));
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_2));
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_3));
+
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_4));
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_5));
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_6));
+    }
+
+    @Test
+    public void zoomToFitSecondSet_showsSecondSet() {
+        clickElementWithJs("zoom-to-second-set");
+
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_1));
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_2));
+        Assert.assertFalse(isFeatureVisible(map, ZoomToFitPage.FEATURE_3));
+
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_4));
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_5));
+        Assert.assertTrue(isFeatureVisible(map, ZoomToFitPage.FEATURE_6));
+    }
+
+    private boolean isFeatureVisible(MapElement map, MarkerFeature feature) {
+        Coordinate coordinates = feature.getGeometry().getCoordinates();
+        List<Double> extent = map.getMapReference().getView().calculateExtent();
+        return coordinates.getX() >= extent.get(0)
+                && coordinates.getX() <= extent.get(2)
+                && coordinates.getY() >= extent.get(1)
+                && coordinates.getY() <= extent.get(3);
+    }
+}
diff --git a/vaadin-map-flow-parent/vaadin-map-flow/src/main/java/com/vaadin/flow/component/map/Map.java b/vaadin-map-flow-parent/vaadin-map-flow/src/main/java/com/vaadin/flow/component/map/Map.java
@@ -8,6 +8,7 @@
  */
 package com.vaadin.flow.component.map;
 
+import java.util.List;
 import java.util.Objects;
 
 import com.vaadin.flow.component.Tag;
@@ -16,6 +17,7 @@
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.map.configuration.Configuration;
 import com.vaadin.flow.component.map.configuration.Coordinate;
+import com.vaadin.flow.component.map.configuration.Feature;
 import com.vaadin.flow.component.map.configuration.View;
 import com.vaadin.flow.component.map.configuration.feature.MarkerFeature;
 import com.vaadin.flow.component.map.configuration.layer.FeatureLayer;
@@ -27,6 +29,10 @@
 import com.vaadin.flow.component.map.configuration.source.Source;
 import com.vaadin.flow.component.map.configuration.source.VectorSource;
 import com.vaadin.flow.component.map.configuration.source.XYZSource;
+import com.vaadin.flow.internal.JacksonUtils;
+
+import tools.jackson.databind.node.ArrayNode;
+import tools.jackson.databind.node.ObjectNode;
 
 /**
  * Map is a component for displaying geographic maps from various sources. It
@@ -321,4 +327,44 @@ public double getZoom() {
     public void setZoom(double zoom) {
         getView().setZoom(zoom);
     }
+
+    /**
+     * Zooms and pans the map to fit the given features in the viewport. Uses a
+     * default padding of 50 pixels and animation duration of 400 milliseconds.
+     *
+     * @param features
+     *            the features to fit in the viewport
+     */
+    public void zoomToFit(List<Feature> features) {
+        zoomToFit(features, 50, 400);
+    }
+
+    /**
+     * Zooms and pans the map to fit the given features in the viewport.
+     *
+     * @param features
+     *            the features to fit in the viewport
+     * @param padding
+     *            padding in pixels to add around the features
+     * @param duration
+     *            animation duration in milliseconds, 0 for no animation
+     */
+    public void zoomToFit(List<Feature> features, int padding, int duration) {
+        ArrayNode featureIds = JacksonUtils.createArrayNode();
+        features.forEach(feature -> featureIds.add(feature.getId()));
+
+        ObjectNode options = JacksonUtils.createObjectNode();
+        options.put("padding", padding);
+        options.put("duration", duration);
+
+        // In order to allow calling this method before the map, or the view
+        // that contains it, is attached to the UI, this needs to be delayed
+        // with beforeClientResponse to ensure that the client-side connector
+        // has been initialized beforehand.
+        getElement().getNode()
+                .runWhenAttached(ui -> ui.beforeClientResponse(this,
+                        context -> getElement().executeJs(
+                                "this.$connector.zoomToFit($0, $1)", featureIds,
+                                options)));
+    }
 }
diff --git a/vaadin-map-flow-parent/vaadin-map-flow/src/main/resources/META-INF/resources/frontend/vaadin-map/mapConnector.js b/vaadin-map-flow-parent/vaadin-map-flow/src/main/resources/META-INF/resources/frontend/vaadin-map/mapConnector.js
@@ -7,6 +7,7 @@
  * See <https://vaadin.com/commercial-license-and-service-terms> for the full
  * license.
  */
+import { extend } from 'ol/extent';
 import Translate from 'ol/interaction/Translate';
 import { setUserProjection as openLayersSetUserProjection } from 'ol/proj';
 import { register as openLayersRegisterProjections } from 'ol/proj/proj4';
@@ -68,6 +69,44 @@ function init(mapElement) {
           .getArray()
           .forEach((layer) => layer.changed());
       });
+    },
+    /**
+     * Adjust the map view to fit the given features.
+     * @param featureIds array of IDs of the features to fit in the map view
+     * @param options optional options for the OL `View.fit` method
+     */
+    zoomToFit(featureIds, options) {
+      // Synchronization call for the referenced features must run beforehand, but may have
+      // been scheduled after this call. Using a timeout to compensate.
+      setTimeout(() => {
+        const features = featureIds.map((id) => this.lookup.get(id)).filter(Boolean);
+        if (features.length === 0) {
+          return;
+        }
+
+        let extent;
+        features.forEach((feature) => {
+          const featureExtent = feature.getGeometry().getExtent();
+          if (!extent) {
+            extent = featureExtent.slice();
+          } else {
+            extend(extent, featureExtent);
+          }
+        });
+
+        const padding = options?.padding ?? 0;
+        const duration = options?.duration ?? 0;
+        // Viewport size in the OL View instance may not have updated yet to the actual map size,
+        // so provide the size explicitly
+        const bounds = mapElement.getBoundingClientRect();
+        const size = [bounds.width, bounds.height];
+
+        mapElement.configuration.getView().fit(extent, {
+          padding: [padding, padding, padding, padding],
+          duration,
+          size
+        });
+      });
     }
   };
 
diff --git a/vaadin-map-flow-parent/vaadin-map-testbench/src/main/java/com/vaadin/flow/component/map/testbench/MapElement.java b/vaadin-map-flow-parent/vaadin-map-testbench/src/main/java/com/vaadin/flow/component/map/testbench/MapElement.java
@@ -318,6 +318,10 @@ public float getRotation() {
         public void setRotation(float rotation) {
             executor.executeScript(path("setRotation(%s)", rotation));
         }
+
+        public List<Double> calculateExtent() {
+            return (List<Double>) get("calculateExtent()");
+        }
     }
 
     public static class LayerCollectionReference
