Merge branch 'develop'

.env.sample

@@ -23,4 +23,6 @@ SENTRY_URL=
 
 # Analytics
 FACEBOOK_PIXEL_ID=
-TWITTER_CONVERSION_ID=
+TWITTER_CONVERSION_ID=
+
+PLANET_API_KEY=

app.json

@@ -38,6 +38,9 @@
     "MapboxAccessToken": {
       "required": true
     },
+    "PLANET_API_KEY": {
+      "required": true
+    },
     "TWITTER_CONVERSION_ID": {
       "required": true
     }

components/basemaps/component.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Dropdown from 'components/ui/dropdown';
+
 import cx from 'classnames';
 
 import Icon from 'components/ui/icon';
@@ -29,6 +30,8 @@ class Basemaps extends React.PureComponent {
     labels: PropTypes.array.isRequired,
     labelSelected: PropTypes.object.isRequired,
     landsatYears: PropTypes.array.isRequired,
+    planetYears: PropTypes.array.isRequired,
+    planetMonths: PropTypes.array.isRequired,
     selectLabels: PropTypes.func.isRequired,
     selectBasemap: PropTypes.func.isRequired,
     activeBasemap: PropTypes.object.isRequired,
@@ -128,6 +131,91 @@ class Basemaps extends React.PureComponent {
     );
   }
 
