Maintenance v2.1.0

app-starter/WguAppTemplate.vue

@@ -40,8 +40,8 @@
         <!-- layer loading indicator -->
         <wgu-maploading-status />
         <slot name="wgu-after-map" />
-        <!-- Portal to overlay the map content from an application module -->
-        <portal-target name="map-overlay" />
+        <!-- Teleport to overlay the map content from an application module -->
+        <div id="wgu-map-teleport" />
         <wgu-app-logo />
         <wgu-bglayerswitcher />
         <wgu-overviewmap v-if="overviewMapConfig" v-bind="overviewMapConfig"/>

docs/map-layer-configuration.md

@@ -196,7 +196,19 @@ Additionally every configuration property of [`ol/style/Text`](https://openlayer
       "offsetY": 15,
       "align": "center"
     }
-  }
+  },
+  "columnMapping": {
+    "name": "Name",
+    "email": "Email",
+    "website": "Website"
+  },
+  "selectStyle": {
+    "radius": 10,
+    "strokeColor": "gray",
+    "strokeWidth": 5,
+    "fillColor": "rgb(255, 255, 0, 0.2)"
+  },
+  "doAppendSelectStyle": true
 }
 
 ```

docs/module-configuration.md

@@ -20,7 +20,7 @@ The following properties can be applied to all module types:
 |--------------------|:---------:|---------|
 | **target**         | Where should the button to enable/disable the module be rendered. Valid options are `menu` or `toolbar` | `"target": "menu"` |
 | **win**            | Value to mark if the module has a window as sub component and where to show the module UI elements. Valid options are `floating` and `sidebar`. If the value is omitted, then the module is not associated with a window.  | `"win": "floating"` |
-| icon               | Provide a customized icon for the module. | `"icon": "info"` |
+| icon               | Provide a customized icon for the module. | `"icon": "md:info"` |
 | minimizable        | Indicates whether the module window can be minimized. Only applies if a module window is present as indicated by the `win` parameter. | `"minimizable": true` |
 | closable           | Indicates whether the module window can be closed by a "X" icon in the window's header bar. Only applies if a module window is present as indicated by the `win` parameter. | `"closable": false` |
 | backgroundImage    | Optional background image for the window header. Only applies if a module window is present as indicated by the `win` parameter. | `"backgroundImage": "static/icon/myImage.png"}` |

docs/wegue-configuration.md

@@ -198,11 +198,12 @@ In a Layer configuration a specific tilegrid can be refered to as follows, using
     {
       "type": "XYZ",
       "lid": "brtachtergrondkaart",
-      "name": "WMTS - Topo Basemap - PDOK",
       "url": "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:28992/{z}/{x}/{y}.png",
       "projection": "EPSG:28992",
       "tileGridRef": "dutch_rd",
-      "visible": true
+      "isBaseLayer": true,
+      "visible": true,
+      "crossOrigin": "anonymous"
     }
 ```
 
@@ -364,7 +365,7 @@ The `overviewMap` object supports the following properties:
 
 | Property           | Meaning   | Example |
 |--------------------|:---------:|---------|
-| icon               | Provide a customized map icon. Defaults to `zoom_out_map`.  | `"icon": "zoom_out_map"` |
+| icon               | Provide a customized map icon. Defaults to `md:zoom_out_map`.  | `"icon": "md:zoom_out_map"` |
 | visible            | Specifies whether the overviewMap appears in open or closed state on application start. Defaults to true. | `"visible": true` |
 | rotateWithView     | Whether the control view should rotate with the main map view. Defaults to true. | `"rotateWithView": true` |
 | width              | Width of the overview map panel in viewport coordinates. Defaults to 164px.  | `"width": 164` |
@@ -430,7 +431,9 @@ Example configurations can be found in the `app-starter/static` directory. Below
   "lang": {
     "supported": {
       "en": "English",
-      "de": "Deutsch"
+      "de": "Deutsch",
+      "pt": "Portugues",
+      "fr": "Français"
     },
     "fallback": "en"
   },
