@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/public/assets/logo-mobile.svg

@@ -0,0 +1,9 @@
+<svg id="VCS_Logo_Color_Mobile" data-name="VCS Logo Color Mobile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 39">
+  <path d="M65.15,6.98l-12.49,12.52L36.06,2.85c-.55-.55-1.29-.86-2.06-.85h29.09c.77,0,1.51,.31,2.06,.85,1.12,1.12,1.14,2.95,.03,4.09l-.03,.03Zm-12.49,12.52l-16.6,16.65c-1.14,1.14-2.97,1.14-4.11,0-.55-.54-.85-1.29-.85-2.06V4.92c0-.78,.31-1.52,.85-2.06,1.14-1.14,2.97-1.14,4.11,0l16.6,16.65ZM31.09,4.92v29.16c0,.78,.31,1.52,.85,2.06L2.85,6.98c-1.12-1.12-1.14-2.95-.03-4.09l.03-.03c.55-.55,1.29-.86,2.06-.85h29.09c-.77,0-1.51,.31-2.06,.85-.55,.54-.86,1.29-.86,2.06Zm34.06,31.23c-.55,.55-1.29,.86-2.06,.85h-29.09c.77,0,1.51-.31,2.06-.85l16.6-16.64,12.49,12.52c1.12,1.12,1.14,2.95,.03,4.09l-.03,.03Z" style="fill: #fff; isolation: isolate; opacity: .9; stroke: #fff; stroke-miterlimit: 10; stroke-width: 4px;"/>
+  <g>
+    <path id="Path_274" d="M64.99,7.19l-12.43,12.31L36.05,3.14c-.54-.54-1.28-.84-2.05-.84h28.94c.77,0,1.5,.3,2.05,.84,1.12,1.1,1.13,2.9,.03,4.02l-.03,.03Z" style="fill: #86b110; isolation: isolate; opacity: .9;"/>
+    <path id="Path_273" d="M52.56,19.5l-16.52,16.36c-1.13,1.12-2.96,1.12-4.09,0-.54-.54-.85-1.27-.85-2.03V5.17c0-.76,.31-1.49,.85-2.03,1.13-1.12,2.96-1.12,4.09,0l16.52,16.36Z" style="fill: #005434; isolation: isolate; opacity: .9;"/>
+    <path id="Path_272" d="M31.1,5.17v28.66c0,.76,.31,1.49,.85,2.03L3.01,7.19c-1.12-1.1-1.13-2.9-.03-4.02l.03-.03c.55-.54,1.28-.84,2.05-.84h28.94c-.77,0-1.5,.3-2.05,.84-.54,.53-.85,1.26-.85,2.03Z" style="fill: #409d76; isolation: isolate; opacity: .9;"/>
+    <path id="Path_271" d="M64.99,35.86c-.54,.54-1.28,.84-2.05,.84h-28.94c.77,0,1.5-.3,2.05-.84l16.52-16.36,12.43,12.31c1.12,1.1,1.13,2.9,.03,4.02l-.03,.03Z" style="fill: #00a0ba; isolation: isolate; opacity: .9;"/>
+  </g>
+</svg>

