refactor(ol-zone-control): pass through original Options and updated docs

Author: d-koppenhagen

docs/componentsguide/mapcontrols/zone/index.md

@@ -2,17 +2,30 @@
 
 > A control to jump from one zone to another.
 
-## Demo
+<script setup>
+import ZoneControlDemo from "@demos/ZoneControlDemo.vue"
+</script>
+<ClientOnly>
+<ZoneControlDemo />
+</ClientOnly>
 
-See [App Demo page for all Map Controls](../../../demo.md)
+## Usage
+
+Add context menu to map
+
+::: code-group
+
+<<< ../../../../src/demos/ZoneControlDemo.vue
+
+:::
 
 ## Properties
 
 ### className
 
 - **Type**: `String`
 
-### zone
+### zones
 
 an array of zone: `{ name, extent (in EPSG:4326) }`
 

src/assets/style.css

@@ -1,16 +1,16 @@
-.ol-zoomslider {
+.ol-viewport .ol-zoomslider {
   top: 7.5em;
   left: 0.5em;
   height: 240px;
   border: 2px solid rgba(0, 60, 136, 0.5);
 }
 
-.ol-overviewmap {
+.ol-viewport .ol-overviewmap {
   left: 3.5em;
   bottom: 2.5em;
 }
 
-.ol-mouse-position {
+.ol-viewport .ol-mouse-position {
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
@@ -19,31 +19,31 @@
   text-align: center;
 }
 
-.ol-rotate {
+.ol-viewport .ol-rotate {
   top: 0.5em;
   right: 2.5em;
   transition: opacity 0.25s linear, visibility 0s linear;
 }
 
-.ol-layerswitcher-image .ol-layer-hidden {
+.ol-viewport .ol-layerswitcher-image .ol-layer-hidden {
   opacity: 1;
 }
 
-.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
-.ol-overviewmap.ol-uncollapsible button {
+.ol-viewport .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+.ol-viewport .ol-overviewmap.ol-uncollapsible button {
   display: block;
   opacity: 0;
 }
 
-.ol-collapsed {
+.ol-viewport .ol-collapsed {
   background-color: rgba(255, 255, 255, 0);
 }
 
-.ol-collapsed:hover {
+.ol-viewport .ol-collapsed:hover {
   background-color: rgba(255, 255, 255, 0);
 }
 
-.ol-layerswitcher-image button {
+.ol-viewport .ol-layerswitcher-image button {
   background-color: transparent;
 }
 

src/components/layers/OlAnimatedClusterLayer.vue

@@ -30,7 +30,6 @@ const props = withDefaults(
   >(),
   {
     ...layersCommonDefaultProps,
-    className: "ol-layer",
     opacity: 1,
     visible: true,
     animationDuration: 700,

src/components/mapControls/OlZoneControl.vue

@@ -2,22 +2,17 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import Zone from "ol-ext/control/MapZone";
+import MapZone, { type Options, type Zone } from "ol-ext/control/MapZone";
 import { useAttrs } from "vue";
-import type { Layer } from "ol/layer";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { ProjectionLike } from "ol/proj";
 
 const props = withDefaults(
-  defineProps<{
-    className?: string;
-    zones?: Zone[];
-    layer?: Layer | ((zone: Zone) => Layer);
-    projection?: ProjectionLike;
-    centerOnClick?: boolean;
-  }>(),
+  defineProps<
+    Omit<Options, "className" | "zone"> & { className: string; zones: Zone[] }
+  >(),
   {
+    className: "ol-mapzone",
     projection: "EPSG:3857",
     centerOnClick: true,
   }
@@ -26,7 +21,7 @@ const props = withDefaults(
 const attrs = useAttrs();
 const { properties } = usePropsAsObjectProperties(props);
 
-const { control } = useControl(Zone, properties, attrs);
+const { control } = useControl(MapZone, properties, attrs);
 
 defineExpose({
   control,

src/demos/AppDemo.vue

@@ -414,16 +414,19 @@ const animationPath = ref(null);
 
 const zones = [
   {
-    title: "Turkey",
-    extent: [17.952, 46.241, 52.449, 31.222],
+    title: "France",
+    extent: [
+      -5.318421740712579, 41.16082274292913, 9.73284186155716,
+      51.21957336557702,
+    ],
   },
   {
-    title: "Cyprus",
-    extent: [31.2836, 36.1623, 35.5957, 34.1823],
+    title: "Turkey",
+    extent: [22.473435, 34.465842, 43.40239, 42.56525],
   },
   {
-    title: "Brazil",
-    extent: [-120.32, 22.76, 17.67, -47.52],
+    title: "Germany",
+    extent: [-0.101752, 47.49888, 20.827203, 54.043465],
   },
 ];
 

src/demos/ZoneControlDemo.vue

@@ -0,0 +1,58 @@
+<template>
+  <ol-map
+    ref="map"
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :rotation="rotation"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-zone-control
+      v-if="jawgLayer?.tileLayer"
+      :zones="zones"
+      :projection="projection"
+      :layer="jawgLayer.tileLayer"
+    >
+    </ol-zone-control>
+
+    <ol-tile-layer ref="jawgLayer" title="JAWG">
+      <ol-source-xyz
+        crossOrigin="anonymous"
+        url="https://c.tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=87PWIbRaZAGNmYDjlYsLkeTVJpQeCfl2Y61mcHopxXqSdxXExoTLEv7dwqBwSWuJ"
+      />
+    </ol-tile-layer>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
+const jawgLayer = ref(null);
+
+const zones = [
+  {
+    title: "France",
+    extent: [
+      -5.318421740712579, 41.16082274292913, 9.73284186155716,
+      51.21957336557702,
+    ],
+  },
+  {
+    title: "Turkey",
+    extent: [22.473435, 34.465842, 43.40239, 42.56525],
+  },
+  {
+    title: "Germany",
+    extent: [-0.101752, 47.49888, 20.827203, 54.043465],
+  },
+];
+</script>