add satellite overlay toggle

src/actions/index.js

@@ -400,3 +400,17 @@ export function fetchSourceError(msg) {
     msg,
   };
 }
+
+export const USE_SATELLITE_TILES_OVERLAY = "USE_SATELLITE_TILES_OVERLAY";
+export function useSatelliteTilesOverlay() {
+  return {
+    type: USE_SATELLITE_TILES_OVERLAY,
+  };
+}
+
+export const RESET_TILES_OVERLAY = "RESET_TILES_OVERLAY";
+export function resetTilesOverlay() {
+  return {
+    type: RESET_TILES_OVERLAY,
+  };
+}

src/common/data/copy.json

@@ -1,5 +1,9 @@
 {
   "es-MX": {
+    "tiles": {
+      "default": "Predeterminado",
+      "satellite": "Satélite"
+    },
     "loading": "Cargando...",
     "legend": {
       "view2d": {
@@ -90,6 +94,10 @@
     }
   },
   "en-US": {
+    "tiles": {
+      "default": "Default",
+      "satellite": "Satellite"
+    },
     "loading": "Loading...",
     "legend": {
       "view2d": {

src/components/space/carto/Map.js

@@ -1,4 +1,5 @@
 /* global L */
+import { bindActionCreators } from "redux";
 import "leaflet";
 import React from "react";
 import { Portal } from "react-portal";
@@ -6,6 +7,7 @@ import Supercluster from "supercluster";
 import { isMobileOnly } from "react-device-detect";
 
 import { connect } from "react-redux";
+import * as actions from "../../../actions";
 import * as selectors from "../../../selectors";
 
 import Sites from "./atoms/Sites";
@@ -15,6 +17,7 @@ import Clusters from "./atoms/Clusters";
 import SelectedEvents from "./atoms/SelectedEvents";
 import Narratives from "./atoms/Narratives";
 import DefsMarkers from "./atoms/DefsMarkers";
+import SatelliteOverlayToggle from "./atoms/SatelliteOverlayToggle";
 import LoadingOverlay from "../../atoms/Loading";
 
 import {
@@ -41,6 +44,7 @@ class Map extends React.Component {
     this.svgRef = React.createRef();
     this.map = null;
     this.superclusterIndex = null;
+    this.tileLayer = null;
     this.state = {
       mapTransformX: 0,
       mapTransformY: 0,
@@ -53,14 +57,22 @@ class Map extends React.Component {
   componentDidMount() {
     if (this.map === null) {
       this.initializeMap();
+      this.initializeTileLayer();
     }
     window.dispatchEvent(new Event("resize"));
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.ui.tiles !== this.props.ui.tiles && this.map) {
+      this.initializeTileLayer();
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (!isIdentical(nextProps.domain.locations, this.props.domain.locations)) {
       this.loadClusterData(nextProps.domain.locations);
     }
+
     // Set appropriate zoom for narrative
     const { bounds } = nextProps.app.map;
     if (!isIdentical(bounds, this.props.app.map.bounds) && bounds !== null) {
@@ -92,6 +104,36 @@ class Map extends React.Component {
     }
   }
 
+  initializeTileLayer() {
+    if (!this.map) {
+      return;
+    }
+
+    if (
+      supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1 &&
+      process.env.MAPBOX_TOKEN &&
+      process.env.MAPBOX_TOKEN !== defaultToken
+    ) {
+      this.tileLayer = L.tileLayer(
+        `http://a.tiles.mapbox.com/v4/mapbox.${this.props.ui.tiles}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`
+      );
+    } else if (
+      process.env.MAPBOX_TOKEN &&
+      process.env.MAPBOX_TOKEN !== defaultToken
+    ) {
+      this.tileLayer = L.tileLayer(
+        `https://api.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.MAPBOX_TOKEN}`
+        // `http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${process.env.MAPBOX_TOKEN}`
+      );
+    } else {
+      this.tileLayer = L.tileLayer(
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        // "https://api.maptiler.com/maps/bright/256/{z}/{x}/{y}.png?key="
+      );
+    }
+    this.tileLayer.addTo(this.map);
+  }
+
   initializeMap() {
     /**
      * Creates a Leaflet map and a tilelayer for the map background
@@ -111,31 +153,7 @@ class Map extends React.Component {
     // Initialize supercluster index
     this.superclusterIndex = new Supercluster(clusterConfig);
 
-    let firstLayer;
-
-    if (
-      supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1 &&
-      process.env.MAPBOX_TOKEN &&
-      process.env.MAPBOX_TOKEN !== defaultToken
-    ) {
-      firstLayer = L.tileLayer(
-        `http://a.tiles.mapbox.com/v4/mapbox.${this.props.ui.tiles}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`
-      );
-    } else if (
-      process.env.MAPBOX_TOKEN &&
-      process.env.MAPBOX_TOKEN !== defaultToken
-    ) {
-      firstLayer = L.tileLayer(
-        `https://api.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.MAPBOX_TOKEN}`
-        // `http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${process.env.MAPBOX_TOKEN}`
-      );
-    } else {
-      firstLayer = L.tileLayer(
-        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        // "https://api.maptiler.com/maps/bright/256/{z}/{x}/{y}.png?key="
-      );
-    }
-    firstLayer.addTo(map);
+    this.initializeTileLayer(map);
 
     map.keyboard.disable();
     map.zoomControl.remove();
@@ -517,6 +535,13 @@ class Map extends React.Component {
           ui={isFetchingDomain}
           language={this.props.app.language}
         />
+        {this.props.features.USE_SATELLITE_OVERLAY_TOGGLE && (
+          <SatelliteOverlayToggle
+            isUsingSatellite={this.props.ui.tiles === "satellite"}
+            switchToSatellite={this.props.actions.useSatelliteTilesOverlay}
+            reset={this.props.actions.resetTilesOverlay}
+          />
+        )}
         {innerMap}
       </div>
     );
@@ -548,7 +573,7 @@ function mapStateToProps(state) {
       },
     },
     ui: {
-      tiles: state.ui.tiles,
+      tiles: state.ui.tiles.current,
       dom: state.ui.dom,
       narratives: state.ui.style.narratives,
       mapSelectedEvents: state.ui.style.selectedEvents,
@@ -561,4 +586,10 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(Map);
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map);

src/components/space/carto/atoms/SatelliteOverlayToggle.js

@@ -0,0 +1,40 @@
+import React from "react";
+import copy from "../../../../common/data/copy.json";
+import { language } from "../../../../common/utilities";
+
+const SatelliteOverlayToggle = ({
+  switchToSatellite,
+  reset,
+  isUsingSatellite,
+}) => {
+  return (
+    <div id="satellite-overlay-toggle" className="satellite-overlay-toggle">
+      <button
+        disabled={!isUsingSatellite}
+        id="satellite-overlay-toggle-default"
+        className={
+          !isUsingSatellite
+            ? "satellite-overlay-toggle-button-active"
+            : "satellite-overlay-toggle-button-inactive"
+        }
+        onClick={reset}
+      >
+        {copy[language].tiles.default}
+      </button>
+      <button
+        id="satellite-overlay-toggle-satellite"
+        className={
+          isUsingSatellite
+            ? "satellite-overlay-toggle-button-active"
+            : "satellite-overlay-toggle-button-inactive"
+        }
+        disabled={isUsingSatellite}
+        onClick={switchToSatellite}
+      >
+        {copy[language].tiles.satellite}
+      </button>
+    </div>
+  );
+};
+
+export default SatelliteOverlayToggle;

src/reducers/ui.js

@@ -1,9 +1,28 @@
 import initial from "../store/initial.js";
 
-import {} from "../actions";
+import { USE_SATELLITE_TILES_OVERLAY, RESET_TILES_OVERLAY } from "../actions";
 
 function ui(uiState = initial.ui, action) {
-  return uiState;
+  switch (action.type) {
+    case USE_SATELLITE_TILES_OVERLAY:
+      return {
+        ...uiState,
+        tiles: {
+          ...uiState.tiles,
+          current: "satellite",
+        },
+      };
+    case RESET_TILES_OVERLAY:
+      return {
+        ...uiState,
+        tiles: {
+          ...uiState.tiles,
+          current: uiState.tiles.default,
+        },
+      };
+    default:
+      return uiState;
+  }
 }
 
 export default ui;

src/scss/main.scss

@@ -13,3 +13,4 @@
 @import "mediaplayer";
 @import "cover";
 @import "search";
+@import "satelliteoverlaytoggle";

src/scss/satelliteoverlaytoggle.scss

@@ -0,0 +1,28 @@
+@import "variables";
+
+.satellite-overlay-toggle {
+  background-color: rgb(53, 53, 53);
+  opacity: 0.9;
+  position: fixed;
+  top: 4px;
+  left: 120px;
+  z-index: $map-overlay;
+}
+
+.satellite-overlay-toggle-button-active {
+  padding: 2px 4px 4px 4px;
+  border-style: none;
+  font-size: $small;
+  font-family: $mainfont;
+  background-color: rgb(53, 53, 53);
+  color: white;
+}
+
+.satellite-overlay-toggle-button-inactive {
+  padding: 2px 4px 4px 4px;
+  border-style: none;
+  font-size: $small;
+  font-family: $mainfont;
+  background-color: rgb(53, 53, 53);
+  color: rgb(159, 159, 159);
+}

src/store/initial.js

@@ -149,7 +149,10 @@ const initial = {
    *   as well as dom elements to attach SVG
    */
   ui: {
-    tiles: "openstreetmap", // ['openstreetmap', 'streets', 'satellite']
+    tiles: {
+      current: "openstreetmap", // ['openstreetmap', 'streets', 'satellite']
+      default: "openstreetmap", // ['openstreetmap', 'streets', 'satellite']
+    },
     style: {
       categories: {
         default: global.fallbackEventColor,