@micromag/screen-map 0.2.408 → 0.3.0

package/es/index.js

@@ -2,22 +2,22 @@ import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { useGoogleKeys, useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
-import { Transitions, Button, ScreenElement, PlaceholderMap } from '@micromag/core/components';
+import { PlaceholderMap, Transitions, Button, ScreenElement } from '@micromag/core/components';
+import { useGoogleKeys, useScreenSize, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
 import { getStyleFromColor, isTextFilled } from '@micromag/core/utils';
 import { Background } from '@micromag/element-background';
+import ButtonElement from '@micromag/element-button';
 import Container from '@micromag/element-container';
-import Map from '@micromag/element-map';
 import Heading from '@micromag/element-heading';
+import ImageElement from '@micromag/element-image';
+import Map from '@micromag/element-map';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
-import ImageElement from '@micromag/element-image';
-import ButtonElement from '@micromag/element-button';
 import _extends from '@babel/runtime/helpers/extends';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Map as Map$1, Container as Container$1 } from '@micromag/transforms/apple-news';
@@ -38,6 +38,9 @@ var propTypes = {
   button: PropTypes$1.textElement,
   openedMarkerSpacerHeight: PropTypes.number,
   withMarkerImages: PropTypes.bool,
+  center: PropTypes$1.geoPosition,
+  zoom: PropTypes.number,
+  fitBounds: PropTypes.bool,
   background: PropTypes$1.backgroundElement,
   current: PropTypes.bool,
   active: PropTypes.bool,
@@ -51,6 +54,9 @@ var defaultProps = {
   layout: 'normal',
   draggable: true,
   markers: [],
+  center: defaultCenter,
+  zoom: defaultZoom,
+  fitBounds: true,
   title: null,
   description: null,
   button: null,
@@ -66,8 +72,8 @@ var defaultProps = {
   className: null
 };
 
-var MapScreen = function MapScreen(_ref) {
-  var _ref13;
+function MapScreen(_ref) {
+  var _ref16;
 
   var layout = _ref.layout,
       draggable = _ref.draggable,
@@ -77,6 +83,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,
@@ -120,6 +129,8 @@ var MapScreen = function MapScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var screenState = useScreenState();
+
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       ready = _useState4[0],
@@ -186,8 +197,8 @@ var MapScreen = function MapScreen(_ref) {
     trackScreenEvent('click_close', 'Close icon');
     closeMarker();
   }, [setOpened, onEnableInteraction, trackScreenEvent]);
-  var onMapDragEnd = useCallback(function (center) {
-    var coords = center.toJSON();
+  var onMapDragEnd = useCallback(function (newCenter) {
+    var coords = newCenter.toJSON();
     trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
       coords: coords
     });
@@ -261,211 +272,111 @@ var MapScreen = function MapScreen(_ref) {
     }
 
     return function () {};
-  }, [withMarkerImages, markers]);
-  var element = null;
+  }, [withMarkerImages, markers]); // Switch state
 
-  if (isPlaceholder) {
-    element = /*#__PURE__*/React.createElement(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);
-      }
+  useEffect(function () {
+    if (!isEdit && !isPreview) {
+      return;
+    }
 
-      {
-        staticUrl += "&zoom=".concat(defaultZoom);
-      }
+    var _ref7 = screenState !== null ? screenState.split('.') : [],
+        _ref8 = _slicedToArray(_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.createElement(ImageElement, {
-        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 = isTextFilled(title);
-    var hasDescription = isTextFilled(description);
-    var hasButton = isTextFilled(button);
-    element = /*#__PURE__*/React.createElement(Transitions, {
-      transitions: transitions,
-      playing: transitionPlaying,
-      fullscreen: true,
-      disabled: transitionDisabled
-    }, /*#__PURE__*/React.createElement(Map, {
-      key: "map",
-      center: defaultCenter,
-      zoom: defaultZoom,
-      draggable: draggable,
-      markers: finalMarkers,
-      fitBounds: true,
-      onClickMarker: onClickMarker,
-      onReady: onMapReady,
-      onDragEnd: onMapDragEnd
-    }), /*#__PURE__*/React.createElement("div", {
-      key: "marker-overlay",
-      className: styles.markerOverlayContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.markerOverlayScrollable
-    }, /*#__PURE__*/React.createElement(Scroll, {
-      fullscreen: true,
-      disabled: scrollingDisabled,
-      onScrolledBottom: onScrolledBottom
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: styles.markerOverlaySafe,
-      onClick: onClickMap,
-      withoutStyle: true,
-      style: {
-        height: height * openedMarkerSpacerHeight
-      },
-      disabled: isPreview,
-      focusable: current && isView
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.markerOverlay,
-      style: {
-        minHeight: height * (1 - openedMarkerSpacerHeight)
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.markerOverlayContent,
-      style: markerOverlayContentStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.swipeIndicator
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.markerOverlayContentInner,
-      key: "markerContent-".concat(selectedMarkerIndex),
-      ref: markerOverContentInnerRef
-    }, hasMarkerImage ? /*#__PURE__*/React.createElement(ImageElement, {
-      className: styles.markerImage,
-      media: markerImage,
-      width: markerOverContentInnerWidth
-    }) : null, hasMarkerTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-      className: styles.markerTitle
-    }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-      size: 3,
-      className: styles.markerSubtitle
-    }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
-      className: styles.markerDescription
-    }, markerDescription)) : null)))))), /*#__PURE__*/React.createElement("div", {
-      key: "splash",
-      className: classNames([styles.splash])
-    }, /*#__PURE__*/React.createElement(ScreenElement, {
-      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "2ZOPe+",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      }),
-      emptyClassName: styles.emptyTitle,
-      isEmpty: !hasTitle
-    }, /*#__PURE__*/React.createElement(Heading, Object.assign({
-      className: styles.title
-    }, title))), /*#__PURE__*/React.createElement(ScreenElement, {
-      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "507VAi",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      }),
-      emptyClassName: styles.emptyDescription,
-      isEmpty: !hasDescription
-    }, /*#__PURE__*/React.createElement(Text, Object.assign({
-      className: styles.description
-    }, description))), /*#__PURE__*/React.createElement(ScreenElement, {
-      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "bv3rRe",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      }),
-      emptyClassName: styles.emptyButton,
-      isEmpty: !hasButton
-    }, /*#__PURE__*/React.createElement(ButtonElement, {
-      className: styles.splashButton,
-      onClick: onButtonClick,
-      buttonStyle: button !== null ? button.buttonStyle : null,
-      focusable: current && isView
-    }, /*#__PURE__*/React.createElement(Text, Object.assign({
-      className: styles.button
-    }, button))))), !isStatic && !isCapture ? /*#__PURE__*/React.createElement(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 = isTextFilled(title);
+  var hasDescription = isTextFilled(description);
+  var hasButton = isTextFilled(button);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles["".concat(layout, "Layout")], layout !== null), _defineProperty(_ref13, styles.opened, opened), _defineProperty(_ref13, styles.hasSelectedMarker, hasSelectedMarker), _ref13)]),
+    className: classNames([styles.container, (_ref16 = {}, _defineProperty(_ref16, className, className !== null), _defineProperty(_ref16, styles["".concat(layout, "Layout")], layout !== null), _defineProperty(_ref16, styles.opened, opened || isPreview && screenState !== 'intro'), _defineProperty(_ref16, styles.hasSelectedMarker, hasSelectedMarker), _ref16)]),
     "data-screen-ready": finalReady
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     color: {
@@ -479,8 +390,131 @@ var MapScreen = function MapScreen(_ref) {
   }) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
