WIP for #114 free HTML content header title and AppLogo

src/WguAppTemplate.vue

@@ -33,6 +33,9 @@
         :color="baseColor"
         :draggable="moduleWin.draggable"
         :initPos="moduleWin.initPos"
+        :width="moduleWin.width"
+        :title="moduleWin.title"
+        :icon="moduleWin.icon"
       />
     </template>
 
@@ -63,6 +66,7 @@
   import LayerListWin from './components/layerlist/LayerListWin'
   import InfoClickWin from './components/infoclick/InfoClickWin'
   import MapLoadingStatus from './components/progress/MapLoadingStatus'
+  import FeatureInfoWindow from './components/FeatureInfoWindow'
 
   export default {
     name: 'wgu-app-tpl',
@@ -74,7 +78,8 @@
       'wgu-measuretool-win': MeasureWin,
       'wgu-layerlist-win': LayerListWin,
       'wgu-infoclick-win': InfoClickWin,
-      'wgu-maploading-status': MapLoadingStatus
+      'wgu-maploading-status': MapLoadingStatus,
+      'wgu-feature-info-window-win': FeatureInfoWindow
     },
     data () {
       return {
@@ -121,7 +126,10 @@
             moduleWins.push({
               type: key + '-win',
               draggable: moduleOpts.draggable,
-              initPos: moduleOpts.initPos
+              initPos: moduleOpts.initPos,
+              title: moduleOpts.title,
+              width: moduleOpts.width,
+              icon: moduleOpts.icon
             });
           }
         }

src/components/AppHeader.vue

@@ -10,7 +10,7 @@
     <!-- slot to inject components at the beginning (before title) -->
     <slot name="wgu-tb-start"></slot>
 
-    <v-toolbar-title>{{title}}</v-toolbar-title>
+    <v-toolbar-title><span v-html="title"/></v-toolbar-title>
 
     <!-- slot to inject components after the title text -->
     <slot name="wgu-tb-after-title"></slot>

src/components/AppLogo.vue

@@ -1,13 +1,22 @@
 <template>
+  <div>
+    <!-- Logo content maybe either avatar and/or text -->
+    <v-avatar
+       v-if="logoSrc"
+       :size="logoSize"
+       :tile="true"
+       class="wgu-app-logo"
+      >
+      <img :src="logoSrc" alt="App Logo">
+    </v-avatar>
 
-  <v-avatar
-     v-if="!!logoSrc"
-     :size="logoSize"
-     :tile="true"
-     class="wgu-app-logo"
-    >
-    <img :src="logoSrc" alt="App Logo">
-  </v-avatar>
+    <div
+       v-if="logoText"
+       class="wgu-app-logo"
+      >
+      <span v-html="logoText"/>
+    </div>
+  </div>
 
 </template>
 
@@ -18,7 +27,8 @@ export default {
   data () {
     return {
       logoSrc: this.$appConfig.logo,
-      logoSize: this.$appConfig.logoSize
+      logoSize: this.$appConfig.logoSize,
+      logoText: this.$appConfig.logoText
     }
   }
 }
@@ -27,7 +37,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
 
