Merge pull request #3702 from Vizzuality/feature/mapbox-gl

GFW 4.0: MapboxGL + Vector Plantations Layer

Author: edbrett

app/javascript/app/index.js

@@ -1,4 +1,9 @@
 import 'babel-polyfill';
+
+// babel -> core-js shims that aren't yet fully supported
+import 'core-js/modules/es7.promise.finally'; // eslint-disable-line import/no-extraneous-dependencies
+import 'core-js/modules/es7.promise.try'; // eslint-disable-line import/no-extraneous-dependencies
+
 import React from 'react';
 import { Provider } from 'react-redux';
 import { HelmetProvider } from 'react-helmet-async';

app/javascript/assets/logos/mapbox-logo-white.svg

@@ -119,7 +119,7 @@ export const getLayerEndpoints = createSelector(
     );
 
     const groupedEndpoints = groupBy(endpoints, 'slug');
-    const parsedEndpoints = Object.keys(groupedEndpoints).map(slug => {
+    const parsedEndpoints = Object.keys(groupedEndpoints).filter(slug => slug !== 'undefined').map(slug => {
       let params = {};
       groupedEndpoints[slug].forEach(e => {
         params = {

app/javascript/components/maps/components/analysis/selectors.js

@@ -36,7 +36,7 @@ export const stories = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -82,7 +82,7 @@ export const stories = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -128,7 +128,7 @@ export const stories = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -170,7 +170,7 @@ export const topics = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -221,7 +221,7 @@ export const topics = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -269,7 +269,7 @@ export const topics = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {
@@ -305,7 +305,7 @@ export const topics = {
           // wood fiber
           {
             dataset: '93e67a77-1a31-4d04-a75d-86a4d6e35d54',
-            layers: ['557dc2cf-0ba7-4410-813c-99d692725fe7'],
+            layers: ['f680828e-be68-4895-b1ed-1d0915d07457'],
             opacity: 1,
             visibility: true
           },
@@ -341,7 +341,7 @@ export const topics = {
           lat: 27,
           lng: 12
         },
-        zoom: 3,
+        zoom: 2,
         datasets: [
           // admin boundaries
           {

app/javascript/components/maps/components/menu/components/sections/explore/explore-sections.js

@@ -1,4 +1,6 @@
 import { createSelector, createStructuredSelector } from 'reselect';
+import bbox from 'turf-bbox';
+import lineString from 'turf-linestring';
 
 import {
   getActiveDatasetsFromState,
@@ -12,58 +14,70 @@ const selectSection = (state, { exploreType }) => exploreType;
 const selectPTWLoading = state => state.ptw && state.ptw.loading;
 const selectPTWData = state => {
   const { data } = state.ptw || {};
+
   return (
     data &&
-    data.map(d => ({
-      id: d.cartodb_id,
-      image: d.image,
-      imageCredit: d.image_source,
-      title: d.name,
-      summary: d.description,
-      buttons: [
-        {
-          text: 'READ MORE',
-          extLink: d.link,
-          theme: 'theme-button-light theme-button-small'
-        },
-        {
-          text: 'VIEW ON MAP',
-          theme: 'theme-button-small'
-        }
-      ],
-      payload: {
-        mergeQuery: true,
-        map: {
-          datasets: [
-            // admin boundaries
-            {
-              dataset: 'fdc8dc1b-2728-4a79-b23f-b09485052b8d',
-              layers: [
-                '6f6798e6-39ec-4163-979e-182a74ca65ee',
-                'c5d1e010-383a-4713-9aaa-44f728c0571c'
-              ],
-              opacity: 1,
-              visibility: true
-            },
-            // GLADs
-            {
-              dataset: 'e663eb09-04de-4f39-b871-35c6c2ed10b5',
-              layers: [
-                '581ecc62-9a70-4ef4-8384-0d59363e511d',
-                'dd5df87f-39c2-4aeb-a462-3ef969b20b66'
-              ],
-              opacity: 1,
-              visibility: true,
-              bbox: d.bbox
-            }
-          ],
-          basemap: {
-            value: 'default'
+    data.map(d => {
+      const bboxCoords = d.bbox.slice(0, 4);
+      const bboxFromCoords = bbox(lineString(bboxCoords));
+      const reverseBbox = [
+        bboxFromCoords[1],
+        bboxFromCoords[0],
+        bboxFromCoords[3],
+        bboxFromCoords[2]
+      ];
+
+      return {
+        id: d.cartodb_id,
+        image: d.image,
+        imageCredit: d.image_source,
+        title: d.name,
+        summary: d.description,
+        buttons: [
+          {
+            text: 'READ MORE',
+            extLink: d.link,
+            theme: 'theme-button-light theme-button-small'
           },
-          label: 'default'
+          {
+            text: 'VIEW ON MAP',
+            theme: 'theme-button-small'
+          }
+        ],
+        payload: {
+          mergeQuery: true,
+          map: {
+            datasets: [
+              // admin boundaries
+              {
+                dataset: 'fdc8dc1b-2728-4a79-b23f-b09485052b8d',
+                layers: [
+                  '6f6798e6-39ec-4163-979e-182a74ca65ee',
+                  'c5d1e010-383a-4713-9aaa-44f728c0571c'
+                ],
+                opacity: 1,
+                visibility: true
+              },
+              // GLADs
+              {
+                dataset: 'e663eb09-04de-4f39-b871-35c6c2ed10b5',
+                layers: [
+                  '581ecc62-9a70-4ef4-8384-0d59363e511d',
+                  'dd5df87f-39c2-4aeb-a462-3ef969b20b66'
+                ],
+                opacity: 1,
+                visibility: true,
+                bbox: reverseBbox
+              }
+            ],
+            basemap: {
+              value: 'default'
+            },
+            label: 'default'
+          }
         }
-      }
-    }))
+      };
+    })
   );
 };
 

app/javascript/components/maps/components/menu/components/sections/explore/explore-selectors.js

@@ -14,6 +14,7 @@ class DataAnalysisMenu extends PureComponent {
       links,
       clearAnalysisError,
       setMainMapSettings,
+      setMapSettings,
       showAnalysis,
       hidden
     } = this.props;
@@ -27,6 +28,7 @@ class DataAnalysisMenu extends PureComponent {
             (showAnalysis && l.active && !hidden) ||
             (!showAnalysis && l.active && !hidden)
         });
+        setMapSettings({ draw: false });
         clearAnalysisError();
       }
     }));
@@ -70,6 +72,7 @@ DataAnalysisMenu.propTypes = {
   menuSection: PropTypes.object,
   links: PropTypes.array,
   setMainMapSettings: PropTypes.func,
+  setMapSettings: PropTypes.func,
   clearAnalysisError: PropTypes.func,
   embed: PropTypes.bool
 };

app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx

@@ -2,10 +2,12 @@ import { connect } from 'react-redux';
 
 import { clearAnalysisError } from 'components/maps/components/analysis/actions';
 import { setMainMapSettings } from 'components/maps/main-map/actions';
+import { setMapSettings } from 'components/maps/map/actions';
 import { getDataAnalysisMenuProps } from './selectors';
 import Component from './component';
 
 export default connect(getDataAnalysisMenuProps, {
   clearAnalysisError,
-  setMainMapSettings
+  setMainMapSettings,
+  setMapSettings
 })(Component);

app/javascript/components/maps/main-map/components/data-analysis-menu/index.js

@@ -196,29 +196,29 @@ class MapControlsButtons extends PureComponent {
 
   renderZoomButtons = () => {
     const { mapSettings, setMapSettings } = this.props;
-    const { zoom, minZoom, maxZoom } = mapSettings || {};
+    const { minZoom, maxZoom, zoom } = mapSettings || {};
 
     return (
       <Fragment>
         <Button
           theme="theme-button-map-control"
           onClick={() => {
-            setMapSettings({ zoom: zoom - 1 });
+            setMapSettings({ zoom: zoom - 1 < minZoom ? minZoom : zoom - 1 });
             track('zoomOut');
           }}
           tooltip={{ text: 'Zoom out' }}
-          disabled={zoom === minZoom}
+          disabled={zoom <= minZoom}
         >
           <Icon icon={minusIcon} className="minus-icon" />
         </Button>
         <Button
           theme="theme-button-map-control"
           onClick={() => {
-            setMapSettings({ zoom: zoom + 1 });
+            setMapSettings({ zoom: zoom + 1 > maxZoom ? maxZoom : zoom + 1 });
             track('zoomIn');
           }}
           tooltip={{ text: 'Zoom in' }}
-          disabled={zoom === maxZoom}
+          disabled={zoom >= maxZoom}
         >
           <Icon icon={plusIcon} className="plus-icon" />
         </Button>
@@ -298,16 +298,12 @@ class MapControlsButtons extends PureComponent {
   );
 
   renderMapPosition = () => {
-    const { mapSettings } = this.props;
-    const { zoom, center } = mapSettings || {};
+    const { mapSettings: { center: { lat, lng }, zoom } } = this.props;
 
     return (
       <div className="map-position">
-        <span>zoom: {zoom}</span>
-        <span>
-          lat,lon:{' '}
-          {`${format('.5f')(center.lat)}, ${format('.5f')(center.lng)}`}
-        </span>
+        <span>zoom: {format('.2f')(zoom)}</span>
+        <span>lat,lon: {`${format('.5f')(lat)}, ${format('.5f')(lng)}`}</span>
       </div>
     );
   };

app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx

@@ -36,7 +36,10 @@ class MainMapContainer extends PureComponent {
     const {
       selectedInteraction,
       setMainMapAnalysisView,
-      oneClickAnalysis
+      setMainMapSettings,
+      oneClickAnalysis,
+      analysisActive,
+      geostoreId
     } = this.props;
 
     // set analysis view if interaction changes
@@ -48,6 +51,10 @@ class MainMapContainer extends PureComponent {
     ) {
       setMainMapAnalysisView(selectedInteraction);
     }
+
+    if (!analysisActive && geostoreId && geostoreId !== prevProps.geostoreId) {
+      setMainMapSettings({ showAnalysis: true });
+    }
   }
 
   handleShowTooltip = (show, data) => {
@@ -75,8 +82,11 @@ MainMapContainer.propTypes = {
   setMainMapAnalysisView: PropTypes.func,
   selectedInteraction: PropTypes.object,
   setMenuSettings: PropTypes.func,
+  setMainMapSettings: PropTypes.func,
   activeDatasets: PropTypes.array,
-  menuSection: PropTypes.string
+  menuSection: PropTypes.string,
+  analysisActive: PropTypes.bool,
+  geostoreId: PropTypes.string
 };
 
 export default connect(getMapProps, actions)(MainMapContainer);