@@ -574,8 +577,30 @@ Example configurations can be found in the `app-starter/static` directory. Below
       "visible": false,
       "displayInLayerList": true,
       "legend": true,
-      "opacityControl": true
+      "opacityControl": true,
+      "crossOrigin": "anonymous"
     },
+
+    {
+      "type": "TILEARCGIS",
+      "lid": "test_arcgisrest",
+      "format": "image/jpeg",
+      "url": "https://cartografia.comune.padova.it/server/rest/services/topo/MapServer",
+      "params": {
+        "LAYERS":"show:3,16",
+        "TRANSPARENT": true
+      },
+      "transparent": true,
+      "projection": "EPSG:3003",
+      "attribution": "Comune di padova",
+      "isBaseLayer": false,
+      "visible": false,
+      "displayInLayerList": true,
+      "legend": false,
+      "opacityControl": true,
+      "crossOrigin": "anonymous"
+    },
+
     {
       "type": "IMAGEWMS",
       "lid": "ahocevar-imagewms",
@@ -589,7 +614,8 @@ Example configurations can be found in the `app-starter/static` directory. Below
       "isBaseLayer": false,
       "visible": false,
       "displayInLayerList": true,
-      "opacityControl": true
+      "opacityControl": true,
+      "crossOrigin": "anonymous"
     },
     {
       "type": "VECTORTILE",
@@ -629,13 +655,13 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "wgu-layerlist": {
       "target": "menu",
       "win": "floating",
-      "icon": "layers",
+      "icon": "md:layers",
       "draggable": false
     },
     "wgu-measuretool": {
       "target": "menu",
       "win": "floating",
-      "icon": "photo_size_select_small",
+      "icon": "md:photo_size_select_small",
       "draggable": false,
       "strokeColor": "#c62828",
       "fillColor": "rgba(198,40,40,0.2)",
@@ -647,7 +673,7 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "wgu-infoclick": {
       "target": "menu",
       "win": "floating",
-      "icon": "info",
+      "icon": "md:info",
       "draggable": false,
       "initPos": {
         "left": 8,
@@ -683,19 +709,19 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "wgu-helpwin": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "help"
+      "icon": "md:help"
     },
     "wgu-geolocator": {
       "target": "toolbar"
     },
     "wgu-themeswitcher": {
       "target": "toolbar",
-      "icon": "dark_mode"
+      "icon": "md:dark_mode"
     },
     "wgu-attributetable": {
       "target": "menu",
       "win": "floating",
-      "icon": "table_chart",
+      "icon": "md:table_chart",
       "syncTableMapSelection": true
     },
     "wgu-localeswitcher": {
@@ -704,7 +730,8 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "sample-module": {
       "target": "toolbar",
       "win": "floating",
-      "icon": "star"
+      "icon": "md:star",
+      "closable": false
     }
   }
 }

package.json

@@ -25,7 +25,6 @@
     "canvas-record": "^3.1.0",
     "core-js": "^3.39.0",
     "ol": "10.2.1",
-    "portal-vue": "^3.0.0",
     "proj4": "2.9.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.5.13",

src/assets/css/wegue.css

@@ -88,6 +88,12 @@ html {
 	overflow-y: hidden;  
 }
 
+/* Teleport to overlay the map content from an application module. */
+#wgu-map-teleport * {
+  pointer-events: auto;
+  overflow: visible;
+}
+
 /*
   TODO Review ccs colorization.
   Used to force the on-primary color for solo fields (light theme only).
@@ -189,3 +195,54 @@ html {
   cursor: ew-resize;
   z-index: 10000;
 }
+
+/* Map vuetify utility classes for on-* theme tokens to theme colors. */
+.bg-on-primary {
+  background-color: rgb(var(--v-theme-on-primary)) !important;
+}
+.bg-on-secondary {
+  background-color: rgb(var(--v-theme-on-secondary)) !important;
+}
+.bg-on-surface {
+  background-color: rgb(var(--v-theme-on-surface)) !important;
+}
+.bg-on-background {
+  background-color: rgb(var(--v-theme-on-background)) !important;
+}
+.bg-on-error {
+  background-color: rgb(var(--v-theme-on-error)) !important;
+}
+.bg-on-warning {
+  background-color: rgb(var(--v-theme-on-warning)) !important;
+}
+.bg-on-success {
+  background-color: rgb(var(--v-theme-on-success)) !important;
+}
+.bg-on-info {
+  background-color: rgb(var(--v-theme-on-info)) !important;
+}
+
+.text-on-primary {
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+.text-on-secondary {
+  color: rgb(var(--v-theme-on-secondary)) !important;
+}
+.text-on-surface {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.text-on-background {
+  color: rgb(var(--v-theme-on-background)) !important;
+}
+.text-on-error {
+  color: rgb(var(--v-theme-on-error)) !important;
+}
+.text-on-warning {
+  color: rgb(var(--v-theme-on-warning)) !important;
+}
+.text-on-success {
+  color: rgb(var(--v-theme-on-success)) !important;
+}
+.text-on-info {
+  color: rgb(var(--v-theme-on-info)) !important;
+}

src/components/layerlist/LayerLegendImage.vue

@@ -48,11 +48,12 @@ export default {
      * Returns a URL to the layers legend image.
      */
     legendURL () {
+      const legendUtil = new LayerLegend(this.$appConfig?.legend);
       const options = {
         language: this.$i18n.locale,
         ...this.layer.get('legendOptions')
       };
-      return LayerLegend.getUrl(
+      return legendUtil.getUrl(
         this.layer, this.resolution, options, this.layer.get('legendUrl'));
     }
   }

src/components/localeswitcher/LocaleSwitcher.vue

@@ -8,7 +8,7 @@
         <v-btn
           v-bind="props"
           borderless
-          dense
+          density="default"
           :title="$t('wgu-localeswitcher.title')"
           class="ma-2 wgu-menu-button"
           icon

src/components/modulecore/ModuleCard.vue

@@ -7,7 +7,7 @@
     v-draggable-win="cardDraggable"
   >
     <v-img :src="backgroundImage">
-      <v-toolbar v-bind="toolbarAttr" class="px-4 py-0">
+      <v-toolbar v-bind="toolbarAttr" class="px-4 py-0 text-on-primary">
         <v-icon :icon="icon"></v-icon>
         <v-toolbar-title class="wgu-win-title" :text="$t(moduleName + '.title')"></v-toolbar-title>
         <v-spacer></v-spacer>
@@ -117,7 +117,6 @@ export default {
     toolbarAttr () {
       return this.backgroundImage
         ? {
-            dark: true,
             flat: true,
             color: 'transparent'
           }

src/components/ol/HoverController.js

@@ -108,7 +108,7 @@ export default class HoverController {
 
     // Acquire features for all layers.
     map.getLayers().forEach((layer) => {
-      if (!layer.get('hoverable')) {
+      if (!layer.get('hoverable') || !layer.isVisible()) {
         return;
       }
       const source = layer.getSource();

src/main.js

@@ -6,7 +6,6 @@ import { md } from 'vuetify/iconsets/md';
 import { aliases as defaultAliases, mdi } from 'vuetify/iconsets/mdi';
 import 'vuetify/styles';
 import { createI18nInstance } from './locales/wgu-i18n';
-import PortalVue from 'portal-vue';
 import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import '@mdi/font/css/materialdesignicons.css';
 import 'material-icons/iconfont/material-icons.css';
@@ -209,7 +208,6 @@ const createAppInstance = function (appConfig) {
   const i18n = createVueI18nInstance(effectiveAppConfig);
 
   const app = createApp(WguApp);
-  app.use(PortalVue);
   app.use(vuetify);
   app.use(i18n);