Layers composable

docs/componentsguide/layers/group/index.md

@@ -20,7 +20,7 @@ import TileJSONDemo from "@demos/TileJSONDemo.vue"
 ## Usage
 
 | Plugin Usage       |     Explicit Import     |
-| ------------------ | :---------------------: |
+|--------------------|:-----------------------:|
 | `<ol-layer-group>` | `<Layers.OlLayerGroup>` |
 
 The example below shows how you can apply common styles / behavior on multiple layers.
@@ -42,7 +42,18 @@ This deviating props are described in the section below.
 
 ### Deviating Properties
 
-None.
+#### title
+
+- **Type**: `String`
+
+You can add a title to the group.
+This is relevant if you want the group for example to appear in the [`ol-layerswitcher-control`](../../mapcontrols/layerswitcher/index.md).
+
+#### openInLayerSwitcher
+
+- **Type**: `Boolean`
+
+Setting this property, will result in expanded layers within the group in [`ol-layerswitcher-control`](../../mapcontrols/layerswitcher/index.md).
 
 ## Events
 

docs/componentsguide/mapcontrols/layerswitcher/index.md

@@ -20,7 +20,7 @@ import LayerswitcherControlDemo from "@demos/LayerswitcherControlDemo.vue"
 ## Usage
 
 | Plugin Usage                 |            Explicit Import             |
-| ---------------------------- | :------------------------------------: |
+|------------------------------|:--------------------------------------:|
 | `<ol-layerswitcher-control>` | `<MapControls.OlLayerswitcherControl>` |
 
 ::: code-group
@@ -31,6 +31,8 @@ import LayerswitcherControlDemo from "@demos/LayerswitcherControlDemo.vue"
 
 ## Properties
 
+Please be sure to also check out the properties from [`ol-layer-group`](../../layers/group/index.md) when you want to show grouped layers.
+
 ### selection
 
 enable layer selection when click on the title

docs/pluginsguide/index.md

@@ -3,6 +3,57 @@
 If you like to add a specific component wrapper based on an external
 library deviating from `ol` or `ol-ext`, please follow this guide.
 
+## Layer Plugins
+
+If you like to add a specific map layer, you can create your own component and integrate it.
+Therefore the source component should be placed within a layer component.
+The composable `useLayer` will help you implementing it.
+It will add the layer to the parent layer group, to a parent overview-map component or to the map itself based on usage and your component tree.
+
+The example below demonstrates how a source called `FooLayer` could be implemented:
+
+```vue [FooLayer.vue]
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, shallowRef } from "vue";
+import FooLayer from "ol/layer/FooLayer";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useLayer from "@/composables/useLayer";
+import {
+  layersCommonDefaultProps,
+  type LayersCommonProps,
+} from "@/components/layers/LayersCommonProps";
+
+const props = withDefaults(
+  defineProps<script
+    LayersCommonProps & {
+      myProp?: string;
+    }
+  >(),
+  {
+    ...layersCommonDefaultProps,
+    myProp: "myProp",
+  },
+);
+
+const properties = usePropsAsObjectProperties(props);
+
+const layer = shallowRef(new FooLayer(properties));
+useLayer(layer, props);
+
+provide("layer", layer);
+
+defineExpose({
+  layer,
+});
+</script>
+```
+
 ## Source Plugins
 
 If you like to add a specific map source (e. g. for vector or tile data),

src/components/layers/OlAnimatedClusterLayer.vue

@@ -5,25 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import {
-  inject,
-  provide,
-  onUnmounted,
-  onMounted,
-  watch,
-  shallowRef,
-} from "vue";
+import { inject, provide, watch, shallowRef } from "vue";
 import { Cluster } from "ol/source";
 import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import type LayerGroup from "ol/layer/Group";
 import {
   FEATURE_EVENTS,
   useOpenLayersEvents,
@@ -57,7 +50,6 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
 const properties = usePropsAsObjectProperties(props);
 
@@ -84,36 +76,7 @@ const vectorLayer = shallowRef(
   }),
 );
 
-watch(
-  () => properties,
-  (newValue) => {
-    vectorLayer.value.setProperties(properties);
-
-    for (const key in newValue) {
-      const keyInObj = key as keyof typeof newValue;
-      if (newValue[keyInObj]) {
-        vectorLayer.value.set(key, newValue[keyInObj]);
-      }
-    }
-
-    if (layerGroup) {
-      const layerCollection = layerGroup.getLayers();
-      layerCollection.push(vectorLayer.value);
-      layerGroup.setLayers(layerCollection);
-    }
-  },
-  { deep: true },
-);
-
-onMounted(() => {
-  map?.addLayer(vectorLayer.value);
-  vectorLayer.value.changed();
-  map?.changed();
-});
-
-onUnmounted(() => {
-  map?.removeLayer(vectorLayer.value);
-});
+useLayer(vectorLayer, properties);
 
 provide("vectorLayer", clusterSource);
 provide("stylable", vectorLayer);

src/components/layers/OlAnimatedClusterlayer.vue

