@micromag/screen-map 0.2.408 → 0.3.0

package/lib/index.js

@@ -6,22 +6,22 @@ var reactIntl = require('react-intl');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
-var PropTypes = require('prop-types');
 var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var core = require('@micromag/core');
-var contexts = require('@micromag/core/contexts');
 var components = require('@micromag/core/components');
+var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var elementBackground = require('@micromag/element-background');
+var ButtonElement = require('@micromag/element-button');
 var Container = require('@micromag/element-container');
-var Map = require('@micromag/element-map');
 var Heading = require('@micromag/element-heading');
+var ImageElement = require('@micromag/element-image');
+var Map = require('@micromag/element-map');
 var Scroll = require('@micromag/element-scroll');
 var Text = require('@micromag/element-text');
-var ImageElement = require('@micromag/element-image');
-var ButtonElement = require('@micromag/element-button');
 var _extends = require('@babel/runtime/helpers/extends');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
@@ -31,16 +31,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ButtonElement__default = /*#__PURE__*/_interopDefaultLegacy(ButtonElement);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
-var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
 var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
+var ImageElement__default = /*#__PURE__*/_interopDefaultLegacy(ImageElement);
+var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
 var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
-var ImageElement__default = /*#__PURE__*/_interopDefaultLegacy(ImageElement);
-var ButtonElement__default = /*#__PURE__*/_interopDefaultLegacy(ButtonElement);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
@@ -60,6 +60,9 @@ var propTypes = {
   button: core.PropTypes.textElement,
   openedMarkerSpacerHeight: PropTypes__default["default"].number,
   withMarkerImages: PropTypes__default["default"].bool,
+  center: core.PropTypes.geoPosition,
+  zoom: PropTypes__default["default"].number,
+  fitBounds: PropTypes__default["default"].bool,
   background: core.PropTypes.backgroundElement,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
@@ -73,6 +76,9 @@ var defaultProps = {
   layout: 'normal',
   draggable: true,
   markers: [],
+  center: defaultCenter,
+  zoom: defaultZoom,
+  fitBounds: true,
   title: null,
   description: null,
   button: null,
@@ -88,8 +94,8 @@ var defaultProps = {
   className: null
 };
 
-var MapScreen = function MapScreen(_ref) {
-  var _ref13;
+function MapScreen(_ref) {
+  var _ref16;
 
   var layout = _ref.layout,
       draggable = _ref.draggable,
@@ -99,6 +105,9 @@ var MapScreen = function MapScreen(_ref) {
       button = _ref.button,
       openedMarkerSpacerHeight = _ref.openedMarkerSpacerHeight,
       withMarkerImages = _ref.withMarkerImages,
+      zoom = _ref.zoom,
+      center = _ref.center,
+      fitBounds = _ref.fitBounds,
       background = _ref.background,
       current = _ref.current,
       active = _ref.active,
@@ -142,6 +151,8 @@ var MapScreen = function MapScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var screenState = contexts.useScreenState();
+
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
       ready = _useState4[0],
@@ -208,8 +219,8 @@ var MapScreen = function MapScreen(_ref) {
     trackScreenEvent('click_close', 'Close icon');
     closeMarker();
   }, [setOpened, onEnableInteraction, trackScreenEvent]);
-  var onMapDragEnd = React.useCallback(function (center) {
-    var coords = center.toJSON();
+  var onMapDragEnd = React.useCallback(function (newCenter) {
+    var coords = newCenter.toJSON();
     trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
       coords: coords
     });
@@ -283,211 +294,111 @@ var MapScreen = function MapScreen(_ref) {
     }
 
     return function () {};
-  }, [withMarkerImages, markers]);
-  var element = null;
+  }, [withMarkerImages, markers]); // Switch state
 
-  if (isPlaceholder) {
-    element = /*#__PURE__*/React__default["default"].createElement(components.PlaceholderMap, {
-      className: styles.placeholder,
-      withImages: withMarkerImages
-    });
-  } else if (isPreview) {
-    if (width > 0 && height > 0 && apiKey !== null) {
-      var staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
-
-      if (defaultCenter !== null && (markers === null || markers.length === 0)) {
-        var _ref7 = defaultCenter || {},
-            _ref7$lat = _ref7.lat,
-            lat = _ref7$lat === void 0 ? null : _ref7$lat,
-            _ref7$lng = _ref7.lng,
-            lng = _ref7$lng === void 0 ? null : _ref7$lng;
-
-        staticUrl += "&center=".concat(lat, ",").concat(lng);
-      }
+  React.useEffect(function () {
+    if (!isEdit && !isPreview) {
+      return;
+    }
 
-      {
-        staticUrl += "&zoom=".concat(defaultZoom);
-      }
+    var _ref7 = screenState !== null ? screenState.split('.') : [],
+        _ref8 = _slicedToArray__default["default"](_ref7, 2),
+        _ref8$ = _ref8[0],
+        stateId = _ref8$ === void 0 ? null : _ref8$,
+        _ref8$2 = _ref8[1],
+        markerIndex = _ref8$2 === void 0 ? null : _ref8$2;
+
+    if (stateId === 'intro') {
+      setOpened(false);
+      setSelectedMarkerIndex(null);
+    } else if (stateId === 'map') {
+      setOpened(true);
+      setSelectedMarkerIndex(null);
+    } else if (stateId === 'markers') {
+      setOpened(true);
+      setSelectedMarkerIndex(parseInt(markerIndex, 10));
+    }
+  }, [screenState, isEdit, setOpened]);
+  var staticUrl;
+
+  if (width > 0 && height > 0 && apiKey !== null) {
+    var correctMarkers = markers !== null ? markers.filter(function (it) {
+      return it !== null;
+    }).filter(function (_ref9) {
+      var _ref9$geoPosition = _ref9.geoPosition,
+          geoPosition = _ref9$geoPosition === void 0 ? null : _ref9$geoPosition;
+      return geoPosition !== null;
+    }) : null;
+    staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
+
+    if (center !== null && (correctMarkers === null || correctMarkers.length === 0)) {
+      var _ref10 = center || {},
+          _ref10$lat = _ref10.lat,
+          lat = _ref10$lat === void 0 ? null : _ref10$lat,
+          _ref10$lng = _ref10.lng,
+          lng = _ref10$lng === void 0 ? null : _ref10$lng;
+
+      staticUrl += "&center=".concat(lat, ",").concat(lng);
+    }
 
-      if (apiKey !== null) {
-        staticUrl += "&key=".concat(apiKey);
-      }
+    if (zoom !== null) {
+      staticUrl += "&zoom=".concat(zoom);
+    }
 
-      if (locale !== null) {
-        staticUrl += "&language=".concat(locale);
-      }
+    if (apiKey !== null) {
+      staticUrl += "&key=".concat(apiKey);
+    }
 
-      if (markers !== null) {
-        staticUrl += markers.map(function (marker) {
-          var _ref8 = marker || {},
-              _ref8$geoPosition = _ref8.geoPosition,
-              geoPosition = _ref8$geoPosition === void 0 ? null : _ref8$geoPosition;
+    if (locale !== null) {
+      staticUrl += "&language=".concat(locale);
+    }
 
-          var _ref9 = geoPosition || {},
-              _ref9$lat = _ref9.lat,
-              lat = _ref9$lat === void 0 ? null : _ref9$lat,
-              _ref9$lng = _ref9.lng,
-              lng = _ref9$lng === void 0 ? null : _ref9$lng;
+    if (correctMarkers !== null) {
+      staticUrl += correctMarkers.map(function (marker) {
+        var _ref11 = marker || {},
+            _ref11$geoPosition = _ref11.geoPosition,
+            geoPosition = _ref11$geoPosition === void 0 ? null : _ref11$geoPosition;
 
-          var _ref10 = marker || {},
-              _ref10$image = _ref10.image,
-              image = _ref10$image === void 0 ? null : _ref10$image;
+        var _ref12 = geoPosition || {},
+            _ref12$lat = _ref12.lat,
+            lat = _ref12$lat === void 0 ? null : _ref12$lat,
+            _ref12$lng = _ref12.lng,
+            lng = _ref12$lng === void 0 ? null : _ref12$lng;
 
-          var _ref11 = image || {},
-              _ref11$url = _ref11.url,
-              url = _ref11$url === void 0 ? null : _ref11$url;
+        var _ref13 = marker || {},
+            _ref13$image = _ref13.image,
+            image = _ref13$image === void 0 ? null : _ref13$image;
 
-          return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
-        }).join('');
-      }
+        var _ref14 = image || {},
+            _ref14$url = _ref14.url,
+            url = _ref14$url === void 0 ? null : _ref14$url;
 
-      element = /*#__PURE__*/React__default["default"].createElement(ImageElement__default["default"], {
-        media: {
-          url: staticUrl,
-          metadata: {
-            width: Math.min(640, width),
-            height: Math.min(640, height)
-          }
-        },
-        width: width,
-        height: height,
-        objectFit: {
-          fit: 'cover'
-        }
-      });
+        return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
+      }).join('');
     }
-  } else {
-    var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
-
-    var _ref12 = renderedMarker || {},
-        _ref12$title = _ref12.title,
-        markerTitle = _ref12$title === void 0 ? null : _ref12$title,
-        _ref12$subtitle = _ref12.subtitle,
-        markerSubtitle = _ref12$subtitle === void 0 ? null : _ref12$subtitle,
-        _ref12$description = _ref12.description,
-        markerDescription = _ref12$description === void 0 ? null : _ref12$description,
-        _ref12$image = _ref12.image,
-        markerImage = _ref12$image === void 0 ? null : _ref12$image;
-
-    var hasMarkerTitle = markerTitle !== null;
-    var hasMarkerSubtitle = markerSubtitle !== null;
-    var hasMarkerDescription = markerDescription !== null;
-    var hasMarkerImage = markerImage !== null;
-    var hasTitle = utils.isTextFilled(title);
-    var hasDescription = utils.isTextFilled(description);
-    var hasButton = utils.isTextFilled(button);
-    element = /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-      transitions: transitions,
-      playing: transitionPlaying,
-      fullscreen: true,
-      disabled: transitionDisabled
-    }, /*#__PURE__*/React__default["default"].createElement(Map__default["default"], {
-      key: "map",
-      center: defaultCenter,
-      zoom: defaultZoom,
-      draggable: draggable,
-      markers: finalMarkers,
-      fitBounds: true,
-      onClickMarker: onClickMarker,
-      onReady: onMapReady,
-      onDragEnd: onMapDragEnd
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      key: "marker-overlay",
-      className: styles.markerOverlayContainer
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles.markerOverlayScrollable
-    }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-      fullscreen: true,
-      disabled: scrollingDisabled,
-      onScrolledBottom: onScrolledBottom
-    }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      className: styles.markerOverlaySafe,
-      onClick: onClickMap,
-      withoutStyle: true,
-      style: {
-        height: height * openedMarkerSpacerHeight
-      },
-      disabled: isPreview,
-      focusable: current && isView
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles.markerOverlay,
-      style: {
-        minHeight: height * (1 - openedMarkerSpacerHeight)
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles.markerOverlayContent,
-      style: markerOverlayContentStyle
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles.swipeIndicator
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles.markerOverlayContentInner,
-      key: "markerContent-".concat(selectedMarkerIndex),
-      ref: markerOverContentInnerRef
-    }, hasMarkerImage ? /*#__PURE__*/React__default["default"].createElement(ImageElement__default["default"], {
-      className: styles.markerImage,
-      media: markerImage,
-      width: markerOverContentInnerWidth
-    }) : null, hasMarkerTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
-      className: styles.markerTitle
-    }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
-      size: 3,
-      className: styles.markerSubtitle
-    }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
-      className: styles.markerDescription
-    }, markerDescription)) : null)))))), /*#__PURE__*/React__default["default"].createElement("div", {
-      key: "splash",
-      className: classNames__default["default"]([styles.splash])
-    }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
-      emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-        id: "2ZOPe+",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      }),
-      emptyClassName: styles.emptyTitle,
-      isEmpty: !hasTitle
-    }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
-      className: styles.title
-    }, title))), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
-      emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-        id: "507VAi",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      }),
-      emptyClassName: styles.emptyDescription,
-      isEmpty: !hasDescription
-    }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
-      className: styles.description
-    }, description))), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
-      emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-        id: "bv3rRe",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      }),
-      emptyClassName: styles.emptyButton,
-      isEmpty: !hasButton
-    }, /*#__PURE__*/React__default["default"].createElement(ButtonElement__default["default"], {
-      className: styles.splashButton,
-      onClick: onButtonClick,
-      buttonStyle: button !== null ? button.buttonStyle : null,
-      focusable: current && isView
-    }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
-      className: styles.button
-    }, button))))), !isStatic && !isCapture ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      key: "close-button",
-      className: styles.closeButton,
-      onClick: onCloseClick,
-      focusable: current && isView
-    }, "\xD7") : null);
   }
 
