feat(ol-interaction-synchronize): Add synchronize interaction (#441)

Allows to snychronize between two or more maps
see: https://viglino.github.io/ol-ext/examples/misc/map.interaction.synchronize.html

Author: bmanojlovic

docs/.vitepress/config.ts

@@ -404,6 +404,10 @@ export const config: UserConfig = {
                 text: "ol-interaction-snap",
                 link: "/componentsguide/interactions/snap/",
               },
+              {
+                text: "ol-interaction-synchronize",
+                link: "/componentsguide/interactions/synchronize/",
+              },
               {
                 text: "ol-interaction-transform",
                 link: "/componentsguide/interactions/transform/",

docs/componentsguide/interactions/synchronize/index.md

@@ -0,0 +1,45 @@
+# ol-interaction-synchronize
+
+> Synchronize interaction from ol-ext that allows synchronizing multiple maps
+
+[[toc]]
+
+## Demo
+
+<script setup lang="ts">
+import SynchronizeDemo from "@demos/SynchronizeDemo.vue"
+</script>
+
+<ClientOnly>
+<SynchronizeDemo/>
+</ClientOnly>
+
+## Setup
+
+<!--@include: ../../interactions.plugin.md-->
+
+## Usage
+
+| Plugin Usage                  |             Explicit Import              |
+| ----------------------------- | :--------------------------------------: |
+| `<ol-interaction-synchronize>` | `<Interactions.OlInteractionSynchronize>` |
+
+::: code-group
+
+<<< ../../../../src/demos/SynchronizeDemo.vue
+
+:::
+
+## Properties
+
+### maps
+
+- **Type**: `Array<Map>`
+- **Default**: `[]`
+- **Description**: Array of maps to synchronize with the current map
+
+## Features
+
+- Synchronizes view center, zoom level, and rotation between maps
+- Shows cursor position on all synchronized maps
+- Automatically handles map interactions and updates

src/components/interaction/OlInteractionSynchronize.vue

@@ -0,0 +1,56 @@
+<template>
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted, computed, watch, nextTick } from "vue";
+import Synchronize, { type Options } from "ol-ext/interaction/Synchronize";
+import type Map from "ol/Map";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Options>(), {
+  maps: () => [],
+});
+
+const map = inject<Map>("map");
+const properties = usePropsAsObjectProperties(props);
+
+const synchronize = computed(
+  () =>
+    new Synchronize({
+      ...properties,
+    }),
+);
+
+watch(
+  synchronize,
+  async (newVal, oldVal) => {
+    if (oldVal) map?.removeInteraction(oldVal);
+    await nextTick();
+    if (map?.getTargetElement()) {
+      map.addInteraction(newVal);
+      map.changed();
+    }
+  },
+  { immediate: false }
+);
+
+onMounted(async () => {
+  await nextTick();
+  if (map?.getTargetElement()) {
+    map.addInteraction(synchronize.value);
+  }
+});
+
+onUnmounted(() => {
+  map?.removeInteraction(synchronize.value);
+});
+
+defineExpose({
+  synchronize,
+});
+</script>

src/components/interaction/index.ts

@@ -11,6 +11,7 @@ import OlInteractionPointer from "./OlInteractionPointer.vue";
 import OlInteractionSnap from "./OlInteractionSnap.vue";
 import OlInteractionTransform from "./OlInteractionTransform.vue";
 import OlInteractionMouseWheelZoom from "./OlInteractionMouseWheelZoom.vue";
+import OlInteractionSynchronize from "./OlInteractionSynchronize.vue";
 import type { Vue3OpenlayersGlobalOptions } from "@/types";
 
 function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
@@ -29,6 +30,7 @@ function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("OlInteractionSnap", OlInteractionSnap);
   app.component("OlInteractionTransform", OlInteractionTransform);
   app.component("OlInteractionMouseWheelZoom", OlInteractionMouseWheelZoom);
+  app.component("OlInteractionSynchronize", OlInteractionSynchronize);
 
   if (options) {
     app.provide("ol-options", options);
@@ -55,4 +57,5 @@ export {
   OlInteractionSnap,
   OlInteractionTransform,
   OlInteractionMouseWheelZoom,
+  OlInteractionSynchronize,
 };

src/demos/SynchronizeDemo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="display: flex; gap: 10px;">
+    <div style="width: 400px; height: 300px;">
+      <ol-map ref="map1" :loadTilesWhileAnimating="true" style="height: 100%">
+        <ol-view :center="center" :zoom="zoom" />
+        <ol-tile-layer>
+          <ol-source-osm />
+        </ol-tile-layer>
+        <ol-interaction-synchronize :maps="syncMaps1" />
+      </ol-map>
+    </div>
+
+    <div style="width: 400px; height: 300px;">
+      <ol-map ref="map2" :loadTilesWhileAnimating="true" style="height: 100%">
+        <ol-view :center="center" :zoom="zoom" />
+        <ol-tile-layer>
+          <ol-source-xyz url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        </ol-tile-layer>
+        <ol-interaction-synchronize :maps="syncMaps2" />
+      </ol-map>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+const center = ref([2226389.8158654715, 5465442.183322753]);
+const zoom = ref(6);
+
+const map1 = ref();
+const map2 = ref();
+
+const syncMaps1 = computed(() => map2.value?.map ? [map2.value.map] : []);
+const syncMaps2 = computed(() => map1.value?.map ? [map1.value.map] : []);
+</script>

vite.umd.config.ts

@@ -139,6 +139,7 @@ export default defineConfig({
           "ol-ext/featureanimation/Teleport": "Teleport",
           "ol-ext/featureanimation/Zoom": "Zoom$1",
           "ol-ext/interaction/SelectCluster": "SelectCluster",
+          "ol-ext/interaction/Synchronize": "Synchronize",
           "ol-ext/interaction/Transform": "Transform$1",
           "ol-ext/layer/AnimatedCluster": "AnimatedCluster",
           "ol-ext/style/FlowLine": "FlowLine",