Landcover legend [HE-813] (#652)

* remove log * remove basemap selector from non necesary pages * add legend * import colors from settings * add responsive to legend * fix max width on tablet * fix responsive width
Vizzuality · Nov 16, 2023 · 1edc0fe · 1edc0fe
1 parent 56110d0
commit 1edc0fe
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 24 deletions.
diff --git a/src/containers/legend/landcover-legend/component.jsx b/src/containers/legend/landcover-legend/component.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import COLORS from 'styles/settings.scss';
+
+import styles from './styles.module';
+
+function LandcoverLegend() {
+  const LEGEND_ITEMS = [
+    { label: 'Water', color: COLORS.water },
+    { label: 'Trees', color: COLORS.trees },
+    { label: 'Flooded Vegetation', color: COLORS['flooded-vegetation'] },
+    { label: 'Crops', color: COLORS.crops },
+    { label: 'Built area', color: COLORS['built-area'] },
+    { label: 'Bare ground', color: COLORS['bare-ground'] },
+    { label: 'Snow/Ice', color: COLORS['snow-ice'] },
+    { label: 'Clouds', color: COLORS.clouds },
+    { label: 'Rangeland', color: COLORS.rangeland },
+  ];
+
+  return (
+    <div className={styles.legendContainer}>
+      <p className={styles.legendTitle}>Land cover types</p>
+      <div className={styles.legendItems}>
+        {LEGEND_ITEMS.map((item) => (
+          <div key={item.label} className={styles.legendItem}>
+            <div
+              className={styles.legendColor}
+              style={{ backgroundColor: item.color }}
+            />
+            <p className={styles.legendItemLabel}>{item.label}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LandcoverLegend;
diff --git a/src/containers/legend/landcover-legend/index.js b/src/containers/legend/landcover-legend/index.js
@@ -0,0 +1,3 @@
+import Component from './component';
+
+export default Component;
diff --git a/src/containers/legend/landcover-legend/styles.module.scss b/src/containers/legend/landcover-legend/styles.module.scss
@@ -0,0 +1,73 @@
+@import 'styles/settings';
+@import 'styles/typography-extends';
+
+.legendContainer {
+  bottom: 28px;
+  display: flex;
+  flex-direction: column;
+  height: 64px;
+  position: absolute;
+  left: $sidebar-width;
+  margin-left: 46px;
+  z-index: $default-z-index;
+  max-width: 500px;
+  @media #{$tablet-portrait} {
+    bottom: 50px;
+    max-width: 250px;
+  }
+
+  @media #{$tablet-landscape} {
+    max-width: 400px;
+  }
+
+
+  @media #{$desktop} {
+    bottom: 16px;
+    max-width: none;
+  }
+
+
+  .legendTitle {
+    @extend %annotation;
+    color: $white;
+    text-transform: uppercase;
+  }
+
+  .legendItems {
+    display: flex;
+    max-width: 550px;
+    flex-wrap: wrap;
+    height: 12px;
+
+    @media #{$desktop} {
+      max-width: 900px;
+    }
+
+
+    .legendItem {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      height: 12px;
+      margin-bottom: 6px;
+
+      @media #{$desktop} {
+        margin-bottom: 0;
+      }
+
+      .legendColor {
+        border-radius: 1px;
+        opacity: 70%;
+        width: 8px;
+        height: 8px;
+        margin-right: 4px;
+      }
+      .legendItemLabel {
+        @extend %annotation;
+        color: $white;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
diff --git a/src/containers/scenes/aoi-scene/component.jsx b/src/containers/scenes/aoi-scene/component.jsx
@@ -4,6 +4,7 @@ import FeatureHighlightLayer from 'containers/layers/feature-highlight-layer';
 import LabelsLayer from 'containers/layers/labels-layer';
 import MaskAndOutlineGraphicLayer from 'containers/layers/mask-and-outline-graphic-layer';
 import TerrainExaggerationLayer from 'containers/layers/terrain-exaggeration-layer';
+import LandcoverLegend from 'containers/legend/landcover-legend';
 import ArcgisLayerManager from 'containers/managers/arcgis-layer-manager';
 import ZoomIntoGeometryManager from 'containers/managers/zoom-into-geometry-manager';
 import BasemapSelector from 'containers/menus/basemap-selector';
@@ -34,6 +35,7 @@ function AoiSceneComponent({
   onboardingStep,
   waitingInteraction,
   activeLayers,
+  landcoverBasemap,
 }) {
   return (
     <Scene
@@ -54,6 +56,7 @@ function AoiSceneComponent({
       <ZoomIntoGeometryManager localGeometry={geometry} />
       <SideMenu activeLayers={activeLayers} />
       {!onboardingType && <BasemapSelector />}
+      {landcoverBasemap && <LandcoverLegend />}
 
       <TerrainExaggerationLayer />
 

diff --git a/src/containers/scenes/data-scene/data-scene-component.jsx b/src/containers/scenes/data-scene/data-scene-component.jsx
@@ -24,8 +24,6 @@ import { getSidebarTabs } from 'constants/ui-params';
 import animationStyles from 'styles/common-animations.module.scss';
 import uiStyles from 'styles/ui.module';
 
-import BasemapSelector from '../../menus/basemap-selector';
-
 import styles from './data-scene-styles.module.scss';
 
 const Spinner = loadable(() => import('components/spinner'));
@@ -140,8 +138,6 @@ function DataSceneComponent({
         />
       )}
 
-      {!onboardingType && <BasemapSelector blur={activeGlobesMenu} />}
-
       <GlobePageIndicator onMouseEnter={() => setActiveGlobesMenu(true)} />
 
       <MapTooltip

diff --git a/src/containers/scenes/nrc-landing-scene/component.jsx b/src/containers/scenes/nrc-landing-scene/component.jsx
@@ -23,8 +23,6 @@ import { LOCAL_SPATIAL_REFERENCE } from 'constants/scenes-constants';
 
 import uiStyles from 'styles/ui.module';
 
-import BasemapSelector from '../../menus/basemap-selector';
-
 import styles from './nrc-landing-scene-styles.module.scss';
 
 const Spinner = loadable(() => import('components/spinner'));
@@ -117,8 +115,6 @@ function NrcLandingComponent({
         />
       )}
 
-      {!onboardingType && <BasemapSelector blur={activeGlobesMenu} />}
-
       <GlobePageIndicator onMouseEnter={() => setActiveGlobesMenu(true)} />
 
       <CountryEntryTooltip

diff --git a/src/pages/data-globe/data-globe-selectors.js b/src/pages/data-globe/data-globe-selectors.js
@@ -7,7 +7,6 @@ import {
   selectGlobeUrlState,
   selectUiUrlState,
 } from 'selectors/location-selectors';
-import { getLandcoverBasemap } from 'selectors/ui-selectors';
 
 import dataSceneConfig from 'scenes/data-scene/data-scene-config';
 
@@ -139,5 +138,4 @@ export default createStructuredSelector({
   onboardingStep: getOnboardingStep,
   waitingInteraction: getOnWaitingInteraction,
   aoiId: getAOIId,
-  landcoverBasemap: getLandcoverBasemap,
 });
diff --git a/src/pages/data-globe/index.js b/src/pages/data-globe/index.js
@@ -15,7 +15,7 @@ import mapStateToProps from './data-globe-selectors';
 const actions = { ...urlActions };
 
 function DataGlobeContainer(props) {
-  const { changeGlobe, landcoverBasemap, sceneSettings } = props;
+  const { changeGlobe, sceneSettings } = props;
 
   const handleGlobeUpdating = (updating) =>
     changeGlobe({ isGlobeUpdating: updating });
@@ -24,7 +24,6 @@ function DataGlobeContainer(props) {
     setBasemap({
       map,
       surfaceColor: '#070710',
-      landcoverBasemap,
       layersArray: sceneSettings.basemap.layersArray,
     });
     activateLayersOnLoad(map, activeLayers, layersConfig);

diff --git a/src/pages/featured-globe/featured-globe-component.jsx b/src/pages/featured-globe/featured-globe-component.jsx
@@ -20,8 +20,6 @@ import Spinner from 'components/spinner';
 
 import uiStyles from 'styles/ui.module';
 
-import BasemapSelector from '../../containers/menus/basemap-selector';
-
 const InfoModal = loadable(() => import('components/modal-metadata'));
 const FeaturedPlaceCard = loadable(() =>
   import('containers/sidebars/featured-place-card')
@@ -96,7 +94,6 @@ function FeaturedGlobe({
             blur={activeGlobesMenu}
           />
         )}
-        <BasemapSelector blur={activeGlobesMenu} />
 
         {!selectedFeaturedPlace && (
           <GlobePageIndicator onMouseEnter={() => setActiveGlobesMenu(true)} />

diff --git a/src/pages/featured-globe/featured-globe-selectors.js b/src/pages/featured-globe/featured-globe-selectors.js
@@ -7,7 +7,6 @@ import {
   selectGlobeUrlState,
   selectUiUrlState,
 } from 'selectors/location-selectors';
-import { getLandcoverBasemap } from 'selectors/ui-selectors';
 
 import initialState from './featured-globe-initial-state';
 
@@ -91,5 +90,4 @@ export default createStructuredSelector({
   isGlobeUpdating: getGlobeUpdating,
   selectedSpecies: getSelectedSpecies,
   openedModal: getHalfEarthModalOpen,
-  landcoverBasemap: getLandcoverBasemap,
 });
diff --git a/src/pages/featured-globe/index.js b/src/pages/featured-globe/index.js
@@ -46,7 +46,6 @@ const featuredGlobeContainer = (props) => {
     isFeaturedPlaceCard,
     isFullscreenActive,
     sceneSettings,
-    landcoverBasemap,
   } = props;
 
   const handleMarkerClick = (viewPoint) => {
@@ -79,7 +78,6 @@ const featuredGlobeContainer = (props) => {
     setBasemap({
       map,
       surfaceColor: '#070710',
-      landcoverBasemap,
       layersArray: sceneSettings.basemap.layersArray,
     });
     activateLayersOnLoad(map, _activeLayers, layersConfig);

diff --git a/src/pages/landing/index.js b/src/pages/landing/index.js
@@ -22,7 +22,6 @@ function LandingContainer(props) {
     setBasemap({
       map,
       surfaceColor: '#070710',
-
       layersArray: [],
     });
     activateLayersOnLoad(map, activeLayers, layersConfig);

diff --git a/src/pages/nrc-landing/index.js b/src/pages/nrc-landing/index.js
@@ -15,7 +15,7 @@ import mapStateToProps from './selectors';
 const actions = { ...urlActions };
 
 function NrcLandingContainer(props) {
-  const { changeGlobe, landcoverBasemap, sceneSettings } = props;
+  const { changeGlobe, sceneSettings } = props;
 
   const handleGlobeUpdating = (updating) =>
     changeGlobe({ isGlobeUpdating: updating });
@@ -24,7 +24,6 @@ function NrcLandingContainer(props) {
     setBasemap({
       map,
       surfaceColor: '#070710',
-      landcoverBasemap,
       layersArray: sceneSettings.basemap.layersArray,
     });
     activateLayersOnLoad(map, activeLayers, layersConfig);

diff --git a/src/pages/nrc-landing/selectors.js b/src/pages/nrc-landing/selectors.js
@@ -7,7 +7,6 @@ import {
   selectGlobeUrlState,
   selectUiUrlState,
 } from 'selectors/location-selectors';
-import { getLandcoverBasemap } from 'selectors/ui-selectors';
 
 import dataSceneConfig from 'scenes/nrc-landing-scene/scene-config';
 
@@ -92,5 +91,4 @@ export default createStructuredSelector({
   onboardingStep: getOnboardingStep,
   waitingInteraction: getOnWaitingInteraction,
   locationRoute: getLocationRoute,
-  landcoverBasemap: getLandcoverBasemap,
 });
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -87,6 +87,18 @@
   $oceania: $tango;
   $south-america: $french-rose;
 
+  // Landcover legend
+  $water: #3972B8;
+  $trees: #175408;
+  $flooded-vegetation: #4FAB6C;
+  $crops: #B89B35;
+  $built-area: #FF0066;
+  $bare-ground: #5B5A48;
+  $snow-ice: #F2FAFF;
+  $clouds: #FAFAFA;
+  $rangeland: #EBE0D3;
+
+
   // Modal
   $modal-light-background: $athens-gray;
 
@@ -227,6 +239,17 @@
     athens-gray: $athens-gray;
     oslo-gray: $oslo-gray;
 
+    // Landcover legend
+    water: $water;
+    trees: $trees;
+    flooded-vegetation: $flooded-vegetation;
+    crops: $crops;
+    built-area: $built-area;
+    bare-ground: $bare-ground;
+    snow-ice: $snow-ice;
+    clouds: $clouds;
+    rangeland: $rangeland;
+
     // FONT FAMILIES
     font-family-serif: $font-family-serif;
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Component from './component';

		export default Component;