+  var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
+
+  var _ref15 = renderedMarker || {},
+      _ref15$title = _ref15.title,
+      markerTitle = _ref15$title === void 0 ? null : _ref15$title,
+      _ref15$subtitle = _ref15.subtitle,
+      markerSubtitle = _ref15$subtitle === void 0 ? null : _ref15$subtitle,
+      _ref15$description = _ref15.description,
+      markerDescription = _ref15$description === void 0 ? null : _ref15$description,
+      _ref15$image = _ref15.image,
+      markerImage = _ref15$image === void 0 ? null : _ref15$image;
+
+  var hasMarkerTitle = markerTitle !== null;
+  var hasMarkerSubtitle = markerSubtitle !== null;
+  var hasMarkerDescription = markerDescription !== null;
+  var hasMarkerImage = markerImage !== null;
+  var hasTitle = utils.isTextFilled(title);
+  var hasDescription = utils.isTextFilled(description);
+  var hasButton = utils.isTextFilled(button);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, className, className !== null), _defineProperty__default["default"](_ref13, styles["".concat(layout, "Layout")], layout !== null), _defineProperty__default["default"](_ref13, styles.opened, opened), _defineProperty__default["default"](_ref13, styles.hasSelectedMarker, hasSelectedMarker), _ref13)]),
+    className: classNames__default["default"]([styles.container, (_ref16 = {}, _defineProperty__default["default"](_ref16, className, className !== null), _defineProperty__default["default"](_ref16, styles["".concat(layout, "Layout")], layout !== null), _defineProperty__default["default"](_ref16, styles.opened, opened || isPreview && screenState !== 'intro'), _defineProperty__default["default"](_ref16, styles.hasSelectedMarker, hasSelectedMarker), _ref16)]),
     "data-screen-ready": finalReady
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(elementBackground.Background, {
     color: {
@@ -501,8 +412,131 @@ var MapScreen = function MapScreen(_ref) {
   }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height
-  }, element));
-};
+  }, isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(components.PlaceholderMap, {
+    className: styles.placeholder,
+    withImages: withMarkerImages
+  }) : /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    fullscreen: true,
+    disabled: transitionDisabled
+  }, isPreview ? /*#__PURE__*/React__default["default"].createElement(ImageElement__default["default"], {
+    media: staticUrl !== null ? {
+      url: staticUrl,
+      metadata: {
+        width: Math.min(640, width),
+        height: Math.min(640, height)
+      }
+    } : null,
+    width: width,
+    height: height,
+    objectFit: {
+      fit: 'cover'
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(Map__default["default"], {
+    key: "map",
+    center: center,
+    zoom: zoom,
+    draggable: draggable,
+    markers: finalMarkers,
+    fitBounds: fitBounds,
+    onClickMarker: onClickMarker,
+    onReady: onMapReady,
+    onDragEnd: onMapDragEnd
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "marker-overlay",
+    className: styles.markerOverlayContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.markerOverlayScrollable
+  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
+    fullscreen: true,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom
+  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles.markerOverlaySafe,
+    onClick: onClickMap,
+    withoutStyle: true,
+    style: {
+      height: height * openedMarkerSpacerHeight
+    },
+    disabled: isPreview,
+    focusable: current && isView
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.markerOverlay,
+    style: {
+      minHeight: height * (1 - openedMarkerSpacerHeight)
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.markerOverlayContent,
+    style: markerOverlayContentStyle
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.swipeIndicator
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.markerOverlayContentInner,
+    key: "markerContent-".concat(selectedMarkerIndex),
+    ref: markerOverContentInnerRef
+  }, hasMarkerImage ? /*#__PURE__*/React__default["default"].createElement(ImageElement__default["default"], {
+    className: styles.markerImage,
+    media: markerImage,
+    width: markerOverContentInnerWidth
+  }) : null, hasMarkerTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+    className: styles.markerTitle
+  }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+    size: 3,
+    className: styles.markerSubtitle
+  }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+    className: styles.markerDescription
+  }, markerDescription)) : null)))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "splash",
+    className: classNames__default["default"]([styles.splash])
+  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "2ZOPe+",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: styles.emptyTitle,
+    isEmpty: !hasTitle
+  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+    className: styles.title
+  }, title))), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "507VAi",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    emptyClassName: styles.emptyDescription,
+    isEmpty: !hasDescription
+  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+    className: styles.description
+  }, description))), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "bv3rRe",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Button"
+      }]
+    }),
+    emptyClassName: styles.emptyButton,
+    isEmpty: !hasButton
+  }, /*#__PURE__*/React__default["default"].createElement(ButtonElement__default["default"], {
+    className: styles.splashButton,
+    onClick: onButtonClick,
+    buttonStyle: button !== null ? button.buttonStyle : null,
+    focusable: current && isView
+  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+    className: styles.button
+  }, button))))), !isStatic && !isCapture && !isPreview && !isEdit ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    key: "close-button",
+    className: styles.closeButton,
+    onClick: onCloseClick,
+    focusable: current && isView
+  }, "\xD7") : null)));
+}
 
 MapScreen.propTypes = propTypes;
 MapScreen.defaultProps = defaultProps;
