Add view animation convenience functionality

[silvester-pari]

E.g.

• zoom to coordinates/zoom
• zoom to geoJSON feature (passed as feature)
• zoom to rendered feature via vector/vector tile layer

[santilland]

Please also consider zoom to extent

[silvester-pari]

This could be an animateView property / animate-view attribute (I'd say default to true). If this is set, setting the center and/or setting the zoom would animate instead of "just" setting it. It would need to check in the _changedProperties' (updated` hook) if both of them changed at the same time and do the animation only once.

A basic showcase would be to have a map and then set:

• eoxMap.zoom = 2 (should animate to zoom 2)
• eoxMap.center = [x,y] (should animate to center x y)
• Object.assign(eoxMap, {zoom: 2, center: [x,y]}) (should animate to both zoom and center at the same time)

We could pass some more options to the animateView property, such as:

• true (default duration, default easing)
• { duration: 4000 }
• { "easeIn": false, "easeOut": true }

Regarding features, extent etc. I don't have a clear idea yet...

[silvester-pari]

Following scenarios are thought of:

• setting zoom and/or center: animate view to given zoom/center
• setting extent: animate view to given extent (overrules any zoom or center settings)
• setting layer property fitView: true: animate view to layer extent (overrules anything set before)
• selectInteraction.selectById([id], true/{fitOptions}): animate the view to fit progammatically selected feature(s)

[lubojr]

Just a minor consideration of setting layer property fitView: true - how would it behave if more layers have this property? First found or the one which was freshly updated?

[santilland]

The last option is once a feature is already loaded in a vector layer, it is possible to zoom to the available features? I guess at least for stac we usually will have a bbox for the collection or item, so the extent should be ok for those cases. I can't think of any more options right now, not sure if being able to pass a feature would make sense.

[StefanBrand]

zoom to rendered feature via vector/vector tile layer

I have a snippet for getting the extent of a feature of a vector tile layer, even if split across multiple tiles:

import { createEmpty as createEmptyExtent, extend } from "ol/extent";

function getFeaturesInMapExtent(eoxMap, layerName) {
  const olMap = eoxMap.map;

  const view = olMap.getView();
  const mapExtent = view.calculateExtent(olMap.getSize());
  const layer = eoxMap.getLayerById(layerName);

  return layer.getSource().getFeaturesInExtent(mapExtent);
}

function mergeExtents(featureParts) {
  return featureParts.reduce((extent, featurePart) => {
    return extend(extent, featurePart.getExtent());
  }, createEmptyExtent());
}

export default function getFeatureExtent(eoxMap, layerName, parcelId) {
  const featureParts = getFeaturesInMapExtent(eoxMap, layerName).filter(
    (f) => f.get("id") == parcelId
  );
  return mergeExtents(featureParts);
}

[RobertOrthofer]

keep in mind that this only works in features in loaded tiles. If you can't guarantee that all tiles of the feature are already loaded, a simple pre-calculated extent is the safer option.

[RobertOrthofer]

Two things are not fully implemented yet:

1.) selectById we do have the method to highlightById, which basically is selectById, and we also have the panIntoFeature option on the select interaction. However, we don't have both together yet.

2.) fitView layer property I'm not sure if we really want this option on the layer, as multiple layers will interfere with this and having an extent on the eoxMap and an overruling extent on the layer seems counter-intuitive. I think it would be best if the application could just control the zoomExtent property

[silvester-pari]

Closed in favor of the two newly created issues.