Merge pull request #270 from Vizzuality/feature/add-marine-biodiversi…

…ty-layer

Feature/add marine biodiversity layer

.nvmrc

@@ -1 +1 @@
-lts/erbium
+12.21.0

_config.yml

@@ -0,0 +1 @@
+remote_theme: pmarsceill/just-the-docs

docs/layers-update-flow.md

@@ -0,0 +1,70 @@
+# Layers update flow.
+
+Adding layers to the project is just a matter of following some steps to create the proper entry in the `layersConfig` object. This config will be consumed by the code that will take care of creating and adding the layers to the globe (that is the `createLayer` and `addLayerToMap` functions on `utils/layer-manager-utils`).  
+In order to add a layer to the config we need to create some `constants` that will build up the needed data structure.  
+Lets explain the steps with an example on how we would add a layer with fishes priority data 🐟 🐠
+
+- Create a new layer slug on the `constants/layers-slugs` for the layer to be added. This `slug` needs to be shared with the science team people of the project in order to add layer metadata to the metadata service.  
+
+    ```js
+    export const FISHES_PRIORITY = 'fishes-priority';
+    ```
+- `import` the newly created slugs into `constants/layers-urls` and asign it the url string (inside the `LAYERS_URLS` object) from the ArcGIS online service.
+    ```js
+    import {
+      FISHES_PRIORITY
+    } from 'constants/layers-slugs';
+
+    export const LAYERS_URLS = {
+      [FISHES_PRIORITY]: 'https://tiles.arcgis.com/tiles/arcgis/rest/services/Global_marine_fish_prioritisation_TL/MapServer'
+    }
+    ```
+- First of all we need to know if the type of layer we want to add is already present on the `LAYER_TYPES` constant on the `constants/layers-config` file.  
+Find [in this link](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html) the list of the available layer types on the ArcGIS js API.  
+These are the layer types we are currently using in the platform:
+    ```js
+    const LAYER_TYPES = {
+      FEATURE_LAYER: 'FeatureLayer',
+      TILE_LAYER: 'TileLayer',
+      VECTOR_TILE_LAYER: 'VectorTileLayer'
+    }
+    ```
+- Now we are ready to add the layer to the `layerConfig` on `constants/layers-config`. We first need to `import` the layer slug and layers urls to then create the entry for the layer on the config object. 
+    ```js
+    import {
+      FISHES_PRIORITY
+    } from 'constants/layers-slugs';
+
+    export const layersConfig = {
+      [FISHES_PRIORITY]: {
+        title: FISHES_PRIORITY,
+        slug: FISHES_PRIORITY,
+        type: LAYER_TYPES.TILE_LAYER,
+        url: LAYERS_URLS[FISHES_PRIORITY],
+        bbox: null
+      }
+    }
+    ```
+- Note that there's a `bbox` (bounding box) key on the layer object. This field serves to tell the app that this layer is restricted to a certain area of the globe. By providing a set of coordinates to this `bbox` whenever the layer is added to the map the camera will _travel_ to the specified location. Serve as an example the _hummingbirds rarity_ layer config , restricted to the Americas:
+    ```js
+    [HUMMINGBIRDS_RARITY]: {
+      title: HUMMINGBIRDS_RARITY,
+      slug: HUMMINGBIRDS_RARITY,
+      type: LAYER_TYPES.TILE_LAYER,
+      url: LAYERS_URLS[HUMMINGBIRDS_RARITY],
+      bbox: [-164,-40,-35,56]
+    }
+    ```
+- The last step for a layer to be ready to be used on the platform is to add the needed configuration to be consumed by the `legend` component. Different legend configurations are created depending on the category of the layer (_biodiversity_, _human pressures_ or _protected areas_), and those are stored into the associated file in the `constants` folder. In this case, fishes priority layer, the legend config to be updated is located on the `constants/biodiversity-layers-constants` file.
+    ```js
+    import {
+      FISHES_PRIORITY
+    } from 'constants/layers-slugs';
+
+    export const legendConfigs = {
+      [FISHES_PRIORITY]: {
+        ...defaultGradientConfig,
+        title: "Fishes priority"
+      }
+    }
+    ```

