@rio-cloud/rio-uikit 0.16.2-beta.8 → 0.16.2

package/components/map/components/features/basics/marker/Marker.js

@@ -1,16 +1,9 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /* eslint-disable no-undef */
-import React from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import ReactDomServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import mapProps from '../../../../utils/proptypes';
-import { addEventListenerMap, removeEventListenerMap, checkAndUpdateEventListenerMap } from '../../../../utils/eventHandling';
+import { addEventListenerMap, removeEventListenerMap } from '../../../../utils/eventHandling';
 import MapException from '../../../../exceptions/MapException';
 import { MapContext } from '../../../context';
 export var isHMapIcon = function isHMapIcon(icon) {
@@ -23,127 +16,114 @@ export function getOrCreateIcon(icon) {
   if (!icon || isHMapIcon(icon) || icon instanceof H.map.DomIcon) {
     return;
   }
-  var renderedIcon = /*#__PURE__*/React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup(icon) : icon;
+  var renderedIcon = /*#__PURE__*/React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup( /*#__PURE__*/React.cloneElement(icon)) : icon;
   return new H.map.DomIcon(renderedIcon);
 }
-var Marker = /*#__PURE__*/function (_React$Component) {
-  _inherits(Marker, _React$Component);
-  var _super = _createSuper(Marker);
-  function Marker(props, context) {
-    var _this;
-    _classCallCheck(this, Marker);
-    _this = _super.call(this, props, context);
-    //console.log(context);
-    _this.setupMarker(props);
-    return _this;
-  }
-
-  // eslint-disable-next-line camelcase
-  _createClass(Marker, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this$props = this.props,
-        position = _this$props.position,
-        customData = _this$props.customData,
-        icon = _this$props.icon;
-      checkAndUpdateEventListenerMap(this.marker, this.props, nextProps);
-      if (position !== nextProps.position) {
-        this.marker.setGeometry(this.getConvertedPosition(nextProps));
-      }
-      this.marker.draggable = !!nextProps.draggable;
-      if (customData !== nextProps.customData) {
-        this.marker.setData(nextProps.customData);
-      }
-      if (icon !== nextProps.icon) {
-        if (isDomMakerNeeded(icon) !== isDomMakerNeeded(nextProps.icon)) {
-          // icon type changed so we need to change the marker type
-          this.destroyMarker();
-          this.setupMarker(nextProps);
-        } else {
-          this.marker.setIcon(getOrCreateIcon(nextProps.icon));
-        }
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate() {
-      return false;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.destroyMarker();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }, {
-    key: "setupMarker",
-    value: function setupMarker(nextProps) {
-      var _this$props2 = this.props,
-        customData = _this$props2.customData,
-        draggable = _this$props2.draggable;
-      var MarkerConstructor = isDomMakerNeeded(nextProps.icon) ? H.map.DomMarker : H.map.Marker;
-      this.marker = new MarkerConstructor(this.getConvertedPosition(nextProps), {
-        icon: getOrCreateIcon(nextProps.icon)
-      });
-      this.marker.setData(customData);
-      this.marker.draggable = !!draggable;
-      this.context.group.addObject(this.marker);
-      addEventListenerMap(this.marker, nextProps.eventListenerMap, this.context.map);
+var convertPosition = function convertPosition(pos) {
+  return Array.isArray(pos) ? new H.geo.MultiPoint(pos) : pos;
+};
+var checkPositionProperties = function checkPositionProperties(position) {
+  ['lat', 'lng'].forEach(function (propertyName) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!position.hasOwnProperty(propertyName)) {
+      throw new MapException("Error in Marker: position object requires property \"".concat(propertyName, "\""));
     }
-  }, {
-    key: "destroyMarker",
-    value: function destroyMarker() {
-      removeEventListenerMap(this.marker);
-      if (this.context.group.getObjects().includes(this.marker)) {
-        this.context.group.removeObject(this.marker);
+  });
+};
+var getPosition = function getPosition(position) {
+  if (!position) {
+    throw new MapException('Error in Marker: invalid position property');
+  }
+  if (Array.isArray(position)) {
+    position.forEach(function (pos) {
+      return checkPositionProperties(pos);
+    });
+  } else {
+    checkPositionProperties(position);
+  }
+  return position;
+};
+var getConvertedPosition = function getConvertedPosition(position) {
+  return convertPosition(getPosition(position));
+};
+var setupMarker = function setupMarker(props, api) {
+  var position = props.position,
+    customData = props.customData,
+    icon = props.icon,
+    draggable = props.draggable,
+    eventListenerMap = props.eventListenerMap;
+  var MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
+  var marker = new MarkerConstructor(getConvertedPosition(position), {
+    icon: getOrCreateIcon(icon, api.settings.baseLayer)
+  });
+  marker.setData(customData);
+  marker.draggable = !!draggable;
+  api.map.addObject(marker);
+  addEventListenerMap(marker, eventListenerMap, api.map);
+  return marker;
+};
+var destroyMarker = function destroyMarker(marker, api) {
+  removeEventListenerMap(marker);
+  if (api.map.getObjects().includes(marker)) {
+    api.map.removeObject(marker);
+  }
+  marker.dispose();
+};
+var Marker = function Marker(props) {
+  var position = props.position,
+    customData = props.customData,
+    icon = props.icon,
+    eventListenerMap = props.eventListenerMap;
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
+  var markerRef = useRef();
+  useEffect(function () {
+    markerRef.current = setupMarker(props, api);
+    return function () {
+      if (markerRef.current) {
+        destroyMarker(markerRef.current, api);
+        markerRef.current = undefined;
       }
-      this.marker.dispose();
+    };
+  }, []);
+
+  // Update marker position
+  useEffect(function () {
+    if (markerRef.current) {
+      markerRef.current.setGeometry(getConvertedPosition(position));
     }
-  }, {
-    key: "getConvertedPosition",
-    value: function getConvertedPosition(props) {
-      return this.convertPosition(this.getPosition(props));
+  }, [position, markerRef.current]);
+
+  // Update marker custom data
+  useEffect(function () {
+    if (markerRef.current) {
+      markerRef.current.setData(customData);
     }
-  }, {
-    key: "getPosition",
-    value: function getPosition(props) {
-      var _this2 = this;
-      var position = props.position;
-      if (!position) {
-        throw new MapException('Error in Marker: invalid position property');
-      }
-      if (Array.isArray(position)) {
-        position.forEach(function (pos) {
-          return _this2.checkPositionProperties(pos);
-        });
-      } else {
-        this.checkPositionProperties(position);
-      }
-      return position;
+  }, [customData, markerRef.current]);
+
+  // Update EventListenerMap
+  useEffect(function () {
+    if (markerRef.current) {
+      // use exports to make methods accessible for stubbing
+      var mapApi = removeEventListenerMap(markerRef.current);
+      addEventListenerMap(markerRef.current, eventListenerMap, mapApi);
     }
-  }, {
-    key: "checkPositionProperties",
-    value: function checkPositionProperties(position) {
-      ['lat', 'lng'].forEach(function (propertyName) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (!position.hasOwnProperty(propertyName)) {
-          throw new MapException("Error in Marker: position object requires property \"".concat(propertyName, "\""));
-        }
-      });
+  }, [eventListenerMap, markerRef.current]);
+
+  // If icon type changed, we need to change the marker type
+  useEffect(function () {
+    if (!(markerRef.current && icon)) {
+      return;
     }
-  }, {
-    key: "convertPosition",
-    value: function convertPosition(pos) {
-      return Array.isArray(pos) ? new H.geo.MultiPoint(pos) : pos;
+    if (isDomMakerNeeded(icon)) {
+      destroyMarker(markerRef.current, api);
+      markerRef.current = setupMarker(props, api);
+    } else {
+      markerRef.current.setIcon(getOrCreateIcon(icon));
     }
-  }]);
-  return Marker;
-}(React.Component);
-Marker.contextType = MapContext;
+  }, [icon, markerRef.current]);
+  return null;
+};
 Marker.propTypes = {
   position: PropTypes.oneOfType([mapProps.position, mapProps.positions]).isRequired,
   icon: mapProps.icon,

package/components/map/components/features/basics/marker/TextMarker.js

@@ -1,56 +1,28 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
-// import ReactDomServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import MapException from '../../../../exceptions/MapException';
 import mapProps from '../../../../utils/proptypes';
 import Marker from './Marker';
 export var emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
 export var wrongTypeException = 'Error in TextMarker: property text must be string type';
-var TextMarker = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(TextMarker, _React$PureComponent);
-  var _super = _createSuper(TextMarker);
-  function TextMarker() {
-    _classCallCheck(this, TextMarker);
-    return _super.apply(this, arguments);
+var TextMarker = function TextMarker(props) {
+  var other = _extends({}, (_objectDestructuringEmpty(props), props));
+  var textDiv = "<div class=\"bg-white padding-x-5 padding-y-3 border border-color-darker shadow-accent\">".concat(getText(props.text), "</div>");
+  return /*#__PURE__*/React.createElement(Marker, _extends({}, other, {
+    icon: textDiv
+  }));
+};
+var getText = function getText(text) {
+  if (!text) {
+    throw new MapException(emptyTextException);
+  }
+  if (typeof text !== 'string') {
+    throw new MapException(wrongTypeException);
   }
-  _createClass(TextMarker, [{
-    key: "render",
-    value: function render() {
-      var other = _extends({}, (_objectDestructuringEmpty(this.props), this.props));
-
-      // const textDiv = ReactDomServer.renderToStaticMarkup(
-      //     <div style={{ border: '1px solid black', padding: '0 2px' }}>{this.getText()}</div>
-      // );
-
-      var textDiv = "<div>".concat(this.getText(), "</div>");
-      return /*#__PURE__*/React.createElement(Marker, _extends({}, other, {
-        icon: textDiv
-      }));
-    }
-  }, {
-    key: "getText",
-    value: function getText() {
-      var text = this.props.text;
-      if (!text) {
-        throw new MapException(emptyTextException);
-      }
-      if (typeof text !== 'string') {
-        throw new MapException(wrongTypeException);
-      }
-      return text;
-    }
-  }]);
-  return TextMarker;
-}(React.PureComponent);
+  return text;
+};
 TextMarker.propTypes = {
   position: PropTypes.oneOfType([mapProps.position, mapProps.positions]).isRequired,
   text: PropTypes.string.isRequired

package/components/map/components/features/layers/Layer.js

@@ -17,7 +17,7 @@ var Layer = function Layer(props) {
         newLayer.dispose();
       }
     };
-  }, []);
+  }, [api.map]);
   return null;
 };
 Layer.propTypes = {

package/components/map/components/features/layers/MarkerLayer.js

@@ -16,13 +16,15 @@ import { MapContext } from '../../context';
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */
 var MarkerLayer = function MarkerLayer(props) {
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var simpleTheme = props.simpleTheme,
     _props$clusterDissolv = props.clusterDissolvable,
     clusterDissolvable = _props$clusterDissolv === void 0 ? true : _props$clusterDissolv,
     rest = _objectWithoutProperties(props, _excluded);
+
   // Norbert: Not an ideal solution
-  var showCluster = !clusterDissolvable || getOr(true, 'settings.showCluster', context);
+  var showCluster = !clusterDissolvable || getOr(true, 'settings.showCluster', api);
   var newProps = _objectSpread({
     clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme)
   }, rest);
@@ -31,8 +33,9 @@ var MarkerLayer = function MarkerLayer(props) {
   }));
 };
 MarkerLayer.propTypes = {
-  // api: mapProps.api,
   simpleTheme: mapProps.clusterTheme,
-  clusterDissolvable: PropTypes.bool
+  clusterDissolvable: PropTypes.bool,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default MarkerLayer;

package/components/map/components/features/layers/RoadRestrictionLayer.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["useWebGL"];
 import React from 'react';
 import { FORMAT, TILE_SIZE } from '../../constants';
-import { getPPI } from '../../mapUtils';
 import Layer from './Layer';
 var createRoadRestrictionLayer = function createRoadRestrictionLayer(useWebGL) {
   return function (api, language) {
@@ -12,7 +11,7 @@ var createRoadRestrictionLayer = function createRoadRestrictionLayer(useWebGL) {
     }).createTileLayer('truckonlytile', 'normal.day', TILE_SIZE, FORMAT, {
       style: 'default',
       lg: language,
-      ppi: useWebGL ? undefined : getPPI()
+      ppi: undefined
     });
   };
 };