@@ -561,7 +595,7 @@ var definition = [{
   type: 'screen',
   group: {
     label: reactIntl.defineMessage({
-      id: "8vroDx",
+      id: "Z27IP6",
       defaultMessage: [{
         "type": 0,
         "value": "Map"
@@ -570,7 +604,7 @@ var definition = [{
     order: 6
   },
   title: reactIntl.defineMessage({
-    id: "dmuKH3",
+    id: "dPYwJG",
     defaultMessage: [{
       "type": 0,
       "value": "Map"
@@ -579,79 +613,158 @@ var definition = [{
   component: MapScreen,
   layouts: ['normal'],
   transforms: transforms,
-  fields: [{
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
+  states: [{
+    id: 'intro',
     label: reactIntl.defineMessage({
-      id: "N25iDO",
+      id: "BgrRxZ",
       defaultMessage: [{
         "type": 0,
-        "value": "Title"
+        "value": "Intro"
       }]
-    })
-  }, {
-    name: 'description',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "1ezz2m",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    })
-  }, {
-    name: 'button',
-    type: 'button-element',
-    theme: {
-      textStyle: 'button'
-    },
-    label: reactIntl.defineMessage({
-      id: "enPTxj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Button"
-      }]
-    })
+    }),
+    fields: [{
+      name: 'title',
+      type: 'heading-element',
+      theme: {
+        textStyle: 'heading1'
+      },
+      label: reactIntl.defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: reactIntl.defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'button',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: reactIntl.defineMessage({
+        id: "i6bmbD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Button"
+        }]
+      })
+    }]
   }, {
-    name: 'draggable',
-    type: 'toggle',
-    defaultValue: true,
+    id: 'map',
     label: reactIntl.defineMessage({
-      id: "8Dl/S1",
+      id: "eYHEYe",
       defaultMessage: [{
         "type": 0,
-        "value": "Draggable"
+        "value": "Map"
       }]
-    })
+    }),
+    fields: [{
+      name: 'draggable',
+      type: 'toggle',
+      defaultValue: true,
+      label: reactIntl.defineMessage({
+        id: "A7ncT3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Draggable"
+        }]
+      })
+    }, {
+      name: 'fitBounds',
+      type: 'toggle',
+      defaultValue: true,
+      label: reactIntl.defineMessage({
+        id: "NVUpOG",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Map fit markers"
+        }]
+      })
+    }, {
+      name: 'zoom',
+      type: 'slider',
+      defaultValue: 9,
+      min: 0,
+      max: 16,
+      label: reactIntl.defineMessage({
+        id: "vRzzo6",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Zoom"
+        }]
+      })
+    }, {
+      name: 'center',
+      type: 'geo-position',
+      label: reactIntl.defineMessage({
+        id: "W5qWPj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Center"
+        }]
+      })
+    }]
   }, {
-    name: 'markers',
-    type: 'markers',
-    theme: {
-      title: {
-        textStyle: 'heading3'
-      },
-      description: {
-        textStyle: 'text'
-      }
-    },
+    id: 'markers',
     label: reactIntl.defineMessage({
-      id: "PbHeHc",
+      id: "+LvOvJ",
       defaultMessage: [{
         "type": 0,
         "value": "Markers"
       }]
-    })
-  }, {
+    }),
+    repeatable: true,
+    fieldName: 'markers',
+    fields: [{
+      name: 'title',
+      type: 'heading-element',
+      label: reactIntl.defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      label: reactIntl.defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'geoPosition',
+      type: 'geo-position',
+      label: reactIntl.defineMessage({
+        id: "u3ok54",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Position"
+        }]
+      })
+    }]
+  }],
+  fields: [{
     name: 'background',
     type: 'background',
     label: reactIntl.defineMessage({
-      id: "+MPZRu",
+      id: "cDj1mZ",
       defaultMessage: [{
         "type": 0,
         "value": "Background"
@@ -663,7 +776,7 @@ var definition = [{
   type: 'screen',
   group: {
     label: reactIntl.defineMessage({
-      id: "8vroDx",
+      id: "Z27IP6",
       defaultMessage: [{
         "type": 0,
         "value": "Map"
@@ -672,7 +785,7 @@ var definition = [{
     order: 6
   },
   title: reactIntl.defineMessage({
-    id: "MLuvzG",
+    id: "ro6yHS",
     defaultMessage: [{
       "type": 0,
       "value": "Map with image markers"
@@ -688,7 +801,7 @@ var definition = [{
       textStyle: 'heading1'
     },
     label: reactIntl.defineMessage({
-      id: "N25iDO",
+      id: "+AEVbJ",
       defaultMessage: [{
         "type": 0,
         "value": "Title"
@@ -701,7 +814,7 @@ var definition = [{
       textStyle: 'text'
     },
     label: reactIntl.defineMessage({
-      id: "1ezz2m",
+      id: "ZCe0r4",
       defaultMessage: [{
         "type": 0,
         "value": "Description"
@@ -714,7 +827,7 @@ var definition = [{
       textStyle: 'button'
     },
     label: reactIntl.defineMessage({
-      id: "enPTxj",
+      id: "i6bmbD",
       defaultMessage: [{
         "type": 0,
         "value": "Button"
@@ -725,7 +838,7 @@ var definition = [{
     type: 'toggle',
     defaultValue: true,
     label: reactIntl.defineMessage({
-      id: "8Dl/S1",
+      id: "A7ncT3",
       defaultMessage: [{
         "type": 0,
         "value": "Draggable"
@@ -743,7 +856,7 @@ var definition = [{
       }
     },
     label: reactIntl.defineMessage({
-      id: "D0+Cxr",
+      id: "CW3KAC",
       defaultMessage: [{
         "type": 0,
         "value": "Markers with image"
@@ -753,7 +866,7 @@ var definition = [{
     name: 'background',
     type: 'background',
     label: reactIntl.defineMessage({
-      id: "+MPZRu",
+      id: "cDj1mZ",
       defaultMessage: [{
         "type": 0,
         "value": "Background"