Merge pull request #87 from Geoportail-Luxembourg/GSLUX-659-attributions

GSLUX-659: Display attributions

cypress/e2e/background-selection.cy.ts

@@ -17,25 +17,58 @@ describe('Background selector', () => {
     cy.get('[data-cy="available-bgs"]').find('button').should('not.be.hidden')
   })
 
-  it('updates the layer manager and the map when selecting a background layer', () => {
+  it('has the default background layer on the map', () => {
     cy.window().then(window => {
       const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
       expect(layers[0].get('id')).to.eq(556)
     })
 
-    cy.get('[data-cy="selectedBg"]').find('button').click()
-    cy.get('[data-cy="available-bgs"]')
-      .find('button')
-      .filter('[title*="topo_bw"]')
-      .click()
-    cy.get('.lux-layer-manager-item')
-      .last()
-      .contains('Carte topographique N/B')
+    cy.get('[data-cy="attributionControl"]')
       .should('be.visible')
+      .contains(
+        '© MapTiler © OpenStreetMap contributors for data outside of Luxembourg'
+      )
+  })
 
-    cy.window().then(window => {
-      const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
-      expect(layers[0].get('id')).to.eq(502)
+  describe('When changing to black and white background layer', () => {
+    beforeEach(() => {
+      cy.get('[data-cy="selectedBg"]').find('button').click()
+      cy.get('[data-cy="available-bgs"]')
+        .find('button')
+        .filter('[title*="topo_bw"]')
+        .click()
+    })
+
+    it('updates the layer manager and the map when selecting a background layer', () => {
+      cy.get('.lux-layer-manager-item')
+        .last()
+        .contains('Carte topographique N/B')
+        .should('be.visible')
+
+      cy.window().then(window => {
+        const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
+        expect(layers[0].get('id')).to.eq(502)
+      })
+    })
+
+    it('updates the attribution content', () => {
+      cy.get('[data-cy="attributionControl"]')
+        .should('be.visible')
+        .contains('© B&W custom attribution for test only')
+    })
+  })
+
+  describe('When changing to "Orthophoto 2013" background layer', () => {
+    beforeEach(() => {
+      cy.get('[data-cy="selectedBg"]').find('button').click()
+      cy.get('[data-cy="available-bgs"]')
+        .find('button')
+        .filter('[title*="Orthophoto 2013"]')
+        .click()
+    })
+
+    it('removes the attribution element because layer s attribution is empty', () => {
+      cy.get('[data-cy="attributionControl"]').should('not.exist')
     })
   })
 

cypress/e2e/map/controls.cy.ts

@@ -17,7 +17,14 @@ describe('Map controls', () => {
       cy.get('[data-cy="mapContainer"] .ol-full-screen')
     })
 
-    // TODO: test attribution control
+    it('displays the attribution text', () => {
+      cy.get('[data-cy="attributionControl"]')
+        .should('be.visible')
+        .contains(
+          '© MapTiler © OpenStreetMap contributors for data outside of Luxembourg'
+        )
+    })
+
     // TODO: test Location control
     // TODO: test 3D control
     // TODO: test info bar control

src/__fixtures__/themes.api.fixture.ts

@@ -38600,11 +38600,10 @@ export const themesApiFixture = (): ConfigModel => ({
       id: 556,
       name: 'basemap_2015_global',
       metadata: {
-        attribution:
-          '&copy; <a href="https://www.mapzen.com/rights">CARTO</a>  &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors for data outside of Luxembourg',
-        exclusion: '[31, 32]',
-        legend_name: 'act:roadmap_vt',
-        metadata_id: 'a1fea2a0-e0a0-4e5f-a61d-9b3c3a9426bd',
+        attribution: "&copy; <a href='https://www.maptiler.com/copyright/'>MapTiler</a> &copy; <a href=\"https://openstreetmap.org/copyright\">OpenStreetMap</a> contributors for data outside of Luxembourg",
+        exclusion: "[31, 32]",
+        legend_name: "act:roadmap_vt",
+        metadata_id: "a1fea2a0-e0a0-4e5f-a61d-9b3c3a9426bd"
       },
       dimensions: {},
       type: 'WMTS',
@@ -38618,9 +38617,10 @@ export const themesApiFixture = (): ConfigModel => ({
       id: 502,
       name: 'topo_bw_jpeg',
       metadata: {
-        exclusion: '[35, 45]',
-        legend_name: 'act_topovt_bw',
-        metadata_id: 'b786acc2-b87e-4c7a-aff7-52778357243b',
+        attribution: "&copy; B&W custom attribution for test only",
+        exclusion: "[35, 45]",
+        legend_name: "act_topovt_bw",
+        metadata_id: "b786acc2-b87e-4c7a-aff7-52778357243b"
       },
       dimensions: {},
       type: 'WMTS',
@@ -38634,9 +38634,10 @@ export const themesApiFixture = (): ConfigModel => ({
       id: 529,
       name: 'topogr_global',
       metadata: {
-        exclusion: '[36, 46]',
-        legend_name: 'act_topovt',
-        metadata_id: 'b786acc2-b87e-4c7a-aff7-52778357243b',
+        attribution: "&copy; <a href='https://www.maptiler.com/copyright/'>MapTiler</a> &copy; <a href=\"https://openstreetmap.org/copyright\">OpenStreetMap</a> contributors for data outside of Luxembourg",
+        exclusion: "[36, 46]",
+        legend_name: "act_topovt",
+        metadata_id: "b786acc2-b87e-4c7a-aff7-52778357243b"
       },
       dimensions: {},
       type: 'WMTS',

src/assets/main.css

@@ -24,6 +24,10 @@
     @apply text-default;
   }
 
+  a {
+    @apply text-primary no-underline;
+  }
+
   input[type='range']::-webkit-slider-thumb {
     @apply bg-tertiary h-4 w-4 rounded-full border-tertiary;
     -webkit-appearance: none;

src/components/footer/footer-bar.vue

@@ -101,49 +101,51 @@ const { layersOpen } = storeToRefs(useAppStore())
       class="w-[466px] hidden sm:flex flex-row justify-end text-gray-500 whitespace-nowrap"
     >
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('What\'s new', { ns: 'client' })"
         :link="`https://geoportail.lu/${i18next.language}/questions/whats-new/`"
       >
       </ButtonLink>
       <!--TODO get geonetworkBaseUrl from config-->
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('Geocatalogue', { ns: 'client' })"
         link=""
       >
       </ButtonLink>
       <!--TODO handle feedback links (for different portals?)-->
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('Feedback', { ns: 'client' })"
         link=""
       >
       </ButtonLink>
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('A Propos', { ns: 'client' })"
         :link="`https://www.geoportail.lu/${i18next.language}/propos/`"
       >
       </ButtonLink>
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('Aide', { ns: 'client' })"
         :link="`https://www.geoportail.lu/${i18next.language}/documentation/`"
       >
       </ButtonLink>
       <ButtonLink
-        class="hidden lg:flex"
+        class="hidden lg:flex text-gray-500"
         :label="t('Contact', { ns: 'client' })"
         :link="`https://www.geoportail.lu/${i18next.language}/propos/contactez-nous/`"
       >
       </ButtonLink>
       <ButtonLink
+        class="text-gray-500"
         :label="t('Legalites', { ns: 'client' })"
         :link="`https://www.geoportail.lu/${i18next.language}/propos/mentions-legales/`"
       >
       </ButtonLink>
       <ButtonLink
+        class="text-gray-500"
         :label="t('ACT', { ns: 'client' })"
         :link="`http://www.act.public.lu/`"
       >

src/components/map-controls/attribution-control.vue

@@ -1,23 +1,20 @@
 <script setup lang="ts">
-import Attribution from 'ol/control/Attribution'
-import useControl from '@/composables/control/control.composable'
+import { useMapStore } from '@/stores/map.store'
+import { watchEffect, ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    className?: string
-    collapsed?: boolean
-    collapsible?: boolean
-  }>(),
-  {
-    className: 'geoportailv3-attribution',
-    collapsed: false,
-    collapsible: false,
-  }
-)
+const mapStore = useMapStore()
+const attribution = ref('')
 
-useControl(Attribution, props)
+watchEffect(() => {
+  attribution.value = mapStore.bgLayer?.metadata?.attribution || ''
+})
 </script>
 
 <template>
-  <div v-if="false"></div>
+  <div
+    data-cy="attributionControl"
+    class="absolute bottom-0 z-10 text-[0.8em] px-[4px] text-[#6b818f] bg-[#ffffffb3]"
+    v-if="attribution"
+    v-dompurify-html="attribution"
+  ></div>
 </template>