package/components/map/components/features/layers/TrafficLayer.js

@@ -4,7 +4,7 @@ var _excluded = ["useWebGL"];
 import React from 'react';
 import { FORMAT, TILE_SIZE } from '../../constants';
 import Layer from './Layer';
-var createVebGlTrafficLayer = function createVebGlTrafficLayer(api, language) {
+var createWebGlTrafficLayer = function createWebGlTrafficLayer(api, language) {
   // use new Here 3.1 API traffic layer for WebGL
   // https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
 
@@ -26,7 +26,7 @@ var createRasterTrafficLayer = function createRasterTrafficLayer(api, language)
 var TrafficLayer = function TrafficLayer(props) {
   var useWebGL = props.useWebGL,
     remainingProps = _objectWithoutProperties(props, _excluded);
-  var createLayerCallback = useWebGL ? createVebGlTrafficLayer : createRasterTrafficLayer;
+  var createLayerCallback = useWebGL ? createWebGlTrafficLayer : createRasterTrafficLayer;
   return /*#__PURE__*/React.createElement(Layer, _extends({}, remainingProps, {
     createLayer: createLayerCallback
   }));

package/components/map/components/features/layers/baselayers/DefaultRasterLayer.js

@@ -11,7 +11,8 @@ var DefaultRasterLayer = function DefaultRasterLayer(props) {
     language: language,
     mapType: MAP_TYPE_DEFAULT,
     additionalParameters: {
-      style: 'alps'
+      // should not be used as Vector map does not support it it would different anyhow
+      //style: 'alps',
     }
   });
   return null;

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -42,7 +42,10 @@ export var useBaseLayer = function useBaseLayer(props) {
     if (!baseLayer) {
       var additionalParametersWithLocale = _objectSpread(_objectSpread({}, additionalParameters), {}, {
         lg: mapToLongLocale(language),
-        ppi: getPPI()
+        // ppi: getPPI(),
+
+        // need to be set for better performence of legacy map
+        engineType: isWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D
       });
       var defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
       var newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -12,6 +12,16 @@ var convertData = function convertData(data, converterFunc) {
   return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
 };
 var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
+var getClusterStrategy = function getClusterStrategy(strategy) {
+  switch (strategy) {
+    case 'GRID':
+      return H.clustering.Provider.Strategy.GRID;
+    case 'DYNAMICGRID':
+      return H.clustering.Provider.Strategy.DYNAMICGRID;
+    default:
+      return H.clustering.Provider.Strategy.FASTGRID;
+  }
+};
 var ClusterLayer = function ClusterLayer(_ref) {
   var data = _ref.data,
     dataConverter = _ref.dataConverter,
@@ -20,8 +30,12 @@ var ClusterLayer = function ClusterLayer(_ref) {
     maxZoom = _ref.maxZoom,
     _ref$clusterTheme = _ref.clusterTheme,
     clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
-    eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+    eventListenerMap = _ref.eventListenerMap,
+    clusterStrategy = _ref.clusterStrategy,
+    _ref$eps = _ref.eps,
+    eps = _ref$eps === void 0 ? 100 : _ref$eps;
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     provider = _useState2[0],
@@ -29,8 +43,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
   useEffect(function () {
     var newProviderOptions = {
       clusteringOptions: {
-        strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
-        eps: 100,
+        strategy: getClusterStrategy(clusterStrategy),
+        eps: eps,
         minWeight: minWeight ? parseInt(minWeight, 10) : 2
       },
       min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -41,14 +55,14 @@ var ClusterLayer = function ClusterLayer(_ref) {
     };
     var newProvider = new H.clustering.Provider(convertData(data, dataConverter), newProviderOptions);
     var objectLayer = new H.map.layer.ObjectLayer(newProvider);
-    context.map.addLayer(objectLayer);
+    api.map.addLayer(objectLayer);
     setProvider(newProvider);
     return function () {
-      context.map.removeLayer(objectLayer);
+      api.map.removeLayer(objectLayer);
       objectLayer.dispose();
       newProvider.dispose();
     };
-  }, [minWeight, minZoom, maxZoom]);
+  }, [minWeight, minZoom, maxZoom, api.map]);
 
   // Effect to update data points of provider
   useLayoutEffect(function () {
@@ -57,7 +71,7 @@ var ClusterLayer = function ClusterLayer(_ref) {
     }
   }, [data, dataConverter]);
   useUpdateProp(provider, 'setTheme', clusterTheme);
-  useUpdateEventListenerMap(provider, eventListenerMap, context.map);
+  useUpdateEventListenerMap(provider, eventListenerMap, api.map);
   return null;
 };
 ClusterLayer.propTpyes = {
@@ -67,6 +81,8 @@ ClusterLayer.propTpyes = {
   minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   clusterTheme: mapProps.clusterTheme,
-  eventListenerMap: PropTypes.object
+  eventListenerMap: PropTypes.object,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default ClusterLayer;

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["mapType", "onMapTypeChange"];
+var _excluded = ["mapType", "onMapTypeChange", "enableNightMap"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN } from '../../../constants';
@@ -11,6 +11,7 @@ import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TR
 var MapTypeSettings = function MapTypeSettings(props) {
   var mapType = props.mapType,
     onMapTypeChange = props.onMapTypeChange,
+    enableNightMap = props.enableNightMap,
     remainingProps = _objectWithoutProperties(props, _excluded);
   var type = useMemo(function () {
     return {
@@ -51,7 +52,19 @@ var MapTypeSettings = function MapTypeSettings(props) {
   return /*#__PURE__*/React.createElement(MapSettingsTile, _extends({
     className: "MapTypeSettings",
     inactiveIcon: getIcon(type),
-    panel: /*#__PURE__*/React.createElement(MapSettingsPanel, null, /*#__PURE__*/React.createElement(MapSettingsItem, {
+    panel: /*#__PURE__*/React.createElement(MapSettingsPanel, null, enableNightMap && /*#__PURE__*/React.createElement(MapSettingsItem, {
+      className: "MapTypeNight",
+      onClick: function onClick() {
+        return onMapTypeChange(MAP_TYPE_NIGHT);
+      },
+      isActive: type.isNight,
+      activeIcon: /*#__PURE__*/React.createElement(MapIcon, {
+        name: MAP_TYPE_NIGHT_ACTIVE
+      }),
+      inactiveIcon: /*#__PURE__*/React.createElement(MapIcon, {
+        name: MAP_TYPE_NIGHT_INACTIVE
+      })
+    }), /*#__PURE__*/React.createElement(MapSettingsItem, {
       className: "MapTypeSatelite",
       onClick: function onClick() {
         return onMapTypeChange(MAP_TYPE_SATELLITE);
@@ -104,10 +117,12 @@ var MapTypeSettings = function MapTypeSettings(props) {
 };
 MapTypeSettings.displayName = 'MapTypeSettings';
 MapTypeSettings.defaultProps = {
-  onMapTypeChange: function onMapTypeChange() {}
+  onMapTypeChange: function onMapTypeChange() {},
+  enableNightMap: true
 };
 MapTypeSettings.propTypes = {
   mapType: PropTypes.string,
+  enableNightMap: PropTypes.bool,
   onMapTypeChange: PropTypes.func
 };
 export default MapTypeSettings;