@@ -5,25 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import {
-  inject,
-  provide,
-  onUnmounted,
-  onMounted,
-  watch,
-  shallowRef,
-} from "vue";
+import { inject, provide, watch, shallowRef } from "vue";
 import { Cluster } from "ol/source";
 import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import type LayerGroup from "ol/layer/Group";
 import {
   FEATURE_EVENTS,
   useOpenLayersEvents,
@@ -57,7 +50,6 @@ const props = withDefaults(
 );
 
 const map = inject<Map>("map");
-const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
 const properties = usePropsAsObjectProperties(props);
 
@@ -84,36 +76,7 @@ const vectorLayer = shallowRef(
   }),
 );
 
-watch(
-  () => properties,
-  (newValue) => {
-    vectorLayer.value.setProperties(properties);
-
-    for (const key in newValue) {
-      const keyInObj = key as keyof typeof newValue;
-      if (newValue[keyInObj]) {
-        vectorLayer.value.set(key, newValue[keyInObj]);
-      }
-    }
-
-    if (layerGroup) {
-      const layerCollection = layerGroup.getLayers();
-      layerCollection.push(vectorLayer.value);
-      layerGroup.setLayers(layerCollection);
-    }
-  },
-  { deep: true },
-);
-
-onMounted(() => {
-  map?.addLayer(vectorLayer.value);
-  vectorLayer.value.changed();
-  map?.changed();
-});
-
-onUnmounted(() => {
-  map?.removeLayer(vectorLayer.value);
-});
+useLayer(vectorLayer, properties);
 
 provide("vectorLayer", clusterSource);
 provide("stylable", vectorLayer);

src/components/layers/OlHeatmapLayer.vue

@@ -5,23 +5,15 @@
 </template>
 
 <script setup lang="ts">
-import {
-  inject,
-  provide,
-  onUnmounted,
-  onMounted,
-  watch,
-  shallowRef,
-} from "vue";
+import { provide, shallowRef } from "vue";
 import HeatmapLayer from "ol/layer/Heatmap";
 import type { Extent } from "ol/extent";
-import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
-import type LayerGroup from "ol/layer/Group";
 
 type WeightFunction = () => number;
 
@@ -44,38 +36,9 @@ const props = withDefaults(
   },
 );
 
-const map = inject<Map>("map");
-const layerGroup = inject<LayerGroup | null>("layerGroup", null);
-
 const properties = usePropsAsObjectProperties(props);
 const heatmapLayer = shallowRef(new HeatmapLayer(properties));
-
-watch(
-  () => properties,
-  (newValue) => {
-    for (const key in newValue) {
-      const keyInObj = key as keyof typeof newValue;
-      if (newValue[keyInObj]) {
-        heatmapLayer.value.set(key, newValue[keyInObj]);
-      }
-    }
-  },
-  { deep: true },
-);
-
-onMounted(() => {
-  map?.addLayer(heatmapLayer.value);
-
-  if (layerGroup) {
-    const layerCollection = layerGroup.getLayers();
-    layerCollection.push(heatmapLayer.value);
-    layerGroup.setLayers(layerCollection);
-  }
-});
-
-onUnmounted(() => {
-  map?.removeLayer(heatmapLayer.value);
-});
+useLayer(heatmapLayer, properties);
 
 provide("heatmapLayer", heatmapLayer);
 provide("stylable", heatmapLayer);

src/components/layers/OlImageLayer.vue

@@ -5,60 +5,24 @@
 </template>
 
 <script setup lang="ts">
-import { inject, provide, onUnmounted, onMounted, watch, ref } from "vue";
+import { provide, shallowRef } from "vue";
 import ImageLayer from "ol/layer/Image";
-import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
-import type LayerGroup from "ol/layer/Group";
 
 const props = withDefaults(
   defineProps<LayersCommonProps>(),
   layersCommonDefaultProps,
 );
 
-const map = inject<Map>("map");
-const layerGroup = inject<LayerGroup | null>("layerGroup", null);
-
 const properties = usePropsAsObjectProperties(props);
 
-const imageLayer = ref(new ImageLayer(properties));
-
-watch(properties, () => {
-  imageLayer.value.setProperties(properties);
-});
-
-watch(
-  () => props.opacity,
-  (newOpacity: number) => {
-    imageLayer.value.setOpacity(newOpacity);
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.visible,
-  (newVisible: boolean) => {
-    imageLayer.value.setVisible(newVisible);
-  },
-  { immediate: true },
-);
-onMounted(() => {
-  map?.addLayer(imageLayer.value);
-
-  if (layerGroup) {
-    const layerCollection = layerGroup.getLayers();
-    layerCollection.push(imageLayer.value);
-    layerGroup.setLayers(layerCollection);
-  }
-});
-
-onUnmounted(() => {
-  map?.removeLayer(imageLayer.value);
-});
+const imageLayer = shallowRef(new ImageLayer(properties));
+useLayer(imageLayer, properties);
 
 provide("imageLayer", imageLayer.value);
 

src/components/layers/OlLayerGroup.vue

@@ -25,7 +25,13 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<Options & { className?: string }>(),
+  defineProps<
+    Options & {
+      className?: string;
+      openInLayerSwitcher?: boolean;
+      title?: string;
+    }
+  >(),
   layersCommonDefaultProps,
 );