-  }, element));
-};
+  }, isPlaceholder ? /*#__PURE__*/React.createElement(PlaceholderMap, {
+    className: styles.placeholder,
+    withImages: withMarkerImages
+  }) : /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    fullscreen: true,
+    disabled: transitionDisabled
+  }, isPreview ? /*#__PURE__*/React.createElement(ImageElement, {
+    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.createElement(Map, {
+    key: "map",
+    center: center,
+    zoom: zoom,
+    draggable: draggable,
+    markers: finalMarkers,
+    fitBounds: fitBounds,
+    onClickMarker: onClickMarker,
+    onReady: onMapReady,
+    onDragEnd: onMapDragEnd
+  }), /*#__PURE__*/React.createElement("div", {
+    key: "marker-overlay",
+    className: styles.markerOverlayContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.markerOverlayScrollable
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    fullscreen: true,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: styles.markerOverlaySafe,
+    onClick: onClickMap,
+    withoutStyle: true,
+    style: {
+      height: height * openedMarkerSpacerHeight
+    },
+    disabled: isPreview,
+    focusable: current && isView
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.markerOverlay,
+    style: {
+      minHeight: height * (1 - openedMarkerSpacerHeight)
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.markerOverlayContent,
+    style: markerOverlayContentStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.swipeIndicator
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.markerOverlayContentInner,
+    key: "markerContent-".concat(selectedMarkerIndex),
+    ref: markerOverContentInnerRef
+  }, hasMarkerImage ? /*#__PURE__*/React.createElement(ImageElement, {
+    className: styles.markerImage,
+    media: markerImage,
+    width: markerOverContentInnerWidth
+  }) : null, hasMarkerTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: styles.markerTitle
+  }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    size: 3,
+    className: styles.markerSubtitle
+  }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.markerDescription
+  }, markerDescription)) : null)))))), /*#__PURE__*/React.createElement("div", {
+    key: "splash",
+    className: classNames([styles.splash])
+  }, /*#__PURE__*/React.createElement(ScreenElement, {
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "2ZOPe+",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: styles.emptyTitle,
+    isEmpty: !hasTitle
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: styles.title
+  }, title))), /*#__PURE__*/React.createElement(ScreenElement, {
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "507VAi",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    emptyClassName: styles.emptyDescription,
+    isEmpty: !hasDescription
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.description
+  }, description))), /*#__PURE__*/React.createElement(ScreenElement, {
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "bv3rRe",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Button"
+      }]
+    }),
+    emptyClassName: styles.emptyButton,
+    isEmpty: !hasButton
+  }, /*#__PURE__*/React.createElement(ButtonElement, {
+    className: styles.splashButton,
+    onClick: onButtonClick,
+    buttonStyle: button !== null ? button.buttonStyle : null,
+    focusable: current && isView
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.button
+  }, button))))), !isStatic && !isCapture && !isPreview && !isEdit ? /*#__PURE__*/React.createElement(Button, {
+    key: "close-button",
+    className: styles.closeButton,
+    onClick: onCloseClick,
+    focusable: current && isView
+  }, "\xD7") : null)));
+}
 
 MapScreen.propTypes = propTypes;
 MapScreen.defaultProps = defaultProps;
