DBC22-6137: Added Esri map attribution

src/frontend/src/App.scss

@@ -559,3 +559,70 @@ button.text-only-btn {
     }
   }
 }
+
+.ol-attribution.attribution-control {
+  right: auto;
+  left: 1rem;
+  bottom: 1rem;
+  max-width: calc(100% - 180px);
+  background: rgba(255, 255, 255, 0.65);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: none;
+    order: 1;
+    margin-top: 4px;
+
+    &:has(span.attribution-control-collapse) {
+      margin-left: 4px;
+    }
+
+    span.ol-attribution {
+      max-width: 100%;
+      text-align: left;
+      font-family: Georgia, Times, serif;
+      font-size: 0.625rem;
+      background: none;
+
+      .svg-inline--fa {
+        width: 10px;
+        height: 10px;
+        color: $Type-Secondary;
+      }
+    }
+  }
+
+  ul {
+    text-align: left;
+
+    li {
+      color: $Type-Secondary;
+    }
+  }
+
+  &.ol-collapsed {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+
+    button {
+
+      span.attribution-control-expand .svg-inline--fa {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  a::after {
+    content: none !important;
+  }
+}

src/frontend/src/Components/map/Map.js

@@ -32,6 +32,7 @@ import {
   faArrowLeft,
   faMap
 } from '@fortawesome/pro-solid-svg-icons';
+import { faCircleInfo } from '@fortawesome/pro-regular-svg-icons';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import Button from 'react-bootstrap/Button';
 import cloneDeep from 'lodash/cloneDeep';
@@ -69,11 +70,12 @@ import ServerErrorPopup from './errors/ServerError';
 import StaleLinkErrorPopup from './errors/StaleLinkError';
 import LocationAccessPopup from './errors/LocationAccessError';
 import overrides from '../map/overrides.js';
+import { faAttributionToggleLabel } from './attributionControlLabels.js';
 
 // Map & geospatial imports
 import { applyStyle } from 'ol-mapbox-style';
 import { fromLonLat, toLonLat, transformExtent } from 'ol/proj';
-import { ScaleLine } from 'ol/control.js';
+import { Attribution, defaults, ScaleLine } from 'ol/control.js';
 import Feature from 'ol/Feature';
 import Map from 'ol/Map';
 import Geolocation from 'ol/Geolocation.js';
@@ -338,6 +340,27 @@ export default function DriveBCMap(props) {
     return () => cancelAnimationFrame(frame);
   }, []);
 
+  const attributionControlRef = useRef(null);
+  if (!attributionControlRef.current) {
+    attributionControlRef.current = new Attribution({
+      className: 'ol-attribution attribution-control',
+      label: faAttributionToggleLabel('expand', faCircleInfo),
+      collapseLabel: faAttributionToggleLabel('collapse', faXmark),
+    });
+  }
+
+  useEffect(() => {
+    const el = attributionControlRef.current?.element;
+    if (!el) return;
+
+    if (!(!isCamDetail && smallScreen)) {
+      el.style.transform = '';
+      return;
+    }
+
+    el.style.transform = `translateY(${drawerY}px)`;
+  }, [isCamDetail, smallScreen, drawerY]);
+
   // ScaleLine
   const scaleLineControl = new ScaleLine({ units: 'metric' });
   const updateScaleLineClass = (openTabs, showRouteObjs) => {
@@ -555,6 +578,13 @@ export default function DriveBCMap(props) {
       headers: { 'Content-Type': 'application/json' },
     }).then(function (response) {
       response.json().then(function (glStyle) {
+        const sourceKeys = Object.keys(glStyle.sources);
+        const autoAttribution =
+          sourceKeys.length > 0 ? glStyle.sources[sourceKeys[0]].attribution : '';
+        const esriPower =
+          "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri | </a>";
+        tileSource.setAttributions([esriPower, autoAttribution]);
+
         // DBC22-2153
         glStyle.metadata['ol:webfonts'] = '/fonts/{font-family}/{fontweight}{-fontstyle}.css';
 
@@ -584,7 +614,11 @@ export default function DriveBCMap(props) {
       layers: [vectorLayer, symbolLayer],
       view: mapView.current,
       moveTolerance: 7,
-      controls: [scaleLineControl],
+      controls: defaults({
+        attribution: false,
+        zoom: false,
+        rotate: false,
+      }).extend([scaleLineControl, attributionControlRef.current]),
     });
 
     geolocation.current = new Geolocation({
@@ -1190,6 +1224,19 @@ export default function DriveBCMap(props) {
               resetClickedStates={() => resetClickedStates(null, clickedFeatureRef, updateClickedFeature)} />
           </div>
         )}
+
+        {(!isCamDetail && smallScreen && mapRef.current) && (
+          <FilterTabs
+          mapLayers={mapLayers}
+          disableFeatures={isCamDetail}
+          enableRoadConditions={true}
+          enableChainUps={true}
+          isCamDetail={isCamDetail}
+          referenceData={referenceData}
+          loadingLayers={loadingLayers}
+          open={openTabs}
+          setOpen={setOpenTabs} />
+          )}
 
         {(!isCamDetail && smallScreen && mapRef.current) && (
           <div className="fixed-to-mobile-group"
@@ -1211,17 +1258,6 @@ export default function DriveBCMap(props) {
               }
               My location
             </Button>
-
-            <FilterTabs
-              mapLayers={mapLayers}
-              disableFeatures={isCamDetail}
-              enableRoadConditions={true}
-              enableChainUps={true}
-              isCamDetail={isCamDetail}
-              referenceData={referenceData}
-              loadingLayers={loadingLayers}
-              open={openTabs}
-              setOpen={setOpenTabs} />
           </div>
         )}
 

src/frontend/src/Components/map/Map.scss

@@ -209,12 +209,7 @@
         position: absolute;
 
         @media (min-width: 576px) {
-          right: 4rem;
-          bottom: 1rem;
-        }
-
-        @media (min-width: 992px) {
-          right: 4rem;
+          right: 10rem;
           bottom: 1rem;
         }
 
@@ -250,7 +245,7 @@
     .fixed-to-mobile-group {
       position: absolute;
       width: 100%;
-      bottom: -8px;
+      bottom: 0;
       z-index: 1;
     }
 
@@ -302,7 +297,7 @@
       &.my-location {
         position: absolute;
         bottom: 1rem;
-        left: 1rem;
+        right: 1rem;
         margin-left: 0;
         transition: margin-left 0.25s ease-in-out;
 
@@ -327,11 +322,6 @@
           top: 1rem;
           right: 1rem;
         }
-
-        @media (max-width: 575px) {
-          top: initial;
-          bottom: 1rem;
-        }
       }
     }
 
@@ -362,7 +352,7 @@
       border-radius: 6px;
       border: 1px solid $Type-Link;
       box-shadow: 0px 1.9368422031402588px 4.3578948974609375px 0px #00000021;
-      bottom: 6rem;
+      bottom: 4rem;
       right: 1rem;
       display: flex;
       flex-direction: column;
@@ -373,10 +363,6 @@
         display: none;
       }
 
-      @media (min-width: 576px) {
-        bottom: 1rem;
-      }
-
       & > .btn {
         margin-bottom: 0;
         background-color: $Surface-tinted;

src/frontend/src/Components/map/attributionControlLabels.js

@@ -0,0 +1,17 @@
+import { icon, toHtml } from '@fortawesome/fontawesome-svg-core';
+
+/**
+ * Build a span for OpenLayers Attribution label / collapseLabel (HTMLElement).
+ * Class names match OpenLayers when className is ol-attribution attribution-control.
+ *
+ * @param {string} kind - 'expand' or 'collapse'
+ * @param {object} iconDef - Font Awesome icon definition
+ * @return {HTMLSpanElement} span with inlined SVG
+ */
+export function faAttributionToggleLabel(kind, iconDef) {
+  const span = document.createElement('span');
+  span.className = `ol-attribution attribution-control-${kind}`;
+  const rendered = icon(iconDef, { classes: ['svg-inline--fa'] });
+  span.innerHTML = toHtml(rendered.abstract[0]);
+  return span;
+}

src/frontend/src/Components/report/ReportMap.js

@@ -7,6 +7,7 @@
   faLocationCrosshairs,
   faPlus,
   faMinus,
+  faCircleInfo,
   faXmark,
   faBridge,
   faPlug,
@@ -27,10 +28,11 @@
 import { get } from '../data/helper';
 import { redLocationMarkup, setLocationPin, setZoomPan } from '../map/helpers';
 import overrides from '../map/overrides.js';
+import { faAttributionToggleLabel } from '../map/attributionControlLabels.js';
 
 // OpenLayers
 import { applyStyle } from 'ol-mapbox-style';
-import { defaults } from 'ol/control.js';
+import { Attribution, defaults } from 'ol/control.js';
 import { fromLonLat, transform, transformExtent } from 'ol/proj';
 import { ImageWMS, Vector as VectorSource } from 'ol/source.js';
 import { Image as ImageLayer, Vector as VectorLayer } from 'ol/layer.js';
@@ -46,7 +48,7 @@
 import './ReportMap.scss';
 
 /* Map loading function */
-function loadReportMap(setActiveFeature, wmsLayer, styles, smallScreen) {
+function loadReportMap(setActiveFeature, wmsLayer, styles, smallScreen, attributionControl) {
   const tileLayer = new VectorTileLayer({
     declutter: true,
     source: new VectorTileSource({
@@ -80,6 +82,14 @@
     response.json().then(function (glStyle) {
       window.glStyle = glStyle;
 
+      const sourceKeys = Object.keys(glStyle.sources);
+      const autoAttribution = sourceKeys.length > 0 ? glStyle.sources[sourceKeys[0]].attribution : '';
+
+      const esriPower = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri | </a>";
+
+      tileLayer.getSource().setAttributions([esriPower, autoAttribution]);
+
+
       // DBC22-2153
       glStyle.metadata['ol:webfonts'] =
         '/fonts/{font-family}/{fontweight}{-fontstyle}.css';
@@ -114,7 +124,10 @@
     target: 'report-map',
     layers: [tileLayer, imageLayer, vectorLayer],
     view: mapViewObj,
-    controls: defaults({ attribution: false, zoom: false }),
+    controls: defaults({
+      attribution: false,
+      zoom: false,
+    }).extend([attributionControl]),
   });
 
   // Register click listener
@@ -156,7 +169,7 @@
   });
 };
 
 export function ReportMap(props) {
   const { wmsLayer, styles } = props;
 
   // Navigation
@@ -174,6 +187,14 @@
   const panel = useRef();
   const mapElement = useRef();
   const drawerRef = useRef();
+  const attributionControlRef = useRef(null);
+  if (!attributionControlRef.current) {
+    attributionControlRef.current = new Attribution({
+      className: 'ol-attribution attribution-control',
+      label: faAttributionToggleLabel('expand', faCircleInfo),
+      collapseLabel: faAttributionToggleLabel('collapse', faXmark),
+    });
+  }
 
   /* States */
   const [activeFeature, setActiveFeature] = useState(null);
@@ -239,11 +260,29 @@
     return () => cancelAnimationFrame(frame);
   }, [activeFeature, largeScreen]);
 
+  useEffect(() => {
+    const el = attributionControlRef.current?.element;
+    if (!el) return;
+
+    if (!smallScreen) {
+      el.style.transform = '';
+      return;
+    }
+
+    el.style.transform = `translateY(${drawerY}px)`;
+  }, [smallScreen, drawerY]);
+
   /* Data function and initialization */
   const loadMap = () => {
     // Run once on startup
     if (isInitialMount.current) {
-      mapRef.current = loadReportMap(setActiveFeature, wmsLayer, styles, smallScreen);
+      mapRef.current = loadReportMap(
+        setActiveFeature,
+        wmsLayer,
+        styles,
+        smallScreen,
+        attributionControlRef.current,
+      );
       mapView.current = mapRef.current.getView();
       toggleMyLocation(mapRef, mapView);
     }

src/frontend/src/Components/report/ReportMap.scss

@@ -369,12 +369,12 @@
         &.my-location {
           position: absolute;
           bottom: 1rem;
-          left: 1rem;
+          right: 1rem;
         }
       }
 
       .expand {
-        bottom: 1rem;
+        bottom: 4rem;
         right: 1rem;
       }
 
@@ -398,7 +398,7 @@
         border-radius: 6px;
         border: 1px solid $Type-Link;
         box-shadow: 0px 1.9368422031402588px 4.3578948974609375px 0px #00000021;
-        bottom: 1rem;
+        bottom: 4rem;
         right: 1rem;
         display: flex;
         flex-direction: column;