package/public/assets/logo.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="151" height="35.585" viewBox="0 0 151 35.585">
+  <g id="VCS_Logo_Color" transform="translate(0)">
+    <path id="Path_271" d="M245.674,76.716a3,3,0,0,1-2.116.868H213.62a3,3,0,0,0,2.116-.868l17.085-16.924,12.853,12.731A2.943,2.943,0,0,1,245.674,76.716Z" transform="translate(-180.688 -42)" fill="#00a0ba"/>
+    <path id="Path_272" d="M199.938,38.964V68.618a2.944,2.944,0,0,0,.878,2.1L170.878,41.061a2.943,2.943,0,0,1,0-4.193A3,3,0,0,1,173,36h29.938a3,3,0,0,0-2.117.868A2.943,2.943,0,0,0,199.938,38.964Z" transform="translate(-170 -36)" fill="#409d76"/>
+    <path id="Path_273" d="M231.848,53.792,214.764,70.717a3.014,3.014,0,0,1-4.233,0,2.948,2.948,0,0,1-.879-2.1V38.964a2.945,2.945,0,0,1,.879-2.1,3.014,3.014,0,0,1,4.233,0Z" transform="translate(-179.715 -36)" fill="#005434"/>
+    <path id="Path_274" d="M245.674,41.061,232.821,53.792,215.736,36.868A3,3,0,0,0,213.62,36h29.938a3.005,3.005,0,0,1,2.116.868A2.943,2.943,0,0,1,245.674,41.061Z" transform="translate(-180.688 -36)" fill="#86b110"/>
+    <path id="Path_275" d="M276.469,43.932c.18,0,.23.049.2.259l-1.849,6.874c-.442,1.7-.573,1.914-2.406,1.914-1.7,0-1.85-.2-2.325-1.914l-1.915-6.874c-.033-.211.032-.259.212-.259H270c.131,0,.147.049.214.259l1.7,6.453c.164.568.213.648.492.648.344,0,.409-.081.556-.648l1.653-6.453c.049-.211.082-.259.213-.259Z" transform="translate(-194.05 -38)" fill="#409d76"/>
+    <path id="Path_276" d="M283.025,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,283.467,40.13Z" transform="translate(-197.219 -36.76)" fill="#409d76"/>
+    <path id="Path_277" d="M291.515,44c.164.049.262.114.262.292v.989c0,.179-.1.259-.278.244h-1.49c-.982,0-1.277.162-1.277.875v6.226a.216.216,0,0,1-.245.243H287a.216.216,0,0,1-.245-.243V45.9c0-1.929,1.555-2.075,2.766-2.075A10.535,10.535,0,0,1,291.515,44Z" transform="translate(-198.604 -37.973)" fill="#409d76"/>
+    <path id="Path_278" d="M295.885,40.611c.18-.049.278.049.278.227v2.27h1.62c.164,0,.262.082.262.243v1.022a.232.232,0,0,1-.262.259h-1.62v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.229-.259Z" transform="translate(-200.421 -37.159)" fill="#409d76"/>
+    <path id="Path_279" d="M308.785,43.932a.216.216,0,0,1,.245.243v8.269c0,.211-.082.227-.245.259a19.837,19.837,0,0,1-3.65.276c-3.028,0-3.879-.47-3.879-3.859V44.175c0-.162.115-.243.278-.243h1.474c.164,0,.23.082.23.243v4.589c0,2.4.376,2.513,1.915,2.513h1.882v-7.1a.216.216,0,0,1,.245-.243Z" transform="translate(-202.158 -38)" fill="#409d76"/>
+    <path id="Path_280" d="M316.88,49.077c-.867,0-1.261.276-1.261,1.087,0,.924.442,1.151,1.653,1.151a8.923,8.923,0,0,0,1.866-.178V49.077Zm4.239-2.593v5.642a.411.411,0,0,1-.328.47,15.409,15.409,0,0,1-3.683.357c-2.291,0-3.454-.357-3.454-2.707,0-2.059,1.1-2.578,3.11-2.578h2.374v-.844c0-.908-.541-1.3-1.851-1.3H314.6c-.2,0-.246-.049-.246-.243v-.989c0-.194.066-.227.229-.259a14.739,14.739,0,0,1,2.7-.211C320.17,43.824,321.12,44.732,321.12,46.483Z" transform="translate(-205.195 -37.973)" fill="#409d76"/>
+    <path id="Rectangle_510" d="M.325,0h1.33a.325.325,0,0,1,.325.325V12.078a.325.325,0,0,1-.325.325H.326A.326.326,0,0,1,0,12.077V.325A.325.325,0,0,1,.325,0Z" transform="translate(117.969 2.495)" fill="#409d76"/>
+    <path id="Path_281" d="M342.55,44a.262.262,0,0,1,.245.292v.989c0,.162-.082.243-.262.243h-2.57c-1.752,0-1.98.568-1.98,2.854s.229,2.87,1.98,2.87h2.57c.18,0,.262.081.262.243v.989a.263.263,0,0,1-.245.292,17.086,17.086,0,0,1-2.587.179c-3.323,0-3.977-.909-3.977-4.572s.655-4.556,3.977-4.556A16.987,16.987,0,0,1,342.55,44Z" transform="translate(-210.667 -37.973)" fill="#409d76"/>
+    <path id="Path_282" d="M348.821,42.691a.216.216,0,0,1,.245.243v8.48a.216.216,0,0,1-.245.243h-1.49a.216.216,0,0,1-.245-.243v-8.48a.216.216,0,0,1,.245-.243Zm.442-2.561a1.036,1.036,0,0,1-1.179,1.119,1.121,1.121,0,1,1,0-2.237A1.036,1.036,0,0,1,349.263,40.13Z" transform="translate(-213.338 -36.76)" fill="#409d76"/>
+    <path id="Path_283" d="M354.223,40.611c.18-.049.279.049.279.227v2.27h1.62a.228.228,0,0,1,.261.243v1.022a.232.232,0,0,1-.261.259H354.5v4.945c0,.713.212.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.262.262,0,0,1-.245.292,7.384,7.384,0,0,1-1.162.114c-1.277,0-2.6-.032-2.6-1.978V41.243c0-.162.082-.227.23-.259Z" transform="translate(-214.714 -37.159)" fill="#409d76"/>
+    <path id="Path_284" d="M367.2,43.932a.217.217,0,0,1,.246.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.949,17.949,0,0,1-2.766-.179.236.236,0,0,1-.213-.259v-.956c0-.178.066-.243.229-.243h2.636c1.637,0,2.029-.389,2.029-1.67v-.082a12.48,12.48,0,0,1-2.1.147c-3.028,0-3.8-1.022-3.8-4.3V44.175a.216.216,0,0,1,.245-.243h1.49a.216.216,0,0,1,.245.243v4.232c0,2.318.3,2.854,2.128,2.854a13.514,13.514,0,0,0,1.785-.1V44.175a.216.216,0,0,1,.245-.243Z" transform="translate(-216.445 -38)" fill="#409d76"/>
+    <path id="Path_285" d="M275.307,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.261.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.212.7.9.956l2.145.778a2.183,2.183,0,0,1,1.669,2.367v.211c0,1.849-1.243,2.27-3.388,2.27-1.423,0-2.652-.1-3.191-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.175c1.1,0,1.441-.129,1.441-.7v-.162c0-.389-.2-.648-.934-.924l-2.16-.81a2.324,2.324,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.941,16.941,0,0,1,275.307,63.735Z" transform="translate(-194.276 -42.949)" fill="#005434"/>
+    <path id="Path_286" d="M287.859,63.665a.216.216,0,0,1,.245.243v8.2c-.017,2.821-.573,3.842-3.9,3.842a17.956,17.956,0,0,1-2.766-.179.236.236,0,0,1-.213-.259V74.56c0-.178.066-.243.229-.243h2.636c1.637,0,2.03-.389,2.03-1.67v-.081a12.57,12.57,0,0,1-2.1.146c-3.028,0-3.8-1.022-3.8-4.3V63.908a.216.216,0,0,1,.246-.243h1.49a.216.216,0,0,1,.245.243V68.14c0,2.318.294,2.854,2.128,2.854a13.509,13.509,0,0,0,1.784-.1V63.908a.216.216,0,0,1,.246-.243Z" transform="translate(-197.007 -42.977)" fill="#005434"/>
+    <path id="Path_287" d="M299.154,63.735c.164.032.246.114.246.259v.956c0,.162-.082.243-.262.243h-3.012c-.687,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.144.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.065-.259.261-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.947,16.947,0,0,1,299.154,63.735Z" transform="translate(-200.119 -42.949)" fill="#005434"/>
+    <path id="Path_288" d="M305.925,60.343c.18-.049.279.049.279.227v2.27h1.621a.229.229,0,0,1,.262.243V64.1a.233.233,0,0,1-.262.259H306.2v4.945c0,.713.213.859,1.015.859h.72c.2,0,.278.064.278.227v1.07a.263.263,0,0,1-.245.292,7.466,7.466,0,0,1-1.163.113c-1.277,0-2.6-.032-2.6-1.978V60.975c0-.162.082-.227.229-.259Z" transform="translate(-202.881 -42.136)" fill="#005434"/>
+    <path id="Path_289" d="M312.99,67.463h3.748c-.016-1.751-.376-2.2-1.833-2.2C313.383,65.259,313.006,65.713,312.99,67.463Zm5.746.487v.487c0,.307-.1.437-.557.437H312.99c.049,1.718.442,2.107,2.029,2.107h2.8a.216.216,0,0,1,.245.243v1.006a.246.246,0,0,1-.23.275,20.493,20.493,0,0,1-2.93.178c-3.191,0-3.912-.907-3.912-4.555,0-3.664.72-4.573,3.912-4.573C317.982,63.556,318.7,64.432,318.736,67.95Z" transform="translate(-204.544 -42.949)" fill="#005434"/>
+    <path id="Path_290" d="M335.8,67.134l-.033,5.221c0,.162-.066.243-.23.243h-1.489c-.164,0-.229-.081-.229-.243v-4.6c0-2.4-.376-2.513-1.8-2.513a10.087,10.087,0,0,0-1.636.129,6.5,6.5,0,0,1,.245,2.027l-.032,4.961c0,.179-.066.244-.213.244h-1.506a.217.217,0,0,1-.246-.244V67.426c0-2.091-.408-2.172-1.8-2.172h-1.391v7.1a.216.216,0,0,1-.246.243H323.7c-.164,0-.23-.081-.245-.243V64.07c0-.194.082-.227.245-.259a16.721,16.721,0,0,1,2.914-.259,7.382,7.382,0,0,1,2.815.486,9.167,9.167,0,0,1,2.75-.5C334.884,63.535,335.817,64.07,335.8,67.134Z" transform="translate(-207.598 -42.943)" fill="#005434"/>
+    <path id="Path_291" d="M348.214,63.735c.164.032.245.114.245.259v.956c0,.162-.082.243-.262.243h-3.012c-.688,0-1.08.211-1.08.713V66.1c0,.389.213.7.9.956l2.143.778a2.184,2.184,0,0,1,1.67,2.367v.211c0,1.849-1.244,2.27-3.388,2.27-1.424,0-2.652-.1-3.192-.146-.2-.016-.245-.1-.245-.243V71.29c0-.179.066-.259.262-.259h3.176c1.1,0,1.44-.129,1.44-.7v-.162c0-.389-.2-.648-.932-.924l-2.161-.81a2.325,2.325,0,0,1-1.637-2.384v-.324c0-1.767,1.473-2.173,3.519-2.173A16.956,16.956,0,0,1,348.214,63.735Z" transform="translate(-212.139 -42.949)" fill="#005434"/>
+  </g>
+</svg>