@@ -539,7 +573,7 @@ var definition = [{
   type: 'screen',
   group: {
     label: defineMessage({
-      id: "8vroDx",
+      id: "Z27IP6",
       defaultMessage: [{
         "type": 0,
         "value": "Map"
@@ -548,7 +582,7 @@ var definition = [{
     order: 6
   },
   title: defineMessage({
-    id: "dmuKH3",
+    id: "dPYwJG",
     defaultMessage: [{
       "type": 0,
       "value": "Map"
@@ -557,79 +591,158 @@ var definition = [{
   component: MapScreen,
   layouts: ['normal'],
   transforms: transforms,
-  fields: [{
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
+  states: [{
+    id: 'intro',
     label: defineMessage({
-      id: "N25iDO",
+      id: "BgrRxZ",
       defaultMessage: [{
         "type": 0,
-        "value": "Title"
+        "value": "Intro"
       }]
-    })
-  }, {
-    name: 'description',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: defineMessage({
-      id: "1ezz2m",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    })
-  }, {
-    name: 'button',
-    type: 'button-element',
-    theme: {
-      textStyle: 'button'
-    },
-    label: defineMessage({
-      id: "enPTxj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Button"
-      }]
-    })
+    }),
+    fields: [{
+      name: 'title',
+      type: 'heading-element',
+      theme: {
+        textStyle: 'heading1'
+      },
+      label: defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'button',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: defineMessage({
+        id: "i6bmbD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Button"
+        }]
+      })
+    }]
   }, {
-    name: 'draggable',
-    type: 'toggle',
-    defaultValue: true,
+    id: 'map',
     label: defineMessage({
-      id: "8Dl/S1",
+      id: "eYHEYe",
       defaultMessage: [{
         "type": 0,
-        "value": "Draggable"
+        "value": "Map"
       }]
-    })
+    }),
+    fields: [{
+      name: 'draggable',
+      type: 'toggle',
+      defaultValue: true,
+      label: defineMessage({
+        id: "A7ncT3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Draggable"
+        }]
+      })
+    }, {
+      name: 'fitBounds',
+      type: 'toggle',
+      defaultValue: true,
+      label: defineMessage({
+        id: "NVUpOG",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Map fit markers"
+        }]
+      })
+    }, {
+      name: 'zoom',
+      type: 'slider',
+      defaultValue: 9,
+      min: 0,
+      max: 16,
+      label: defineMessage({
+        id: "vRzzo6",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Zoom"
+        }]
+      })
+    }, {
+      name: 'center',
+      type: 'geo-position',
+      label: defineMessage({
+        id: "W5qWPj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Center"
+        }]
+      })
+    }]
   }, {
-    name: 'markers',
-    type: 'markers',
-    theme: {
-      title: {
-        textStyle: 'heading3'
-      },
-      description: {
-        textStyle: 'text'
-      }
-    },
+    id: 'markers',
     label: defineMessage({
-      id: "PbHeHc",
+      id: "+LvOvJ",
       defaultMessage: [{
         "type": 0,
         "value": "Markers"
       }]
-    })
-  }, {
+    }),
+    repeatable: true,
+    fieldName: 'markers',
+    fields: [{
+      name: 'title',
+      type: 'heading-element',
+      label: defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      label: defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'geoPosition',
+      type: 'geo-position',
+      label: defineMessage({
+        id: "u3ok54",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Position"
+        }]
+      })
+    }]
+  }],
+  fields: [{
     name: 'background',
     type: 'background',
     label: defineMessage({
-      id: "+MPZRu",
+      id: "cDj1mZ",
       defaultMessage: [{
         "type": 0,
         "value": "Background"
@@ -641,7 +754,7 @@ var definition = [{
   type: 'screen',
   group: {
     label: defineMessage({
-      id: "8vroDx",
+      id: "Z27IP6",
       defaultMessage: [{
         "type": 0,
         "value": "Map"
@@ -650,7 +763,7 @@ var definition = [{
     order: 6
   },
   title: defineMessage({
-    id: "MLuvzG",
+    id: "ro6yHS",
     defaultMessage: [{
       "type": 0,
       "value": "Map with image markers"
@@ -666,7 +779,7 @@ var definition = [{
       textStyle: 'heading1'
     },
     label: defineMessage({
-      id: "N25iDO",
+      id: "+AEVbJ",
       defaultMessage: [{
         "type": 0,
         "value": "Title"
@@ -679,7 +792,7 @@ var definition = [{
       textStyle: 'text'
     },
     label: defineMessage({
-      id: "1ezz2m",
+      id: "ZCe0r4",
       defaultMessage: [{
         "type": 0,
         "value": "Description"
@@ -692,7 +805,7 @@ var definition = [{
       textStyle: 'button'
     },
     label: defineMessage({
-      id: "enPTxj",
+      id: "i6bmbD",
       defaultMessage: [{
         "type": 0,
         "value": "Button"
@@ -703,7 +816,7 @@ var definition = [{
     type: 'toggle',
     defaultValue: true,
     label: defineMessage({
-      id: "8Dl/S1",
+      id: "A7ncT3",
       defaultMessage: [{
         "type": 0,
         "value": "Draggable"
@@ -721,7 +834,7 @@ var definition = [{
       }
     },
     label: defineMessage({
-      id: "D0+Cxr",
+      id: "CW3KAC",
       defaultMessage: [{
         "type": 0,
         "value": "Markers with image"
@@ -731,7 +844,7 @@ var definition = [{
     name: 'background',
     type: 'background',
     label: defineMessage({
-      id: "+MPZRu",
+      id: "cDj1mZ",
       defaultMessage: [{
         "type": 0,
         "value": "Background"