-  .v-avatar.v-avatar--tile.wgu-app-logo {
+  .v-avatar.v-avatar--tile.wgu-app-logo, div.wgu-app-logo {
     position: absolute;
     z-index: 2;
   }

src/components/FeatureInfoWindow.vue

@@ -2,24 +2,24 @@
 
     <v-card
       class="wgu-feature-infowindow info-card"
-      v-draggable-win
+      v-draggable-win="draggable"
       v-if="this.feature !== null"
-      v-bind:style="{ left: left, top: top }" >
+      v-bind:style="{ left: left, top: top, width: width }" >
 
-        <v-toolbar class="red darken-3 white--text" dark>
+      <v-toolbar :color="color" class="" dark>
           <v-toolbar-side-icon><v-icon>{{icon}}</v-icon></v-toolbar-side-icon>
           <v-toolbar-title>{{title}}</v-toolbar-title>
           <v-spacer></v-spacer>
+          <v-toolbar-side-icon @click="onWinXClose"><v-icon>close</v-icon></v-toolbar-side-icon>
         </v-toolbar>
 
-        <v-card-media v-if="attributes[imageProp]" :src="attributes[imageProp]" height="200px" />
-        <v-card-title primary-title>
-          <div>
-            <h3 v-if="attributes[titleProp]" class="headline mb-0">{{attributes[titleProp]}}</h3>
-          </div>
+        <v-img v-if="attributes[imageProp]" :src="attributes[imageProp]" :width="imageWidth" :height="imageHeight" />
+        <v-card-title v-if="attributes[titleProp]" primary-title>
+            <h3 class="headline mb-0">{{attributes[titleProp]}}</h3>
         </v-card-title>
+        <v-card-text v-if="attributes[descProp]">{{attributes[descProp]}}</v-card-text>
         <v-card-actions>
-          <v-btn flat class="orange--text">More info...</v-btn>
+          <v-btn v-if="attributes[infoUrlProp]" flat color="blue" :href="attributes[infoUrlProp]" target="_blank">{{infoUrlText}}</v-btn>
         </v-card-actions>
     </v-card>
 
@@ -31,34 +31,66 @@ import { WguEventBus } from '../WguEventBus.js';
 import { DraggableWin } from '../directives/DraggableWin.js';
 
 export default {
-  name: 'wgu-feature-info-window',
+  name: 'wgu-feature-info-window-win',
   directives: {
     DraggableWin
   },
   props: {
-    layerId: {type: String, required: true},
-    imageProp: {type: String, required: false},
-    titleProp: {type: String, required: false},
-    icon: {type: String, required: false},
-    title: {type: String, required: false}
+    icon: {type: String, required: false, default: 'info'},
+    color: {type: String, required: false, default: 'red darken-3'},
+    draggable: {type: Boolean, required: false, default: true}
   },
   data () {
     return {
-      // will be filled in mounted
+      // will be filled in when mounted and when feature clicked
+      layers: null,
       feature: null,
       attributes: null,
-      left: '300px',
-      top: '200px'
+      width: null,
+      left: null,
+      top: null,
+      title: 'Feature Info',
+      titleProp: null,
+      imageProp: null,
+      descProp: null,
+      infoUrlProp: null,
+      infoUrlText: null,
+      imageHeight: null,
+      imageWidth: null
     }
   },
   mounted () {
-    var me = this;
+    const config = this.$appConfig.modules['wgu-feature-info-window'] || {};
+    this.layers = config.layers;
+    if (this.layers) {
+      // Using a regular expression to Match layers
+      this.layers.forEach(layer => { layer.layerId = new RegExp(layer.layerId) });
+    }
+    this.left = config.initPos ? this.initPos.left + 'px' : '300px';
+    this.top = config.initPos ? this.initPos.top + 'px' : '200px';
+    this.width = config.width ? config.width + 'px' : '350px';
 
     // listen to selection events of connected layer and apply attributes
-    WguEventBus.$on('map-selectionchange', function (layerId, selected, deselected) {
-      if (me.layerId === layerId) {
-        me.setFeature(selected[0]);
+    WguEventBus.$on('map-selectionchange', (layerId, selected, deselected) => {
+      if (selected.length === 0) {
+        return;
+      }
+      const layer = this.findLayer(layerId);
+      if (!layer) {
+        return;
       }
+      // {...layer}; TODO How to use Object Spread
+      this.layerId = layer.layerId;
+      this.title = layer.title || layer.titleProp || 'Feature Info';
+      this.titleProp = layer.titleProp;
+      this.descProp = layer.descProp;
+      this.imageProp = layer.imageProp;
+      this.imageHeight = layer.imageHeight;
+      this.imageWidth = layer.imageWidth;
+      this.infoUrlProp = layer.infoUrlProp;
+      this.infoUrlText = layer.infoUrlText || 'More info...';
+
+      this.setFeature(selected[0]);
     });
   },
   methods: {
@@ -67,16 +99,22 @@ export default {
      * @param {ol.Feature} feature The new feature
      */
     setFeature (feature) {
-      if (feature) {
-        this.feature = feature;
-        this.attributes = feature.getProperties();
-      } else {
-        this.feature = null;
-        this.attributes = null;
-      }
+      this.feature = feature;
+      this.attributes = this.feature ? this.feature.getProperties() : null;
+    },
+    /**
+     * Find a layer in our target Layer collection by layer name (layerId).
+     * @param {layerId} layerId layer name
+     */
+    findLayer (layerId) {
+      const targetLayerArr = this.layers.filter(layer => layerId.match(layer.layerId));
+      return targetLayerArr.length > 0 ? targetLayerArr[0] : null;
+    },
+    onWinXClose: function () {
+      // this.feature.deselected; TODO: how to deselect Feature on Map?
+      this.setFeature(null);
     }
   }
-
 }
 </script>
 
@@ -85,7 +123,6 @@ export default {
 
   .wgu-feature-infowindow.info-card {
     position: absolute;
-    width: 300px;
     background-color: white;
   }
 

src/components/ol/Map.vue

@@ -120,7 +120,8 @@ export default {
         // if layer is selectable register a select interaction
         if (lConf.selectable) {
           const selectClick = new SelectInteraction({
-            layers: [layer]
+            layers: [layer],
+            style: layer.get('styleSelected') || undefined
           });
           // forward an event if feature selection changes
           selectClick.on('select', function (evt) {

src/factory/Layer.js

@@ -147,6 +147,7 @@ export const LayerFactory = {
         attributions: lConf.attributions
       }),
       style: OlStyleFactory.getInstance(lConf.style),
+      styleSelected: OlStyleFactory.getInstance(lConf.styleSelected),
       hoverable: lConf.hoverable,
       hoverAttribute: lConf.hoverAttribute
     });

static/app-conf-projected.json

@@ -28,6 +28,54 @@
   ],
 
   "mapLayers": [
+    {
+      "type": "VECTOR",
+      "lid": "dutch_windmills",
+      "name": "Dutch Windmills",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_windmills/items",
+      "formatConfig": {
+        "dataProjection": "EPSG:4326"
+       },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/windmill2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/windmill2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
+    {
+      "type": "VECTOR",
+      "lid": "dutch_castles",
+      "name": "Dutch Castles",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_castles/items",
+      "formatConfig": {
+        "dataProjection": "EPSG:4326"
+       },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/castle2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/castle2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
     {
       "type": "WMS",
       "lid": "pdok-natura2000-wms",
@@ -109,6 +157,28 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "darkLayout": true
+    },
+    "wgu-feature-info-window": {
+      "win": true,
+      "draggable": true,
+      "width": 360,
+      "icon": "info",
+      "layers": [
+        {
+          "layerId": "dutch_windmills",
+          "title": "Dutch Windmills",
+          "titleProp": "NAAM",
+          "imageProp": "FOTO_GROOT",
+          "infoUrlProp": "INFOLINK"
+        },
+        {
+          "layerId": "dutch_castles",
+          "title": "Dutch Castles",
+          "titleProp": "naam",
+          "imageProp": "foto_groot",
+          "infoUrlProp": "info_link"
+        }
+      ]
     }
   }