Improved thumbnail customization of Background Selector (#1870)

web/client/plugins/BackgroundSelector.jsx

@@ -20,6 +20,7 @@ const drawerEnabledControlSelector = (state) => (state.controls && state.control
 const HYBRID = require('./background/assets/img/HYBRID.jpg');
 const ROADMAP = require('./background/assets/img/ROADMAP.jpg');
 const TERRAIN = require('./background/assets/img/TERRAIN.jpg');
+const SATELLITE = require('./background/assets/img/SATELLITE.jpg');
 const Aerial = require('./background/assets/img/Aerial.jpg');
 const mapnik = require('./background/assets/img/mapnik.jpg');
 const mapquestOsm = require('./background/assets/img/mapquest-osm.jpg');
@@ -33,7 +34,8 @@ const thumbs = {
     google: {
         HYBRID,
         ROADMAP,
-        TERRAIN
+        TERRAIN,
+        SATELLITE
     },
     bing: {
         Aerial,
@@ -64,8 +66,7 @@ const backgroundSelector = createSelector([mapSelector, layersSelector, backgrou
         tempLayer: controls.tempLayer || {},
         currentLayer: controls.currentLayer || {},
         start: controls.start || 0,
-        enabled: controls.enabled && !drawer,
-        thumbs
+        enabled: controls.enabled && !drawer
     }));
 
 /**
@@ -99,7 +100,16 @@ const BackgroundSelectorPlugin = connect(backgroundSelector, {
     onToggle: toggleControl.bind(null, 'backgroundSelector', null),
     onLayerChange: setControlProperty.bind(null, 'backgroundSelector'),
     onStartChange: setControlProperty.bind(null, 'backgroundSelector', 'start')
-})(require('../components/background/BackgroundSelector'));
+}, (stateProps, dispatchProps, ownProps) => ({
+        ...stateProps,
+        ...dispatchProps,
+        ...ownProps,
+        thumbs: {
+            ...thumbs,
+            ...ownProps.thumbs
+        }
+    })
+)(require('../components/background/BackgroundSelector'));
 
 module.exports = {
     BackgroundSelectorPlugin,