+  renderPlanetBasemap(item) {
+    const {
+      selectBasemap,
+      activeBasemap,
+      planetYears,
+      planetMonths,
+      basemaps,
+      isDesktop,
+    } = this.props;
+    const { defaultYear } = basemaps.planet;
+    const year = activeBasemap.value === 'planet' ? activeBasemap.year || defaultYear : defaultYear;
+    const defaultLabel = planetMonths[year][0].label;
+    const month = activeBasemap.value === 'planet' ? activeBasemap.month || defaultLabel : defaultLabel;
+
+    const basemap = basemaps[item.value]
+      ? basemaps[item.value]
+      : basemaps.planet;
+
+    return (
+      <button
+        className="basemaps-list-item-button"
+        onClick={() => {
+          selectBasemap({
+            value: 'planet',
+            year: basemap.defaultYear,
+            month: planetMonths[basemap.defaultYear][0].value
+          });
+          if (!isDesktop) {
+            this.setState({ showBasemaps: !this.state.showBasemaps });
+          }
+        }}
+      >
+        <div
+          className="basemaps-list-item-image"
+          style={{
+            backgroundImage: `url(${item.image})`,
+          }}
+        />
+        <span
+          className="basemaps-list-item-name"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {item.label}
+          <div className="basemaps-list-item-selectors">
+            <Dropdown
+              className="planet-selector"
+              theme="theme-dropdown-native-inline"
+              value={month}
+              options={planetMonths[year]}
+              onChange={(value) => {
+                selectBasemap({
+                  value: 'planet',
+                  year,
+                  month: value,
+                });
+                if (!isDesktop) {
+                  this.setState({ showBasemaps: !this.state.showBasemaps });
+                }
+              }}
+              native
+            />
+            <Dropdown
+              className="planet-selector"
+              theme="theme-dropdown-native-inline"
+              value={year}
+              options={planetYears}
+              onChange={(value) => {
+                const selectedYear = parseInt(value, 10);
+                selectBasemap({
+                  value: 'planet',
+                  year: selectedYear,
+                  month: planetMonths[selectedYear][0].value
+                });
+                if (!isDesktop) {
+                  this.setState({ showBasemaps: !this.state.showBasemaps });
+                }
+              }}
+              native
+            />
+          </div>
+        </span>
+      </button>
+    );
+  }
+
   renderBasemapsSelector() {
     const { activeBasemap, basemaps, isDesktop } = this.props;
     return (
@@ -147,6 +235,10 @@ class Basemaps extends React.PureComponent {
                 basemapButton = this.renderLandsatBasemap(item);
               }
 
+              if (item.value === 'planet') {
+                basemapButton = this.renderPlanetBasemap(item);
+              }
+
               return (
                 <li
                   key={item.value}

components/basemaps/selectors.js

@@ -1,4 +1,5 @@
 import { createStructuredSelector, createSelector } from 'reselect';
+import moment from 'moment';
 
 import {
   getBasemaps,
@@ -20,6 +21,22 @@ export const getLandsatYears = createSelector([getBasemaps], basemaps =>
   }))
 );
 
+export const getPlanetYears = createSelector([getBasemaps], basemaps =>
+  basemaps.planet.availableYears.map(y => ({
+    label: y,
+    value: y
+  }))
+);
+
+export const getPlanetMonths = createSelector([getBasemaps], basemaps =>
+  Object.assign(...Object.keys(basemaps.planet.availableMonths).map(y => ({
+    [y]: basemaps.planet.availableMonths[y].map(m => ({
+      label: moment().month(parseInt(m, 10) - 1).format("MMM"),
+      value: m
+    }))
+  })))
+);
+
 export const getLabelsOptions = createSelector([], () => [
   {
     label: 'Show labels',
@@ -62,6 +79,8 @@ export const getBasemapsProps = createStructuredSelector({
   labelSelected: getLabelSelected,
   labels: getLabelsOptions,
   landsatYears: getLandsatYears,
+  planetYears: getPlanetYears,
+  planetMonths: getPlanetMonths,
   roads: getRoadsOptions,
   roadsSelected: getRoadsSelected
 });

components/map/basemaps.js

@@ -45,4 +45,23 @@ export default {
     availableYears: [2017, 2016, 2015, 2014, 2013],
     defaultYear: 2017,
   },
+  planet: {
+    label: 'Planet',
+    value: 'planet',
+    color: '#131620',
+    image: satelliteImage,
+    basemapGroup: 'basemap-dark',
+    labelsGroup: 'labels-dark',
+    mapStyle: 'mapbox://styles/resourcewatch/ckd6wptd60dmq1ilp73ulv6xv',
+    url: `https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_{year}_{month}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${
+      process.env.PLANET_API_KEY
+    }`,
+    availableYears: [2020, 2019, 2018],
+    availableMonths: {
+      2020: ['01', '02', '03', '04', '05', '06', '07', '08'],
+      2019: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+      2018: ['08', '09', '10', '11', '12']
+    },
+    defaultYear: 2020,
+  }
 };

components/map/components/attributions/component.jsx

@@ -10,6 +10,7 @@ import mapboxLogo from 'assets/logos/mapbox.svg?sprite';
 import geeLogo from 'assets/logos/gee.png';
 import cartoLogo from 'assets/logos/carto.png';
 import infoIcon from 'assets/icons/info.svg?sprite';
+import planetLogo from 'assets/logos/planet.png';
 
 import './styles.scss';
 
@@ -41,6 +42,13 @@ class MapAttributions extends PureComponent {
           >
             <img src={cartoLogo} alt="carto" width="60" />
           </a>
+          <a
+            href="https://www.planet.com"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img src={planetLogo} alt="planet" width="60" />
+          </a>
         </div>
         {!smallView && (
           <Fragment>

components/widgets/forest-change/tree-loss-tsc/index.js

@@ -18,7 +18,7 @@ import { getExtent, getLoss } from 'services/analysis-cached';
 import getWidgetProps from './selectors';
 
 const MIN_YEAR = 2001;
-const MAX_YEAR = 2018;
+const MAX_YEAR = 2019;
 
 export default {
   ...treeLoss,
@@ -132,7 +132,7 @@ export default {
   getWidgetProps,
   parseInteraction: (payload) => {
     if (payload) {
-      const {year} = payload;
+      const { year } = payload;
       return {
         updateLayer: true,
         startDate:

layouts/about/section-partners/index.js

@@ -288,7 +288,12 @@ const partnersCollaborators = [
     title: 'Osinfor',
   },
   {
-    img: '/assets/logos/rfukhover.png',
+    img: images('./planet.png'),
+    link: 'https://www.planet.com/',
+    title: 'Daily Satellite Imagery and Insights',
+  },
+  {
+    img: images('./rfukhover.png'),
     link: 'http://www.rainforestfoundationuk.org/',
     title: 'Rainforest Foundation UK',
   },

layouts/map/component.jsx

@@ -10,6 +10,7 @@ import WhitelistsProvider from 'providers/whitelists-provider';
 import DatasetsProvider from 'providers/datasets-provider';
 import LatestProvider from 'providers/latest-provider';
 import AreasProvider from 'providers/areas-provider';
+import PlanetBasemapsProvider from 'providers/planet-provider';
 
 import Map from 'components/map';
 import ModalMeta from 'components/modals/meta';
@@ -116,6 +117,7 @@ class MainMapComponent extends PureComponent {
         <GeodescriberProvider />
         <AreaOfInterestModal viewAfterSave clearAfterDelete canDelete />
         <AreasProvider />
+        <PlanetBasemapsProvider />
       </div>
     );
   }

layouts/map/components/map-controls/component.jsx

@@ -13,6 +13,7 @@ import shareIcon from 'assets/icons/share.svg?sprite';
 import fullscreenIcon from 'assets/icons/fit-zoom.svg?sprite';
 import printIcon from 'assets/icons/print.svg?sprite';
 import helpIocn from 'assets/icons/help.svg?sprite';
+import searchIcon from 'assets/icons/search.svg?sprite';
 import globeIcon from 'assets/icons/globe.svg?sprite';
 import satelliteIcon from 'assets/icons/satellite.svg?sprite';
 
@@ -281,12 +282,26 @@ class MapControlsButtons extends PureComponent {
     );
   };
 
-  renderShareButton = () => {
-    const { setShareModal } = this.props;
+  renderSearchButton = () => {
+    const { setMenuSettings } = this.props;
 
     return (
       <Button
         className="theme-button-map-control"
+        onClick={() => setMenuSettings({ menuSection: 'search' })}
+        tooltip={{ text: 'Search' }}
+      >
+        <Icon icon={searchIcon} />
+      </Button>
+    );
+  };
+
+  renderShareButton() {
+    const { setShareModal } = this.props;
+
+    return (
+      <Button
+        className="theme-button-map-control -share"
         onClick={() =>
           setShareModal({
             title: 'Share this view',
@@ -306,7 +321,7 @@ class MapControlsButtons extends PureComponent {
         <Icon icon={shareIcon} />
       </Button>
     );
-  };
+  }
 
   renderPrintButton = () => (
     <Button
@@ -346,7 +361,7 @@ class MapControlsButtons extends PureComponent {
           {format('.2f')(zoom)}
         </span>
         <span className="notranslate">
-          lat, lon:
+          lat, lon: 
           {' '}
           {`${format('.5f')(latitude)}, ${format('.5f')(longitude)}`}
         </span>
@@ -379,10 +394,15 @@ class MapControlsButtons extends PureComponent {
             </div>
           </Fragment>
         ) : (
-          <div className="mobile-controls-wrapper">
-            {this.renderShareButton()}
-            {this.renderRecentImageryBtn()}
-          </div>
+          <Fragment>
+            <div className="mobile-controls-wrapper">
+              {this.renderRecentImageryBtn()}
+            </div>
+            <div className="mobile-controls-wrapper">
+              {this.renderSearchButton()}
+              {this.renderShareButton()}
+            </div>
+          </Fragment>
         )}
       </div>
     );

layouts/map/components/map-controls/styles.scss

@@ -127,11 +127,22 @@
 
   .mobile-controls-wrapper {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    margin-left: 10px;
     box-shadow: 0 1px 2px rgba($black, 0.25);
 
+    .theme-button-map-control {
+      min-width: rem(40px);
+      height: rem(40px);
+
+      svg {
+        width: 25px;
+        height: 25px;
+      }
+    }
+
     > * {
-      border-bottom: solid 1px $border;
+      border-right: solid 1px $border;
 
       &:last-child {
         border-bottom: 0;

layouts/map/styles.scss

@@ -49,10 +49,12 @@
     top: rem(15px);
     right: rem(15px);
     z-index: 5;
+    display: flex;
 
     @media screen and (min-width: $screen-m) {
       bottom: rem(15px);
       top: auto;
+      display: block;
     }
   }