Legend: Add legend to map

NCEAS · Jun 11, 2024 · 1550291 · 1550291
1 parent 2b5c030
commit 1550291
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 6 deletions.
diff --git a/src/css/map-view.css b/src/css/map-view.css
@@ -1665,3 +1665,99 @@ other class: .ui-slider-range */
   }
 }
 /** END - Expansion panel View. */
+
+/*****************************************************************************************
+ *
+ * Legend
+ *
+ * The full legend that overlays the map
+ *
+ */
+
+.legend-container {
+  z-index: var(--map-z-index-base);
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  border-radius: var(--map-border-radius-big);
+  background: var(--portal-col-neutral-00, var(--map-col-bkg__deprecate));
+  width: 6.875rem;
+
+  .legend-container__header {
+    border-radius: var(--map-border-radius-big);
+    background: var(
+      --portal-col-primary-2,
+      var(--portal-col-bkg-lighter__deprecate)
+    );
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    column-gap: 0.5rem;
+    padding: 0 1rem;
+    cursor: pointer;
+
+    i {
+      font-size: 1rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .legend-container__header-icon {
+      color: var(--portal-col-primary-6);
+    }
+
+    .legend-container__header-expand {
+      color: var(--portal-col-primary-5);
+      display: none;
+    }
+
+    .legend-container__header-name {
+      flex-grow: 1;
+      color: var(--portal-col-primary-8);
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+  }
+
+  .legend-container__content {
+    padding-bottom: 0.5rem;
+    row-gap: 0.5rem;
+    flex-direction: column;
+    display: none;
+
+    .layer-legend {
+      padding: 0 1rem;
+
+      .layer-legend__layer-name {
+        padding: 0.25rem 0;
+        color: var(--portal-col-neutral-6);
+        font-size: 0.8rem;
+        font-weight: 500;
+      }
+
+      .layer-legend__palette {
+        color: var(--portal-col-neutral-8);
+        font-size: 0.8rem;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 12.5rem;
+
+    .legend-container__content,
+    .legend-container__header-expand {
+      display: flex;
+    }
+
+    .legend-container__header {
+      border-radius: var(--map-border-radius-big) var(--map-border-radius-big) 0
+        0;
+    }
+  }
+}
diff --git a/src/css/portal-themes/light.css b/src/css/portal-themes/light.css
@@ -9,6 +9,7 @@
   --portal-col-primary-5: #00a9e4;
   --portal-col-primary-6: #0087b5;
   --portal-col-primary-7: #136682;
+  --portal-col-primary-8: #002d3d;
 
   --portal-col-neutral-1: #f8f9fa;
   --portal-col-neutral-2: #f1f3f4;

diff --git a/src/js/views/maps/MapWidgetContainerView.js b/src/js/views/maps/MapWidgetContainerView.js
@@ -1,10 +1,11 @@
 "use strict";
 
-define(["backbone", "models/maps/Map", "views/maps/CesiumWidgetView"], (
-  Backbone,
-  Map,
-  CesiumWidgetView,
-) => {
+define([
+  "backbone",
+  "models/maps/Map",
+  "views/maps/CesiumWidgetView",
+  "views/maps/legend/LegendContainerView",
+], (Backbone, Map, CesiumWidgetView, LegendContainerView) => {
   /**
    * @class MapWidgetContainerView
    * @classdesc A container for CesiumWidgetView and other map overlays, e.g. lat/lng, legends, etc.
@@ -34,6 +35,7 @@ define(["backbone", "models/maps/Map", "views/maps/CesiumWidgetView"], (
       /** @inheritdoc */
       render() {
         this.renderMapWidget(this.el, this.model);
+        this.renderLegendContainer(this.el, this.model);
       },
 
       /** Renders Cesium map. Currently, this uses the MapWidgetContainerView, but this function could be modified to use an alternative map widget in the future. */
@@ -44,6 +46,15 @@ define(["backbone", "models/maps/Map", "views/maps/CesiumWidgetView"], (
         });
         mapWidget.render();
       },
+
+      /** Renders legend overlay. */
+      renderLegendContainer() {
+        const legendContainerView = new LegendContainerView({
+          model: this.model,
+        });
+        legendContainerView.render();
+        this.$el.append(legendContainerView.el);
+      },
     },
   );
 

diff --git a/test/js/specs/unit/views/maps/MapWidgetContainerView.spec.js b/test/js/specs/unit/views/maps/MapWidgetContainerView.spec.js
@@ -1,8 +1,9 @@
 define([
   "views/maps/MapWidgetContainerView",
   "models/maps/Map",
+  "views/maps/legend/LegendContainerView",
   "/test/js/specs/shared/clean-state.js",
-], (MapWidgetContainerView, Map, cleanState) => {
+], (MapWidgetContainerView, Map, LegendContainerView, cleanState) => {
   const expect = chai.expect;
 
   describe("MapWidgetContainerView Test Suite", () => {
@@ -29,6 +30,16 @@ define([
           state.view.el.getElementsByClassName("cesium-widget"),
         ).to.have.lengthOf(1);
       });
+
+      it("adds a legend to the DOM tree", () => {
+        state.view.render();
+
+        expect(
+          state.view.el.getElementsByClassName(
+            new LegendContainerView({}).className,
+          ),
+        ).to.have.lengthOf(1);
+      });
     });
   });
 });