GSLUX-756: Display feature info in info panel

.env

@@ -3,10 +3,11 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="/ogcproxywms"
 VITE_PROXYURL_REMOTE="/httpsproxy"
 
-# Urls for metadata, metadata links and legends
+# Urls for metadata, metadata links, legends, feature info
 VITE_GEONETWORK_URL="https://geocatalogue.geoportail.lu/geonetwork/srv"
 VITE_GET_LEGENDS_URL="/legends/get_html"
 VITE_GET_METADATA_URL="/getMetadata"
+VITE_GET_INFO_SERVICE_URL="/getfeatureinfo"
 
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="/mymaps"

.env.development

@@ -3,10 +3,11 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://migration.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://migration.geoportail.lu/httpsproxy"
 
-# Urls for metadata, metadata links and legends
+# Urls for metadata, metadata links, legends, feature info
 VITE_GEONETWORK_URL="https://geocatalogue.geoportail.lu/geonetwork/srv"
 VITE_GET_LEGENDS_URL="https://migration.geoportail.lu/legends/get_html"
 VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
+VITE_GET_INFO_SERVICE_URL="https://migration.geoportail.lu/getfeatureinfo"
 
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps" # !!! use prod because of CORS

.env.e2e

@@ -3,10 +3,11 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
 
-# Urls for metadata, metadata links and legends
+# Urls for metadata, metadata links, legends, feature info
 VITE_GEONETWORK_URL="https://geocatalogue.geoportail.lu/geonetwork/srv"
 VITE_GET_LEGENDS_URL="https://migration.geoportail.lu/legends/get_html"
 VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
+VITE_GET_INFO_SERVICE_URL="https://migration.geoportail.lu/getfeatureinfo"
 
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps" # !!! use prod because of CORS

.env.staging

@@ -3,10 +3,11 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://migration.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://migration.geoportail.lu/httpsproxy"
 
-# Urls for metadata, metadata links and legends
+# Urls for metadata, metadata links, legends, feature info
 VITE_GEONETWORK_URL="https://geocatalogue.geoportail.lu/geonetwork/srv"
 VITE_GET_LEGENDS_URL="https://migration.geoportail.lu/legends/get_html"
 VITE_GET_METADATA_URL="https://migration.geoportail.lu/getMetadata"
+VITE_GET_INFO_SERVICE_URL="https://migration.geoportail.lu/getfeatureinfo"
 
 # Paths for symbols
 VITE_SYMBOL_ICONS_URL="https://migration.geoportail.lu/mymaps"

package.json

@@ -31,6 +31,7 @@
     "bundle/*"
   ],
   "dependencies": {
+    "@braintree/sanitize-url": "^7.1.0",
     "@camptocamp/ogc-client": "^0.3.4",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",

src/App.vue

@@ -24,6 +24,7 @@ import { statePersistorMyMapService } from '@/services/state-persistor/state-per
 import { useAppStore } from '@/stores/app.store'
 import useMap from '@/composables/map/map.composable'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
+import { statePersistorFeatureInfoService } from '@/services/state-persistor/state-persistor-featureinfo.service'
 
 const appStore = useAppStore()
 const mvtStyleService = useMvtStyles()
@@ -37,6 +38,7 @@ statePersistorAppService.bootstrap()
 statePersistorStyleService.bootstrap()
 statePersistorBgLayerService.bootstrap()
 mvtStyleService.initBackgroundsConfigs()
+statePersistorFeatureInfoService.bootstrap()
 
 const {
   embedded,
@@ -87,7 +89,7 @@ onUnmounted(() => window.removeEventListener('resize', map.resize))
         </div>
       </main>
 
-      <footer-bar class="fixed bottom-5 sm:static z-20" />
+      <footer-bar class="fixed bottom-5 sm:static" />
       <alert-notifications />
     </template>
 

src/assets/main.css

@@ -488,6 +488,26 @@
   .lux-legend hr {
     @apply my-2;
   }
+
+  .lux-poi-title {
+    @apply text-title-xl mt-[22px] mb-[11px];
+  }
+  .lux-poi-feature {
+    @apply bg-white bg-opacity-50 m-[5px] p-[10px];
+  }
+  .lux-poi-feature h4 {
+    @apply my-[11px] text-[20px];
+  }
+  .lux-poi-feature label {
+    @apply font-bold mb-[5px];
+  }
+  .lux-poi-feature a {
+    @apply text-black underline;
+  }
+
+  .lux-solarkataster-button {
+    @apply bg-solarkataster w-[200px] h-[100px] bg-[length:196px_96px] bg-no-repeat;
+  }
 }
 
 .fa-solid {

src/components/footer/button-icon.vue

@@ -3,6 +3,7 @@ const props = defineProps<{
   label: string
   icon: string
   active?: boolean
+  displayStar?: boolean
 }>()
 </script>
 
@@ -15,8 +16,8 @@ const props = defineProps<{
       class="block text-[1.7rem] sm:text-[2rem] -mt-1.5 -mb-3 after:font-icons"
       :class="props.active ? 'lux-close-cross' : `after:content-${props.icon}`"
     ></span>
-    <span class="block text-[13px] sm:text-base uppercase">{{
-      props.label
-    }}</span>
+    <span class="block text-[13px] sm:text-base uppercase"
+      >{{ props.label }}<span v-if="props.displayStar">(*)</span></span
+    >
   </button>
 </template>

src/components/footer/footer-bar.vue

@@ -6,6 +6,7 @@ import ButtonLink from './button-link.vue'
 import ToolbarDraw from './toolbar-draw.vue'
 import { useTranslation } from 'i18next-vue'
 import { useAppStore } from '@/stores/app.store'
+import { useFeatureInfoStore } from '@/stores/feature-info.store'
 
 const { t, i18next } = useTranslation()
 const appStore = useAppStore()
@@ -38,6 +39,15 @@ function onClickLayersIcon() {
 
   themeGridOpen.value = false
 }
+
+const featureInfoStore = useFeatureInfoStore()
+const { infoPanelHidden } = storeToRefs(featureInfoStore)
+const { setInfoPanelHidden } = featureInfoStore
+
+function onClickInfoIcon() {
+  toggleInfoOpen()
+  setInfoPanelHidden(false)
+}
 </script>
 <template>
   <footer
@@ -75,7 +85,8 @@ function onClickLayersIcon() {
           :label="t('Infos', { ns: 'client' })"
           icon="infos"
           :active="infoOpen"
-          @click="() => toggleInfoOpen()"
+          :display-star="infoPanelHidden"
+          @click="onClickInfoIcon"
         >
         </button-icon>
       </li>