src/components/arcgis-layer-manager/arcgis-layer-manager.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { layersConfig } from 'constants/mol-layers-configs';
+import { layersConfig } from 'constants/layers-config';
 import { setLayersOrder, setLayersVisibility, updateSceneLayersBasedOnUserConfig } from 'utils/arcgis-layer-manager-utils';
 import { addActiveLayersToScene } from 'utils/layer-manager-utils';
 

src/components/biodiversity-layers/biodiversity-layers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { loadModules } from 'esri-loader';
-import { layersConfig, LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { layersConfig, LAYERS_CATEGORIES } from 'constants/layers-config';
 import {
   layerManagerToggle,
   replaceLayerFromActiveLayers

src/components/biodiversity-sidebar-card/biodiversity-sidebar-card-component.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import Tabs from 'components/tabs';
 import CategoryBox from 'components/category-box';
 import SidebarCardWrapper from 'components/sidebar-card-wrapper'
 import SidebarCardContent from 'components/sidebar-card-content';
 import BiodiversityLayers from 'components/biodiversity-layers';
-import { biodiversityCategories } from 'constants/mol-layers-configs';
+import { biodiversityCategories } from 'constants/biodiversity-layers-constants';
 import { BIODIVERSITY_TABS } from 'constants/ui-params';
 import styles from './biodiversity-sidebar-card-styles.module.scss';
 

src/components/biodiversity-sidebar-card/biodiversity-sidebar-card-hooks.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import usePrevious from 'hooks/use-previous';
 
 // Select matching or default layers on layer variant switch

src/components/biodiversity-sidebar-card/biodiversity-sidebar-card-styles.module.scss

@@ -10,14 +10,14 @@
   @extend .sharedLayersTogglesContainer;
 
   &.open {
-    height: 1440px;
+    height: 1510px;
 
     &.priorityTab {
-      height: 895px;
+      height: 1100px;
     }
 
     &.richnessTab {
-      height: 1400px;
+      height: 1470px;
     }
   }
 }

src/components/biodiversity-sidebar-card/biodiversity-sidebar-card.js

@@ -5,10 +5,10 @@ import metadataActions from 'redux_modules/metadata';
 import metadataService from 'services/metadata-service';
 import isEmpty from 'lodash/isEmpty';
 import Component from './biodiversity-sidebar-card-component';
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import { batchToggleLayers } from 'utils/layer-manager-utils';
 import mapStateToProps from './biodiversity-sidebar-card-selectors';
-import { biodiversityCategories } from 'constants/mol-layers-configs';
+import { biodiversityCategories } from 'constants/biodiversity-layers-constants';
 import { useSelectLayersOnTabChange } from './biodiversity-sidebar-card-hooks';
 import { BIODIVERSITY_TABS_SLUGS } from 'constants/ui-params';
 const actions = {...metadataActions, ...urlActions};

src/components/human-impact-layers/human-impact-layers-component.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // Constants
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import { humanPressuresLandUse, humanPressuresMarine } from 'constants/human-pressures';
 // Utils
 import { layerManagerToggle } from 'utils/layer-manager-utils';

src/components/human-impact-sidebar-card/human-impact-sidebar-card-component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import CategoryBox from 'components/category-box';
 import HumanImpactLayers from 'components/human-impact-layers';
 import styles from './human-impact-sidebar-card-styles.module.scss'

src/components/landscape-sidebar/conservation-efforts-widget/conservation-efforts-widget.js

@@ -6,7 +6,7 @@ import conservationEffortsActions from 'redux_modules/conservation-efforts';
 import { addLayerAnalyticsEvent, removeLayerAnalyticsEvent } from 'actions/google-analytics-actions';
 import { layerManagerToggle } from 'utils/layer-manager-utils';
 import { batchToggleLayers } from 'utils/layer-manager-utils';
-import { layersConfig, LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { layersConfig, LAYERS_CATEGORIES } from 'constants/layers-config';
 import { COMMUNITY_AREAS_VECTOR_TILE_LAYER, GRID_CELLS_PROTECTED_AREAS_PERCENTAGE } from 'constants/layers-slugs';
 import { COMMUNITY_PROTECTED_AREAS_LAYER_GROUP } from 'constants/layers-groups';
 import { PROTECTED_AREAS_COLOR, COMMUNITY_AREAS_COLOR } from 'constants/protected-areas';

src/components/landscape-sidebar/human-pressure-widget/human-pressure-widget.js

@@ -7,7 +7,7 @@ import mapStateToProps from './human-pressure-selectors';
 import 'redux_modules/land-human-encroachment';
 // Constants
 import { GRID_CELLS_LAND_HUMAN_PRESSURES_PERCENTAGE } from 'constants/layers-slugs';
-import { layersConfig, LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { layersConfig, LAYERS_CATEGORIES } from 'constants/layers-config';
 // Utils
 import { layerManagerToggle } from 'utils/layer-manager-utils';
 //Actions

src/components/legend/legend-selectors.js

@@ -3,7 +3,8 @@ import { uniqBy } from 'lodash';
 import { getConfig } from 'utils/user-config-utils';
 import { LEGEND_FREE_LAYERS, LAND_HUMAN_PRESURES_LAYERS, MARINE_HUMAN_PRESURES_LAYERS, COMMUNITY_PROTECTED_AREAS_LAYER_GROUP } from 'constants/layers-groups';
 import { PLEDGES_LAYER, MARINE_AND_LAND_HUMAN_PRESSURES, COMMUNITY_AREAS_VECTOR_TILE_LAYER } from 'constants/layers-slugs';
-import { legendConfigs, DEFAULT_OPACITY } from 'constants/mol-layers-configs';
+import { DEFAULT_OPACITY } from 'constants/layers-config';
+import { legendConfigs } from 'constants/biodiversity-layers-constants';
 import { legendConfigs as humanPressureLegendConfigs, legendSingleRasterTitles } from 'constants/human-pressures';
 import { legendConfigs as WDPALegendConfigs } from 'constants/protected-areas';
 import { LEGEND_TUTORIAL, LEGEND_DRAG_TUTORIAL } from 'constants/tutorial';

src/components/post-robot-manager/post-robot-manager.js

@@ -8,7 +8,7 @@ import {
 } from 'utils/layer-manager-utils';
 import {
   layersConfig
-} from 'constants/mol-layers-configs';
+} from 'constants/layers-config';
 
 const PostRobotManagerContainer = ({ map, view, activeLayers, listeners, handlePostRobotUpdates }) => {
 

src/components/priority-places-polygons-layer/priority-places-polygons-layer.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { loadModules } from 'esri-loader';
 import { PRIORITY_PLACES_POLYGONS, PRIORITY_POLYGONS_GRAPHIC_LAYER } from 'constants/layers-slugs';
-import { layersConfig } from 'constants/mol-layers-configs';
+import { layersConfig } from 'constants/layers-config';
 
 const PriorityPlacesPolygonsLayer = ({ view, selectedFeaturedMap, selectedTaxa }) => {
   const priorityPolygonsInitialState = {

src/components/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
-import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
+import { LAYERS_CATEGORIES } from 'constants/layers-config';
 import CategoryBox from 'components/category-box';
 import ProtectedAreasLayers from 'components/protected-areas-layers';
 import styles from './protected-areas-sidebar-card-styles.module.scss'

src/components/protected-areas-tooltips/protected-areas-tooltips-component.jsx

@@ -10,7 +10,7 @@ import {
 
 import {
   layersConfig
-} from 'constants/mol-layers-configs';
+} from 'constants/layers-config';
 
 const PROTECTED_AREA_COLOR = '#FF6C47';
 const COMMUNITY_AREA_COLOR = '#FCC44A';