feat: add useZoom hook

src/hooks/useZoom.ts

@@ -0,0 +1,64 @@
+import { AnimationOptions as OlViewAnimationOptions } from 'ol/View';
+import {
+  useEffect
+} from 'react';
+
+import useMap from './useMap';
+
+/**
+ * This hook adds an interaction to the map and removes/updates it if the dependency array changes.
+ * It accepts an optional active parameter that toggles the active state of the interaction. If it is undefined the
+ * active state will not get changed.
+ * @param constructor returns an interaction to be added to the map, will be called again, if the interaction needs
+ * to be updated
+ * @param active
+ */
+export const useZoom = (
+  /**
+   * Whether the zoom in shall be animated.
+   */
+  animate: boolean,
+  /**
+   * The delta to zoom when clicked. Defaults to positive `1` essentially zooming-in.
+   * Pass negative numbers to zoom out.
+   */
+  zoom: number,
+  /**
+   * The options for the zoom animation. By default zooming will take 250
+   * milliseconds and an easing which starts fast and then slows down will be
+   * used.
+   */
+  animateOptions?: OlViewAnimationOptions
+) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+    const view = map.getView();
+    if (!view) { // no view, no zooming
+      return undefined;
+    }
+    if (view.getAnimating()) {
+      view.cancelAnimations();
+    }
+
+    if (animate && animateOptions) {
+      const {
+        duration,
+        easing
+      } = animateOptions;
+      const finalOptions = {
+        zoom,
+        duration,
+        easing
+      };
+      view.animate(finalOptions);
+    } else {
+      view.setZoom(zoom);
+    }
+  }, [map, zoom, animate, animateOptions]);
+};
+
+export default useZoom;