Merge pull request GEOLYTIX#1098 from dbauszus-glx/mapview-attribution

Mapview attribution
cityremade · Jan 30, 2024 · 594f579 · 594f579
2 parents 985d641 + edd9e23
commit 594f579
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 53 deletions.
diff --git a/lib/mapview/_mapview.mjs b/lib/mapview/_mapview.mjs
@@ -1,3 +1,5 @@
+import attribution from './attribution.mjs'
+
 import addLayer from './addLayer.mjs'
 
 import fitView from './fitView.mjs'
@@ -185,36 +187,8 @@ export default (mapview) => {
     units: mapview.locale.ScaleLine === 'imperial' ? 'imperial' : 'metric',
   }))
 
-  // Attribution
-  if (mapview.attribution) {
-
-    if (typeof mapview.attribution !== 'object') {
-      mapview.attribution = {}
-    }
-
-    mapview.attribution.target = mapview.attribution.target
-      || mapview.Map.getTargetElement()
-        .appendChild(mapp.utils.html.node`
-          <div class="attribution-links">`)
-
-    mapview.attribution.check = () => {
-
-      const o = Object.assign({}, mapview.attribution.links || {})
-
-      // Iterate through layers to check whether attribution should be displayed.
-      Object.values(mapview.layers).forEach(layer => {
-        layer.display && layer.attribution && Object.assign(
-          o, layer.attribution)
-      })
-
-      // Render the layer attribution links into the placeholder.
-      mapp.utils.render(mapview.attribution.target,
-        mapp.utils.html`${Object.entries(o)
-          .map(entry => mapp.utils.html`
-              <a target="_blank" href="${entry[1]}">${entry[0]}`)}`)
-
-    }
-  }
+  // Create mapview attribution.
+  attribution(mapview)
 
   // Events
 

diff --git a/lib/mapview/attribution.mjs b/lib/mapview/attribution.mjs
@@ -0,0 +1,38 @@
+export default function attribution(mapview) {
+
+  if (typeof mapview.attribution !== 'object') return;
+
+  if (!mapview.attribution.target) {
+
+    mapview.attribution.node = mapview.target.appendChild(
+      mapp.utils.html.node`<div class="map-attribution">
+        ${mapview.attribution.logo}`)
+
+    mapview.attribution.target = mapview.attribution.node
+      .appendChild(mapp.utils.html.node`<div class="attribution-links">`)
+  }
+
+  mapview.attribution.links ??= {}
+
+  mapview.attribution.check = () => {
+
+    // Create clone of mapview.attribution.links which are always displayed.
+    const links = structuredClone(mapview.attribution.links)
+
+    // Assign layer.attribution for visible to layers to links.
+    Object.values(mapview.layers)
+      .filter(layer => !!layer.display)
+      .filter(layer => !!layer.attribution)
+      .forEach(layer => Object.assign(links, layer.attribution))
+
+    const elements = Object.entries(links)
+      .map(entry => mapp.utils.html`
+      <a target="_blank" href="${entry[1]}">${entry[0]}`)
+
+    // Render all links into mapview.attribution.target.
+    mapp.utils.render(
+      mapview.attribution.target,
+      mapp.utils.html.node`${elements}`)
+
+  }
+}
diff --git a/public/css/_mapp.css b/public/css/_mapp.css
@@ -142,6 +142,18 @@ a > img {
   height: 100%;
 }
 
+.map-attribution {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: 5px;
+  pointer-events: none;
+}
+
 .attribution-links {
   z-index: 999;
   text-align: right;

diff --git a/public/css/mapp.css b/public/css/mapp.css
@@ -135,6 +135,17 @@ body {
 a > img {
   height: 100%;
 }
+.map-attribution {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: 5px;
+  pointer-events: none;
+}
 .attribution-links {
   z-index: 999;
   text-align: right;

diff --git a/public/views/_default.html b/public/views/_default.html
@@ -44,19 +44,7 @@
       position: fixed;
     }
 
-    #Attribution {
-      position: absolute;
-      display: flex;
-      justify-content: space-between;
-      align-items: end;
-      bottom: 0;
-      right: 0;
-      width: 100%;
-      padding: 5px;
-      pointer-events: none;
-    }
-
-    #Attribution > .logo {
+    .map-attribution > .logo {
       pointer-events: auto;
       height: 1em;
     }
@@ -155,7 +143,7 @@
         position: absolute;
       }
 
-      #Attribution {
+      .map-attribution {
         padding-left: 4em;
       }
 
@@ -293,14 +281,9 @@
 <body style="grid-template-rows: auto 0 0;">
 
   <div id="Map">
-    
+
     <div id="OL"></div>
-    <div id="Attribution">
-      <a class="logo" target="_blank" href="https://geolytix.co.uk">
-        <img src="https://geolytix.github.io/public/geolytix_mapp.svg">
-      </a>
-      <div class="attribution-links"></div>
-    </div>
+
   </div>
 
   <div id="mapButton" class="btn-column"></div>

diff --git a/public/views/_default.js b/public/views/_default.js
@@ -296,12 +296,14 @@ window.onload = async () => {
     hooks: true,
     scrollWheelZoom: true,
     attribution: {
-      target: document.querySelector('#Attribution > .attribution-links'),
+      logo: mapp.utils.html.node`
+        <a class="logo" target="_blank" href="https://geolytix.co.uk">
+          <img src="https://geolytix.github.io/public/geolytix_mapp.svg">`,
       links: {
         [`XYZ v${mapp.version}`]: 'https://github.com/GEOLYTIX/xyz',
         ['SHA']: `https://github.com/GEOLYTIX/xyz/commit/${mapp.hash}`,
         Openlayers: 'https://openlayers.org',
-      },
+      }
     },
 
     // mapp.Mapview must be awaited.