diff --git a/src/containers/legend/landcover-legend/component.jsx b/src/containers/legend/landcover-legend/component.jsx new file mode 100644 index 000000000..7c8428ca7 --- /dev/null +++ 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 ( +
+

Land cover types

+
+ {LEGEND_ITEMS.map((item) => ( +
+
+

{item.label}

+
+ ))} +
+
+ ); +} + +export default LandcoverLegend; diff --git a/src/containers/legend/landcover-legend/index.js b/src/containers/legend/landcover-legend/index.js new file mode 100644 index 000000000..f1d269317 --- /dev/null +++ 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 new file mode 100644 index 000000000..7d319570f --- /dev/null +++ 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 index b38431188..f1bb03e76 100644 --- 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 ( {!onboardingType && } + {landcoverBasemap && } diff --git a/src/containers/scenes/data-scene/data-scene-component.jsx b/src/containers/scenes/data-scene/data-scene-component.jsx index 87808c55f..f9b70436c 100644 --- 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 && } - setActiveGlobesMenu(true)} /> import('components/spinner')); @@ -117,8 +115,6 @@ function NrcLandingComponent({ /> )} - {!onboardingType && } - setActiveGlobesMenu(true)} /> 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 index 1c4b90d34..9a9d76978 100644 --- 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} /> )} - {!selectedFeaturedPlace && ( setActiveGlobesMenu(true)} /> diff --git a/src/pages/featured-globe/featured-globe-selectors.js b/src/pages/featured-globe/featured-globe-selectors.js index c13d522e6..8edf9fc11 100644 --- 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 index 78b0805d8..8e3635b99 100644 --- 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 index e93977b1b..65a8f99a9 100644 --- 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 index 25a38235e..a1b866261 100644 --- 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 index f96dcd9a7..935963ac6 100644 --- 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 index 357b7b09f..51eba1137 100644 --- 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; } \ No newline at end of file