Feature/topics cards in map

app/javascript/components/map-v2/actions.js

@@ -56,7 +56,8 @@ export const setLandsatBasemap = createThunkAction(
             year,
             defaultUrl,
             id: 'landsat',
-            url: landsat.url
+            url: landsat.url,
+            color: '#0C0045'
           }
         })
       );

app/javascript/components/map-v2/component.js

@@ -7,7 +7,6 @@ import moment from 'moment';
 import { format } from 'd3-format';
 
 import Map from 'wri-api-components/dist/map';
-
 import { LayerManager, Layer } from 'layer-manager/dist/react';
 import { PluginLeaflet } from 'layer-manager';
 
@@ -25,11 +24,6 @@ import MapAttributions from './components/map-attributions';
 import './styles.scss';
 
 class MapComponent extends PureComponent {
-  state = {
-    showTooltip: false,
-    tooltipData: {}
-  };
-
   componentDidMount() {
     requestAnimationFrame(() => {
       this.map.invalidateSize();
@@ -49,10 +43,6 @@ class MapComponent extends PureComponent {
     </div>
   );
 
-  handleShowTooltip = (show, data) => {
-    this.setState({ showTooltip: show, tooltipData: data });
-  };
-
   render() {
     const {
       loading,
@@ -62,28 +52,33 @@ class MapComponent extends PureComponent {
       basemap,
       label,
       setMapSettings,
-      bbox,
       geostore,
       setInteraction,
       tileGeoJSON,
-      setRecentImagerySettings
+      setRecentImagerySettings,
+      query,
+      tooltipData,
+      bbox,
+      showTooltip,
+      handleShowTooltip,
+      setBbox
     } = this.props;
 
     return (
-      <Fragment>
+      <div style={{ backgroundColor: basemap.color }}>
         <Tooltip
           theme="tip"
           hideOnClick
           html={
             <Tip
               className="map-hover-tooltip"
-              text={this.renderTooltip(this.state.tooltipData)}
+              text={this.renderTooltip(tooltipData)}
             />
           }
           position="top"
           followCursor
           animateFill={false}
-          open={this.state.showTooltip}
+          open={showTooltip}
         >
           <Map
             customClass="c-map"
@@ -93,13 +88,34 @@ class MapComponent extends PureComponent {
             mapOptions={mapOptions}
             basemap={basemap}
             label={label}
-            bounds={bbox}
+            bounds={
+              bbox
+                ? {
+                  bbox,
+                  options: {
+                    padding: [30, 30]
+                  }
+                }
+                : {}
+            }
             events={{
-              moveend: (e, map) => {
+              zoomend: (e, map) => {
+                setMapSettings({
+                  zoom: map.getZoom(),
+                  center: map.getCenter(),
+                  canBound: false,
+                  bbox: null
+                });
+                setBbox(null);
+              },
+              dragend: (e, map) => {
                 setMapSettings({
                   zoom: map.getZoom(),
-                  center: map.getCenter()
+                  center: map.getCenter(),
+                  canBound: false,
+                  bbox: null
                 });
+                setBbox(null);
               }
             }}
           >
@@ -154,7 +170,7 @@ class MapComponent extends PureComponent {
                             mouseover: e => {
                               const data = e.layer.feature.properties;
                               const { cloudScore, instrument, dateTime } = data;
-                              this.handleShowTooltip(true, {
+                              handleShowTooltip(true, {
                                 instrument: startCase(instrument),
                                 date: moment(dateTime)
                                   .format('DD MMM YYYY, HH:mm')
@@ -163,7 +179,7 @@ class MapComponent extends PureComponent {
                               });
                             },
                             mouseout: () => {
-                              this.handleShowTooltip(false, {});
+                              handleShowTooltip(false, {});
                             }
                           }}
                         />
@@ -177,7 +193,7 @@ class MapComponent extends PureComponent {
                             interactivity: output.map(i => i.column),
                             events: {
                               click: e => {
-                                if (!this.state.showTooltip) {
+                                if (!showTooltip) {
                                   setInteraction({
                                     ...e,
                                     label: l.name,
@@ -204,7 +220,7 @@ class MapComponent extends PureComponent {
                     </Fragment>
                   )}
                 </LayerManager>
-                <Popup map={map} />
+                <Popup map={map} query={query} />
                 <MapControlButtons className="map-controls" map={map} />
               </Fragment>
             )}
@@ -219,7 +235,7 @@ class MapComponent extends PureComponent {
           error && (
             <NoContent message="An error occured. Please try again later." />
           )}
-      </Fragment>
+      </div>
     );
   }
 }
@@ -233,12 +249,18 @@ MapComponent.propTypes = {
   label: PropTypes.object,
   setMapSettings: PropTypes.func,
   setInteraction: PropTypes.func,
-  bbox: PropTypes.object,
+  bboxs: PropTypes.object,
   recentImagery: PropTypes.bool,
   recentTileBounds: PropTypes.array,
   setRecentImagerySettings: PropTypes.func,
   geostore: PropTypes.object,
-  tileGeoJSON: PropTypes.object
+  tileGeoJSON: PropTypes.object,
+  query: PropTypes.object,
+  tooltipData: PropTypes.object,
+  bbox: PropTypes.array,
+  showTooltip: PropTypes.bool,
+  handleShowTooltip: PropTypes.func,
+  setBbox: PropTypes.func
 };
 
 export default MapComponent;

app/javascript/components/map-v2/components/basemaps/basemaps-component.jsx

@@ -5,7 +5,6 @@ import Dropdown from 'components/ui/dropdown';
 import cx from 'classnames';
 import Icon from 'components/ui/icon';
 import closeIcon from 'assets/icons/close.svg';
-import infoIcon from 'assets/icons/info.svg';
 
 import './styles.scss';
 
@@ -107,11 +106,6 @@ class Basemaps extends React.PureComponent {
           <div className="basemaps-header">
             <h2 className="basemaps-title">Basemap Options</h2>
             <div className="basemaps-actions">
-              {false && (
-                <button className="basemaps-action-button">
-                  <Icon icon={infoIcon} />
-                </button>
-              )}
               <button className="basemaps-action-button" onClick={onClose}>
                 <Icon icon={closeIcon} />
               </button>

app/javascript/components/map-v2/components/basemaps/basemaps-schema.js

@@ -30,20 +30,23 @@ export default {
     id: 'default',
     value: 'default',
     label: 'default',
+    color: '#A2DFFF',
     url: `https://api.mapbox.com/styles/v1/resourcewatch/cjlhwaoh211hp2stemfz0imqf/tiles/256/{z}/{x}/{y}@2x?access_token=${
       MAPBOX_TOKEN
     }`
   },
   dark: {
     id: 'dark',
     label: 'dark matter',
+    color: '#31312F',
     url: `https://api.mapbox.com/styles/v1/resourcewatch/cjlhtst4i0m7e2rmijubkv4y9/tiles/256/{z}/{x}/{y}@2x?access_token=${
       MAPBOX_TOKEN
     }`
   },
   satellite: {
     id: 'satellite',
     label: 'Satellite',
+    color: '#131620',
     url: `https://api.mapbox.com/styles/v1/resourcewatch/cjhqiecof53wv2rl9gw4cehmy/tiles/256/{z}/{x}/{y}@2x?access_token=${
       MAPBOX_TOKEN
     }`
@@ -52,6 +55,7 @@ export default {
     id: 'landsat',
     label: 'landsat',
     dynamic: true,
+    color: '#0C0045',
     defaultUrl:
       'https://storage.googleapis.com/landsat-cache/{year}/{z}/{x}/{y}.png',
     availableYears: [2013, 2014, 2015, 2016, 2017]

app/javascript/components/map-v2/components/legend/components/layer-list-menu/component.jsx

@@ -13,10 +13,11 @@ class LayerListMenu extends PureComponent {
     return (
       <div className={`c-layer-list-menu ${className || ''}`}>
         {layers.map(
-          l =>
+          (l, i) =>
             (!l.default ? (
               <div className="layer-toggle" key={l.id}>
                 <LayerToggle
+                  tabIndex={i}
                   data={{ ...l, layer: l.id }}
                   onToggle={onToggle}
                   onInfoClick={onInfoClick}

app/javascript/components/map-v2/components/legend/components/layer-more-info/styles.scss

@@ -1,6 +1,11 @@
 @import '~styles/settings';
 
 .c-layer-more-info {
+  p,
+  a {
+    font-size: rem(12px);
+  }
+
   a {
     color: $green-gfw;
 

app/javascript/components/map-v2/components/legend/components/layer-selector-menu/component.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import LayerSelector from '../layer-selector';
+import SentenceSelector from 'components/sentence-selector';
 
 import './styles.scss';
 
@@ -26,7 +26,7 @@ class LayerSelectorMenu extends PureComponent {
         {groups &&
           !!groups.length && (
             <div className="menu-wrapper -group">
-              <LayerSelector
+              <SentenceSelector
                 options={groups}
                 value={selectedGroup && selectedGroup.value}
                 onChange={e => onChange(layerGroup, e)}
@@ -38,7 +38,7 @@ class LayerSelectorMenu extends PureComponent {
         {options &&
           !!options.length && (
             <div className="menu-wrapper">
-              <LayerSelector
+              <SentenceSelector
                 options={options}
                 value={selected}
                 onChange={e => onChange(layerGroup, e)}

app/javascript/components/map-v2/components/legend/components/layer-toggle/component.jsx

@@ -13,10 +13,17 @@ import './styles.scss';
 
 class LayerToggle extends PureComponent {
   render() {
-    const { className, data, onInfoClick, onToggle, small } = this.props;
+    const {
+      className,
+      data,
+      onInfoClick,
+      onToggle,
+      small,
+      tabIndex,
+      showSubtitle
+    } = this.props;
     const {
       name,
-      subtitle,
       metadata,
       layer,
       dataset,
@@ -38,7 +45,14 @@ class LayerToggle extends PureComponent {
         />
         <div className="c-layer-toggle__content">
           <div className="c-layer-toggle__header">
-            <div className="c-layer-toggle__name">{name}</div>
+            <div
+              className="c-layer-toggle__name"
+              onClick={() => onToggle({ dataset, layer, iso }, !active)}
+              role="button"
+              tabIndex={tabIndex}
+            >
+              {name}
+            </div>
             {((!metadata && description) ||
               (metadata && typeof metadata === 'string')) && (
                 <Tooltip
@@ -60,21 +74,31 @@ class LayerToggle extends PureComponent {
                 </Tooltip>
               )}
           </div>
-          {subtitle && (
-            <div className="c-layer-toggle__subtitle">{`${subtitle}`}</div>
-          )}
+          {description &&
+            showSubtitle && (
+              <div
+                className="c-layer-toggle__subtitle"
+                onClick={() => onToggle({ dataset, layer, iso }, !active)}
+                role="button"
+                tabIndex={tabIndex}
+              >
+                {`${description}`}
+              </div>
+            )}
         </div>
       </div>
     );
   }
 }
 
 LayerToggle.propTypes = {
+  showSubtitle: PropTypes.bool,
   className: PropTypes.string,
   data: PropTypes.object,
   onInfoClick: PropTypes.func,
   onToggle: PropTypes.func,
-  small: PropTypes.bool
+  small: PropTypes.bool,
+  tabIndex: PropTypes.number
 };
 
 export default LayerToggle;

app/javascript/components/map-v2/components/legend/components/layer-toggle/styles.scss

@@ -9,7 +9,6 @@
 
   &__content {
     flex: 1;
-    padding-left: rem(6px);
   }
 
   &__header {
@@ -23,6 +22,8 @@
     letter-spacing: -0.3px;
     color: $slate;
     margin-top: -2px;
+    padding-left: rem(6px);
+    cursor: pointer;
   }
 
   &__subtitle {
@@ -32,6 +33,7 @@
     color: $hot-grey;
     margin-top: rem(3px);
     max-width: calc(100% - 20px);
+    padding-left: rem(6px);
   }
 
   .info-button {