package/src/actions/actionHelper.js

@@ -1,7 +1,11 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
 import {
-  Collection, Extent, MapCollection, mercatorProjection, Viewpoint,
+  Collection,
+  Extent,
+  MapCollection,
+  mercatorProjection,
+  Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
@@ -55,7 +59,12 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createToggleAction(actionOptions, windowComponent, windowManager, owner) {
+export function createToggleAction(
+  actionOptions,
+  windowComponent,
+  windowManager,
+  owner,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -90,7 +99,11 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -140,7 +153,9 @@ export function createSearchButtonAction(app) {
   ];
   const destroy = () => {
     destroyAction();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
 
   return { searchAction, destroy };
@@ -153,7 +168,11 @@ export function createSearchButtonAction(app) {
  * @param {WindowManager}  windowManager
  * @returns {(function(): void)|*}
  */
-export function createOverviewMapAction(overviewMap, windowComponent, windowManager) {
+export function createOverviewMapAction(
+  overviewMap,
+  windowComponent,
+  windowManager,
+) {
   const { action, destroy } = createToggleAction(
     {
       name: 'overviewMapToggle',
@@ -180,7 +199,9 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
 
   const destroyAction = () => {
     destroy();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
   return { action, destroy: destroyAction };
 }
@@ -224,9 +245,13 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     callback(event) {
       if (!this.active) {
         this.active = true;
-        const { left, top, width } = event.currentTarget.getBoundingClientRect();
+        const { left, top, width } =
+          event.currentTarget.getBoundingClientRect();
         modalActivator = event.currentTarget;
-        const position = { ...getWindowPositionOptions(left + width, top, app.maps.target), ...windowPositionOptions };
+        const position = {
+          ...getWindowPositionOptions(left + width, top, app.maps.target),
+          ...windowPositionOptions,
+        };
         const state = { ...modalComponent?.state, hideHeader: true };
         app.windowManager.add({ position, ...component, id, state }, owner);
         document.addEventListener('mousedown', handleMouseDown);
@@ -247,7 +272,11 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -283,7 +312,12 @@ export function createLinkAction(actionOptions, url) {
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction}
  */
-export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCollection, mapCollection) {
+export function createGoToViewpointAction(
+  actionOptions,
+  viewpoint,
+  viewpointCollection,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -332,7 +366,11 @@ export function getViewpointFromFeature(feature) {
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
  */
-export function createZoomToFeatureAction(actionOptions, feature, mapCollection) {
+export function createZoomToFeatureAction(
+  actionOptions,
+  feature,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],

package/src/actions/styleSelector.vue

@@ -6,7 +6,9 @@
         :key="index"
         @click.stop="select(item.value)"
       >
-        <v-list-item-title :class="{ 'primary--text': item.value === currentStyleName }">
+        <v-list-item-title
+          :class="{ 'primary--text': item.value === currentStyleName }"
+        >
           {{ item.text }}
         </v-list-item-title>
       </v-list-item>
@@ -31,7 +33,13 @@
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
   import {
-    VChip, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle, VSheet,
+    VChip,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+    VSheet,
   } from 'vuetify/lib';
 
   export default {
@@ -55,11 +63,11 @@
         required: true,
       },
     },
-    setup({ layerName, availableStyles }, { attrs }) {
+    setup(props, { attrs }) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
-      const layer = app.layers.getByKey(layerName);
+      const layer = app.layers.getByKey(props.layerName);
       const currentStyleName = ref(layer.style.name);
       const currentStyleLegend = ref([]);
       const defaultStyle = layer.defaultStyle.name;
@@ -72,7 +80,8 @@
       }
       setStyle(layer.style);
       // TODO error handling if layer is missing or not a feature layer
-      const styleChangedListener = layer.styleChanged.addEventListener(setStyle);
+      const styleChangedListener =
+        layer.styleChanged.addEventListener(setStyle);
       onUnmounted(() => {
         styleChangedListener();
       });
@@ -80,14 +89,15 @@
       const items = computed(() => {
         return [
           { text: 'Default', value: defaultStyle },
-          ...availableStyles.map(s => ({ text: s, value: s })),
+          ...props.availableStyles.map((s) => ({ text: s, value: s })),
         ];
       });
 
       function select(styleName) {
-        const style = styleName === defaultStyle ?
-          layer.defaultStyle :
-          app.styles.getByKey(styleName);
+        const style =
+          styleName === defaultStyle
+            ? layer.defaultStyle
+            : app.styles.getByKey(styleName);
         layer.setStyle(style);
         app.windowManager.remove(attrs['window-state'].id);
       }
@@ -102,5 +112,4 @@
   };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

package/src/application/VcsApp.vue

@@ -1,9 +1,20 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
     <VcsNavbar />
-    <v-container class="vcs-main pa-0" :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }" fluid absolute>
+    <v-container
+      class="vcs-main pa-0"
+      :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }"
+      fluid
+      absolute
+    >
       <template v-if="$vuetify.breakpoint.xs">
-        <img v-if="mobileLogo" :src="mobileLogo" alt="Logo" draggable="false" class="mobile-logo">
+        <img
+          v-if="mobileLogo"
+          :src="mobileLogo"
+          alt="Logo"
+          draggable="false"
+          class="mobile-logo"
+        />
         <div v-else class="company-logo-mobile mobile-logo" />
       </template>
       <VcsButton
@@ -13,53 +24,54 @@
         :icon="attributionAction.icon"
         :active="attributionAction.active"
         @click.stop="attributionAction.callback($event)"
-        small
         class="z-index-1 mobile-attribution-btn"
       />
       <VcsMap :map-id="mapId" />
-      <MapNavigation />
+      <MapNavigation v-if="showMapNavigation" />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
       <NotifierComponent />
     </v-container>
     <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
-      <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
+      <VcsAttributionsFooter
+        :entries="attributionEntries"
+        :attribution-action="attributionAction"
+      />
     </v-footer>
   </v-container>
 </template>
 
 <style scoped lang="scss">
-::v-deep .v-application--wrap {
-  min-height: fit-content;
-}
-.vcs-main {
-  position: absolute;
-  top: 48px;
-  left: 0;
-  right: 0;
-  bottom: 22px;
-}
-
-.vcs-main-xs {
-  top: 0;
-  bottom: 56px;
-}
-
-.mobile-logo {
-  max-height: 40px;
-  max-width: 70px;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
-}
-
-.mobile-attribution-btn{
-  position: fixed;
-  right: 2px;
-  bottom: 56px;
-}
+  ::v-deep .v-application--wrap {
+    min-height: fit-content;
+  }
+  .vcs-main {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 22px;
+  }
+
+  .vcs-main-xs {
+    top: 0;
+    bottom: 56px;
+  }
+
+  .mobile-logo {
+    max-height: 40px;
+    max-width: 70px;
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1;
+  }
 
+  .mobile-attribution-btn {
+    position: fixed;
+    right: 2px;
+    bottom: 56px;
+  }
 </style>
 
 <script>
@@ -69,7 +81,9 @@
     getCurrentInstance,
     onMounted,
     onUnmounted,
-    provide, watch,
+    provide,
+    ref,
+    watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
@@ -80,11 +94,14 @@
   import { vcsAppSymbol } from '../pluginHelper.js';
   import VcsMap from './VcsMap.vue';
   import VcsNavbar from './VcsNavbar.vue';
-  import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
+  import {
+    createMapButtonAction,
+    createToggleAction,
+  } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
-  import CategoryManager from '../manager/categoryManager/CategoryManager.vue';
+  import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
   import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/vcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
@@ -112,7 +129,10 @@
         try {
           plugin.onVcsAppMounted(app);
         } catch (e) {
-          getLogger('VcsUiApp').error(`Error in plugin ${plugin.name} onVcsAppMounted hook`, e);
+          getLogger('VcsUiApp').error(
+            `Error in plugin ${plugin.name} onVcsAppMounted hook`,
+            e,
+          );
         }
       }
     }
@@ -175,7 +195,7 @@
     return () => {
       mapAddedListener();
       mapRemovedListener();
-      Object.values(mapButtonActionDestroy).forEach(cb => cb());
+      Object.values(mapButtonActionDestroy).forEach((cb) => cb());
     };
   }
 
@@ -219,7 +239,7 @@
             action: legendAction,
           },
           vcsAppSymbol,
-          ButtonLocation.TOOL,
+          ButtonLocation.CONTENT,
         );
       }
     };
@@ -229,9 +249,12 @@
      * Adds a button, if legend definitions are available or removes legend otherwise.
      */
     const handleLegend = () => {
-      const layersWithLegend = [...app.layers]
-        .filter(layer => layer.style?.properties?.legend ?? layer.properties?.legend);
-      const stylesWithLegend = [...app.styles].filter(style => style?.properties?.legend);
+      const layersWithLegend = [...app.layers].filter(
+        (layer) => layer.style?.properties?.legend ?? layer.properties?.legend,
+      );
+      const stylesWithLegend = [...app.styles].filter(
+        (style) => style?.properties?.legend,
+      );
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
@@ -256,7 +279,7 @@
     return () => {
       destroy();
       legendDestroy();
-      listeners.forEach(cb => cb());
+      listeners.forEach((cb) => cb());
     };
   }
 
@@ -266,21 +289,22 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
-    const { action: settingsAction, destroy: settingsDestroy } = createToggleAction(
-      {
-        name: 'settings.title',
-        icon: 'mdi-cog',
-        title: 'settings.tooltip',
-      },
-      {
-        id: 'settingsId',
-        component: VcsSettings,
-        state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
-        slot: WindowSlot.DYNAMIC_RIGHT,
-      },
-      app.windowManager,
-      vcsAppSymbol,
-    );
+    const { action: settingsAction, destroy: settingsDestroy } =
+      createToggleAction(
+        {
+          name: 'settings.title',
+          icon: 'mdi-cog',
+          title: 'settings.tooltip',
+        },
+        {
+          id: 'settingsId',
+          component: VcsSettings,
+          state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
     app.navbarManager.add(
       {
         id: 'settingsToggle',
@@ -314,7 +338,10 @@
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
         },
-        component: CategoryManager,
+        component: CollectionManager,
+        provides: {
+          collectionManager: app.categoryManager,
+        },
         slot: WindowSlot.STATIC,
       },
       app.windowManager,
@@ -335,8 +362,10 @@
         app.navbarManager.remove(id);
       }
     };
-    const addedListener = app.categoryManager.added.addEventListener(setupCategories);
-    const removedListener = app.categoryManager.removed.addEventListener(setupCategories);
+    const addedListener =
+      app.categoryManager.added.addEventListener(setupCategories);
+    const removedListener =
+      app.categoryManager.removed.addEventListener(setupCategories);
     setupCategories();
 
     return () => {
@@ -378,7 +407,9 @@
     );
 
     return () => {
-      listeners.forEach((cb) => { cb(); });
+      listeners.forEach((cb) => {
+        cb();
+      });
       listeners.splice(0);
       stopWatching();
     };
@@ -393,25 +424,26 @@
   export function setupAttributions(app) {
     const { entries, destroy } = getAttributions(app);
 
-    const { action: attributionAction, destroy: attributionDestroy } = createToggleAction(
-      {
-        name: 'attributionToggle',
-        icon: 'mdi-chevron-double-right',
-        title: 'footer.attributions.tooltip',
-      },
-      {
-        id: 'attribution',
-        component: VcsAttributions,
-        state: {
-          headerTitle: 'footer.attributions.title',
-          headerIcon: 'mdi-copyright',
+    const { action: attributionAction, destroy: attributionDestroy } =
+      createToggleAction(
+        {
+          name: 'attributionToggle',
+          icon: 'mdi-chevron-double-right',
+          title: 'footer.attributions.tooltip',
         },
-        slot: WindowSlot.DYNAMIC_RIGHT,
-        props: { entries },
-      },
-      app.windowManager,
-      vcsAppSymbol,
-    );
+        {
+          id: 'attribution',
+          component: VcsAttributions,
+          state: {
+            headerTitle: 'footer.attributions.title',
+            headerIcon: 'mdi-copyright',
+          },
+          slot: WindowSlot.DYNAMIC_RIGHT,
+          props: { entries },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
 
     return {
       attributionEntries: entries,
@@ -423,6 +455,28 @@
     };
   }
 
+  export function setupMapNavigation(app) {
+    const showMapNavigation = ref(false);
+
+    const listeners = [
+      app.maps.added.addEventListener(() => {
+        showMapNavigation.value = true;
+      }),
+      app.maps.removed.addEventListener(() => {
+        if (app.maps.size < 1) {
+          showMapNavigation.value = false;
+        }
+      }),
+    ];
+
+    return {
+      showMapNavigation,
+      destroy: () => {
+        listeners.forEach((cb) => cb());
+      },
+    };
+  }
+
   /**
    * The base component to setup the entire application. To embed the VcsApp, use this component.
    * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
@@ -458,8 +512,14 @@
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
-      const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
-      const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
+      const destroyThemingListener = setupUiConfigTheming(
+        app,
+        getCurrentInstance().proxy.$vuetify,
+      );
+      const { attributionEntries, attributionAction, destroyAttributions } =
+        setupAttributions(app);
+      const { showMapNavigation, destroy: destroyMapNavigationListener } =
+        setupMapNavigation(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -478,13 +538,19 @@
         destroyComponentsWindow();
         destroyThemingListener();
         destroyAttributions();
+        destroyMapNavigationListener();
       });
 
       return {
         mapId,
-        mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
+        mobileLogo: computed(
+          () =>
+            app.uiConfig.config.value.mobileLogo ??
+            app.uiConfig.config.value.logo,
+        ),
         attributionEntries,
         attributionAction,
+        showMapNavigation,
       };
     },
   };