Merge pull request #3962 from nboisteault/attribution

Attribution
3liz · Nov 20, 2023 · 91839cf · 91839cf
2 parents 47d9160 + af0a702
commit 91839cf
Show file tree

Hide file tree

Showing 8 changed files with 2,753 additions and 1,936 deletions.
diff --git a/assets/src/modules/BaseLayersMap.js b/assets/src/modules/BaseLayersMap.js
@@ -5,6 +5,7 @@ import { MapLayerLoadStatus } from '../modules/state/MapLayer.js';
 import olMap from 'ol/Map.js';
 import View from 'ol/View.js';
 import { get as getProjection } from 'ol/proj.js';
+import { Attribution } from 'ol/control.js';
 import ImageWMS from 'ol/source/ImageWMS.js';
 import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
@@ -28,7 +29,9 @@ export default class BaseLayersMap extends olMap {
         const mapProjection = getProjection(qgisProjectProjection);
 
         super({
-            controls: [], // disable default controls
+            controls: [
+                new Attribution({ target: 'attribution-ol', collapsed: false })
+            ],
             interactions: defaultInteractions({
                 dragPan: false,
                 mouseWheelZoom: false
@@ -155,10 +158,22 @@ export default class BaseLayersMap extends olMap {
                 this._hasEmptyBaseLayer = true;
             }
 
-            if(!baseLayer){
+            if (!baseLayer) {
                 continue;
             }
 
+            if (baseLayerState.hasAttribution) {
+                const url = baseLayerState.attribution.url;
+                const title = baseLayerState.attribution.title;
+                let attribution = title;
+
+                if (url) {
+                    attribution = `<a href='${url}' target='_blank'>${title}</a>`;
+                }
+
+                baseLayer.getSource().setAttributions(attribution);
+            }
+
             const visible = mainLizmap.initialConfig.baseLayers.startupBaselayerName === baseLayerState.name;
 
             baseLayer.setProperties({

diff --git a/assets/src/modules/config/Attribution.js b/assets/src/modules/config/Attribution.js
@@ -9,7 +9,10 @@ import { ValidationError } from './../Errors.js';
 import { BaseObjectConfig } from './BaseObject.js';
 
 const attributionProperties = {
-    'title': { type: 'string' },
+    'title': { type: 'string' }
+}
+
+const optionalAttributionProperties = {
     'url': { type: 'string' }
 }
 
@@ -23,7 +26,7 @@ export class AttributionConfig extends BaseObjectConfig {
      * Create an attribution instance based on a config object
      * @param {Object} cfg       - the lizmap config object for attribution
      * @param {String} cfg.title - the attribution title
-     * @param {String} cfg.url   - the attribution url
+     * @param {?String} cfg.url   - the attribution url
      */
     constructor(cfg) {
         if (!cfg || typeof cfg !== "object") {
@@ -34,7 +37,7 @@ export class AttributionConfig extends BaseObjectConfig {
             throw new ValidationError('The `options` in the config is empty!');
         }
 
-        super(cfg, attributionProperties, {})
+        super(cfg, attributionProperties, optionalAttributionProperties)
     }
 
     /**
@@ -49,7 +52,7 @@ export class AttributionConfig extends BaseObjectConfig {
     /**
      * The attribution url
      *
-     * @type {String}
+     * @type {?String}
      **/
     get url() {
         return this._url;

diff --git a/assets/src/modules/config/LayerTree.js b/assets/src/modules/config/LayerTree.js
@@ -324,12 +324,12 @@ export class LayerTreeLayerConfig extends LayerTreeItemConfig {
             return null;
         }
         const attribution = this._wmsCapa.Attribution;
-        if(!attribution.hasOwnProperty('Title') || !attribution.hasOwnProperty('OnlineResource')) {
+        if (!attribution.hasOwnProperty('Title')) {
             return null;
         }
         return new AttributionConfig({
             title: attribution.Title,
-            url: attribution.OnlineResource,
+            url: attribution.hasOwnProperty('OnlineResource') ? attribution.OnlineResource : null,
         });
     }
 }

diff --git a/lizmap/modules/view/templates/map.tpl b/lizmap/modules/view/templates/map.tpl
@@ -75,7 +75,7 @@
       <lizmap-mouse-position></lizmap-mouse-position>
     </div>
     <div id="attribution-box">
-      <span id="attribution"></span>
+      <div id="attribution-ol"></div>
       <img src="{$j_themepath.'css/img/logo_footer.png'}" alt=""/>
     </div>
 

diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
@@ -1946,12 +1946,13 @@ lizmap-mouse-position > div.coords-unit > select{
   background-color : white;
   background-color : rgba(255,255,255,0.7);
   border-top-left-radius: 1em;
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
 }
-#attribution {
-  font-size: 0.75em;
-  line-height: 10px;
-  vertical-align : text-bottom;
-  margin-right : 0.5em;
+#attribution-ol .ol-attribution {
+  position: unset;
+  max-width: none;
 }
 .olLayerGooglePoweredBy.olLayerGoogleV3.gmnoprint {
   display:none;

diff --git a/tests/js-units/node/config/baselayer.test.js b/tests/js-units/node/config/baselayer.test.js
@@ -83,7 +83,7 @@ describe('BaseLayerConfig', function () {
             new BaseLayerConfig('name', {'title': 'title', 'attribution': {'name': 'name'}})
         } catch (error) {
             expect(error.name).to.be.eq('ValidationError')
-            expect(error.message).to.be.eq('The cfg object has not enough properties compared to required!\n- The cfg properties: name\n- The required properties: title,url')
+            expect(error.message).to.be.eq('The properties: `title` are required in the cfg object!')
             expect(error).to.be.instanceOf(ValidationError)
         }
     })