@evergis/react 2.0.111 → 2.0.112

package/dist/react.esm.js

@@ -17,12 +17,8 @@ import { ImageFill } from '@evergis/sgis/es/symbols/polygon/ImageFill';
 import { PolygonSymbol } from '@evergis/sgis/es/symbols/polygon/Simple';
 import { PolylineSymbol } from '@evergis/sgis/es/symbols/PolylineSymbol';
 import { PolyRender, FillStyle } from '@evergis/sgis/es/renders/Poly';
-import { projectRings, length, area, distance } from '@evergis/sgis/es/geotools';
+import { projectRings, distance, length, area } from '@evergis/sgis/es/geotools';
 import { simplifyCoordinates, softEquals } from '@evergis/sgis/es/utils/math';
-import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
-import { LabelFeature } from '@evergis/sgis/es/features/Label';
-import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
-import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
 import ReactDOM from 'react-dom';
 import { DynamicPointSymbol, Symbol as Symbol$1 } from '@evergis/sgis/es/symbols/Symbol';
 import { Poly } from '@evergis/sgis/es/features/Poly';
@@ -35,6 +31,7 @@ import { SquareSymbol } from '@evergis/sgis/es/symbols/point/Square';
 import { MaskedImage } from '@evergis/sgis/es/symbols/point/MaskedImage';
 import { Canvas } from '@evergis/sgis/es/painters/DomPainter/Canvas';
 import { sGisClickEvent } from '@evergis/sgis/es/commonEvents';
+import { LabelFeature } from '@evergis/sgis/es/features/Label';
 import { ClusterLayer as ClusterLayer$1 } from '@evergis/sgis/es/layers/ClusterLayer';
 import { GridClusterProvider } from '@evergis/sgis/es/layers/clusterProviders/GridClusterProvider';
 import { PointEditor } from '@evergis/sgis/es/controls/PointEditor';
@@ -43,6 +40,9 @@ import styled, { css } from 'styled-components';
 import { Icon } from '@evergis/ui';
 import punycode from 'punycode';
 import { TileLayer as TileLayer$1 } from '@evergis/sgis/es/layers/TileLayer';
+import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
+import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
+import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -63,9 +63,6 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
   return Constructor;
 }
 
@@ -99,9 +96,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -160,8 +154,6 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -195,7 +187,7 @@ function _superPropBase(object, property) {
   return object;
 }
 
-function _get() {
+function _get(target, property, receiver) {
   if (typeof Reflect !== "undefined" && Reflect.get) {
     _get = Reflect.get;
   } else {
@@ -206,14 +198,14 @@ function _get() {
       var desc = Object.getOwnPropertyDescriptor(base, property);
 
       if (desc.get) {
-        return desc.get.call(arguments.length < 3 ? target : receiver);
+        return desc.get.call(receiver);
       }
 
       return desc.value;
     };
   }
 
-  return _get.apply(this, arguments);
+  return _get(target, property, receiver || target);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -242,7 +234,7 @@ const defaultApi = /*#__PURE__*/new Api({
   url: BASE_URL
 });
 const evergisContext = /*#__PURE__*/createContext(defaultApi);
-const EvergisProvider = _ref => {
+const EvergisProvider = (_ref) => {
   let {
     api,
     children
@@ -260,7 +252,7 @@ const mapContext = /*#__PURE__*/createContext({
   map: defaultMap,
   painter: defaultPainter
 });
-const MapProvider = _ref => {
+const MapProvider = (_ref) => {
   let {
     map,
     painter,
@@ -282,7 +274,7 @@ const tooltipContext = /*#__PURE__*/createContext({
   layer: defaultLayer,
   popupLayer: defaultPopupLayer
 });
-const TooltipProvider = _ref => {
+const TooltipProvider = (_ref) => {
   let {
     layer,
     popupLayer,
@@ -299,7 +291,7 @@ const TooltipProvider = _ref => {
 const useTooltipContext = () => useContext(tooltipContext);
 
 const LegendContext = /*#__PURE__*/createContext(null);
-const LegendProvider = _ref => {
+const LegendProvider = (_ref) => {
   let {
     symbol,
     children
@@ -311,7 +303,7 @@ const LegendProvider = _ref => {
 const useLegendContext = () => useContext(LegendContext);
 
 const evergisSelectContext = /*#__PURE__*/createContext([]);
-const EvergisSelectProvider = _ref => {
+const EvergisSelectProvider = (_ref) => {
   let {
     layers,
     children
@@ -356,7 +348,7 @@ function useMapViewActions() {
   }, [map]);
   const zoomIn = useCallback(() => zoomTo(1), [zoomTo]);
   const zoomOut = useCallback(() => zoomTo(-1), [zoomTo]);
-  const animateTo = useCallback(_ref => {
+  const animateTo = useCallback((_ref) => {
     let {
       position,
       resolution,
@@ -386,7 +378,7 @@ function useMapViewActions() {
     const {
       tileScheme
     } = map;
-    let tileLevel = tileScheme.levels.find(_ref2 => {
+    let tileLevel = tileScheme.levels.find((_ref2) => {
       let {
         zIndex
       } = _ref2;
@@ -562,7 +554,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every(_ref => {
+  if (attributeValues.every((_ref) => {
     let {
       type
     } = _ref;
@@ -570,7 +562,7 @@ const formatStringAttribute = value => {
   }
   /* String */
   )) {
-    return [stringAttribute(attributeValues.map(_ref2 => {
+    return [stringAttribute(attributeValues.map((_ref2) => {
       let {
         value
       } = _ref2;
@@ -1053,7 +1045,7 @@ const getFeatureAttributeType = attributeValue => {
 };
 const getLayerAttributes = layerDefinition => {
   const attributes = layerDefinition && layerDefinition.attributes || {};
-  return Object.entries(attributes).map(_ref => {
+  return Object.entries(attributes).map((_ref) => {
     let [name, definition] = _ref;
     return _extends({
       name
@@ -1061,7 +1053,7 @@ const getLayerAttributes = layerDefinition => {
   });
 };
 const getFeatureAttributes = attributes => {
-  return attributes ? Object.entries(attributes).map(_ref2 => {
+  return attributes ? Object.entries(attributes).map((_ref2) => {
     let [name, value] = _ref2;
     return {
       name,
@@ -1079,7 +1071,7 @@ const getClassificationAttribute = (attributeName, attributes) => {
   return attribute ? _extends({}, attrNamePart, attribute) : attrNamePart;
 };
 const mergeAttributes = (attributes1, attributes2) => {
-  return attributes1.map(attribute => _extends({}, attribute, attributes2.find(_ref3 => {
+  return attributes1.map(attribute => _extends({}, attribute, attributes2.find((_ref3) => {
     let {
       name
     } = _ref3;
@@ -1494,7 +1486,7 @@ let SGisPolygonSymbol = /*#__PURE__*/function (_sPolygonSymbol) {
 const adaptMiterRings = (rings, resolution, fromCrs, toCrs) => {
   const projected = projectRings(rings, fromCrs, toCrs);
   return simplifyCoordinates(projected.map(ring => // @ts-ignore
-  ring.map(_ref => {
+  ring.map((_ref) => {
     let [x, y] = _ref;
     return [x / resolution, y / -resolution];
   })), 1);
@@ -1586,1518 +1578,1178 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   return ArrowLineMiterRender;
 }(LineMiterRender);
 
-const DEFAULT_FORMATTERS = {
-  polygon: formatPolygonMeasure,
-  length: formatLength
-};
-
-const COORD_FRACTION = 6;
-const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
-let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
-  _inherits(BaseMeasureToolCreator, _PolylineControl);
-
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(CircleLineMiterRender, _LineMiterRender);
 
-  function BaseMeasureToolCreator(map, painter, params) {
-    var _this;
+  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
 
-    _classCallCheck(this, BaseMeasureToolCreator);
+  function CircleLineMiterRender() {
+    _classCallCheck(this, CircleLineMiterRender);
 
-    _this = _super.call(this, map, params);
+    return _super.apply(this, arguments);
+  }
 
-    _this.cancel = () => {
-      _this.fire('cancel');
-    };
+  _createClass(CircleLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth * 3;
+    }
+  }, {
+    key: "createRings",
+    value: function createRings(_ref, xMultiplier) {
+      let [x, y] = _ref;
+      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
+    }
+  }, {
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledCircle;
+      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
+        fillColor: isFilled ? this.color : 'transparent',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth,
+        enclosed: true
+      });
+    }
+  }]);
 
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-    _this.areaSymbol = params.areaSymbol;
+  return CircleLineMiterRender;
+}(LineMiterRender);
 
-    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(SquareLineMiterRender, _LineMiterRender);
 
+  var _super = /*#__PURE__*/_createSuper(SquareLineMiterRender);
 
-    _this.on('change', _this.updateDistance);
+  function SquareLineMiterRender() {
+    _classCallCheck(this, SquareLineMiterRender);
 
-    return _this;
+    return _super.apply(this, arguments);
   }
 
-  _createClass(BaseMeasureToolCreator, [{
-    key: "_handleMousemove",
-    value: function _handleMousemove(event) {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_handleMousemove", this).call(this, event);
-
-      this.drawPointOnMouseMove(event);
+  _createClass(SquareLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth;
     }
   }, {
-    key: "_activate",
-    value: function _activate() {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_activate", this).call(this);
-
-      this.addTempLabel();
-      this.setCursor('pointer');
+    key: "createRings",
+    value: function createRings(_ref, xMultiplier) {
+      let [x, y] = _ref;
+      return [[[x, y + this.miterSize / 2], [x, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y + this.miterSize / 2]]];
     }
   }, {
-    key: "_deactivate",
-    value: function _deactivate() {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_deactivate", this).call(this);
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledSquare;
+      return new PolyRender(miterRings, {
+        enclosed: true,
+        fillColor: isFilled ? this.color : void 0,
+        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
+        lineCap: 'square',
+        lineJoin: 'miter',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth
+      });
+    }
+  }]);
 
-      this.removeCoordLabel();
-      this.removeTempLabel();
-      this.removeMeasureLabel();
-      this.removeTempPolygon();
-      this.setCursor('default');
+  return SquareLineMiterRender;
+}(LineMiterRender);
+
+const getLineMiterRender = options => {
+  switch (options.kind) {
+    case LineMiterKind.Arrow:
+    case LineMiterKind.FilledArrow:
+      return new ArrowLineMiterRender(options);
+
+    case LineMiterKind.Square:
+    case LineMiterKind.FilledSquare:
+      return new SquareLineMiterRender(options);
+
+    case LineMiterKind.Circle:
+    case LineMiterKind.FilledCircle:
+      return new CircleLineMiterRender(options);
+
+    default:
+      return null;
+  }
+};
+
+const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
+  const reversedRing = ring.slice().reverse();
+
+  for (let i = 0; i < reversedRing.length; i++) {
+    const coordinates = reversedRing[i];
+
+    if (isLastRing && i === 0) {
+      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
     }
-  }, {
-    key: "handlePointAdd",
-    value: function handlePointAdd() {
-      const feature = this.activeFeature;
-      if (!feature) return;
-      const {
-        rings,
-        crs
-      } = feature;
 
-      if (isPolylineLikePolygon(rings, this.map.resolution)) {
-        this.finishDrawing();
-        this.fire(new DrawingFinishEvent(feature, new MouseEvent('mouseup')));
-        return;
-      }
+    const nextCoordinates = reversedRing[i - 1];
 
-      if (rings[0].length === 2) {
-        const projection = crs.projectionTo(geo);
-        const point = rings[0][0];
-        if (!projection) return;
-        const [lat, long] = projection(point);
-        this.removeTempLabel();
-        this.addMeasureResultLabel();
-        this.addCoordLabel(lat.toFixed(COORD_FRACTION) + ", " + long.toFixed(COORD_FRACTION), point);
-      } else {
-        this.removeCoordLabel();
-      }
+    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
+      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "polygonPreview",
-    value: function polygonPreview() {
-      if (this.tempPolygon) {
-        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
-      }
+  }
 
-      const feature = this.activeFeature;
-      if (!feature) return;
-      const {
-        rings,
-        crs
-      } = feature;
-      const polygonRings = [...rings[0]];
-      polygonRings.shift();
-      this.tempPolygon = new Polygon(polygonRings, {
-        crs
-      });
-      this.tempPolygon.symbol = this.areaSymbol || measureAreaSymbol;
-      this.activeFeature && this.activeFeature.hide();
-      this._tempLayer && this._tempLayer.add(this.tempPolygon);
+  return reversedRing.reverse();
+};
+
+const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
+  const newRing = ring.slice();
+
+  for (let i = 0; i < newRing.length; i++) {
+    const coordinates = newRing[i];
+
+    if (i === 0 && isFirstRing) {
+      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
     }
-  }, {
-    key: "removeTempPolygon",
-    value: function removeTempPolygon() {
-      if (this.tempPolygon) {
-        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
-        delete this.tempPolygon;
-      }
+
+    const prevCoordinates = newRing[i - 1];
+
+    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
+      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "updateDistance",
-    value: function updateDistance(event) {
-      const feature = this.activeFeature;
-      const {
-        ringIndex,
-        pointIndex
-      } = event;
-      if (!feature || ringIndex === null || pointIndex === null) return;
-      const {
-        rings,
-        crs
-      } = feature;
-      const position = rings[ringIndex][pointIndex];
-      const length$1 = length(rings, crs);
-      let content = this.formatters.length(length$1);
+  }
 
-      if (isPolylineLikePolygon(rings, this.map.resolution)) {
-        this.polygonPreview();
-        const area$1 = area(rings, crs);
-        content = this.formatters.polygon(area$1, length$1);
-      } else if (this.tempPolygon) {
-        feature.show();
-        this.removeTempPolygon();
-      }
+  return newRing;
+};
 
-      if (this.measureResultLabel) {
-        this.measureResultLabel.position = position;
-        this.measureResultLabel.content = content;
-      }
+const updateRingsForMiter = (rings, position, miterSize) => {
+  return rings.map((ring, ringIndex) => {
+    switch (position) {
+      case 'right':
+        return updateRingForRightMiter(ring, miterSize, ringIndex === rings.length - 1);
+
+      default:
+        return updateRingForLeftMiter(ring, miterSize, ringIndex === 0);
     }
-  }, {
-    key: "addTempLabel",
-    value: function addTempLabel() {
-      this.tempLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
-        content: 'Нажмите на карту, чтобы начать измерение',
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol
-        })
-      });
-      this._tempLayer && this._tempLayer.add(this.tempLabel);
-    }
-  }, {
-    key: "addCoordLabel",
-    value: function addCoordLabel(content, position) {
-      this.coordLabel = new LabelFeature(position, {
-        content,
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol,
-          onClose: this.cancel
-        })
+  });
+};
+
+const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
+let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
+  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
+
+  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
+
+  function SGisPolylineSymbol(originalSymbol) {
+    var _originalSymbol$strok, _originalSymbol$strok2;
+
+    var _this;
+
+    _classCallCheck(this, SGisPolylineSymbol);
+
+    _this = _super.call(this, {
+      // @ts-ignore
+      strokeColor: getHexColor(getParameterValue((_originalSymbol$strok = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok.color)),
+      strokeWidth: clamp( // @ts-ignore
+      getParameterValue((_originalSymbol$strok2 = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok2.width), PREVIEW_LIMITS.STROKE_WIDTH_MIN, PREVIEW_LIMITS.STROKE_WIDTH_MAX),
+      // @ts-ignore
+      lineDash: getLineDash(originalSymbol.stroke),
+      // @ts-ignore
+      lineCap: isDashedBrush(originalSymbol.stroke) ? 'square' : 'round'
+    });
+    _this.originalSymbol = originalSymbol;
+    return _this;
+  }
+
+  _createClass(SGisPolylineSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!isSimplePolylineSymbol(this.originalSymbol)) return _get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, feature, resolution, crs);
+      const {
+        ending,
+        beginningSize,
+        beginning,
+        endingSize
+      } = this.originalSymbol;
+      const renders = [];
+      const featureCopy = feature.clone();
+      const beginningMiterRender = getLineMiterRender({
+        color: this.strokeColor,
+        // @ts-ignore
+        kind: beginning,
+        position: 'left',
+        // @ts-ignore
+        size: beginningSize,
+        strokeWidth: this.strokeWidth
       });
-      this._tempLayer && this.coordLabel && this._tempLayer.add(this.coordLabel);
-    }
-  }, {
-    key: "addMeasureResultLabel",
-    value: function addMeasureResultLabel() {
-      this.measureResultLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol
-        })
+      const endingMiterRender = getLineMiterRender({
+        color: this.strokeColor,
+        // @ts-ignore
+        kind: ending,
+        position: 'right',
+        // @ts-ignore
+        size: endingSize,
+        strokeWidth: this.strokeWidth
       });
-      this._tempLayer && this.measureResultLabel && this._tempLayer.add(this.measureResultLabel);
-    }
-  }, {
-    key: "removeTempLabel",
-    value: function removeTempLabel() {
-      if (this.tempLabel) {
-        this._tempLayer && this._tempLayer.remove(this.tempLabel);
-        delete this.tempLabel;
-      }
-    }
-  }, {
-    key: "removeCoordLabel",
-    value: function removeCoordLabel() {
-      if (this.coordLabel) {
-        this._tempLayer && this._tempLayer.remove(this.coordLabel);
-        delete this.coordLabel;
-      }
-    }
-  }, {
-    key: "removeMeasureLabel",
-    value: function removeMeasureLabel() {
-      if (this.measureResultLabel) {
-        this._tempLayer && this._tempLayer.remove(this.measureResultLabel);
-        delete this.measureResultLabel;
-      }
-    }
-  }, {
-    key: "drawPointOnMouseMove",
-    value: function drawPointOnMouseMove(event) {
-      if (this.tempLabel) {
-        this.tempLabel.position = event.point.position;
+
+      if (beginningMiterRender) {
+        const updatedRings = updateRingsForMiter(featureCopy.rings, 'left', beginningMiterRender.usageSize);
+        const render = beginningMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
+        featureCopy.rings = updatedRings;
+        renders.push(render);
       }
+
+      if (endingMiterRender) {
+        const updatedRings = updateRingsForMiter(featureCopy.rings, 'right', endingMiterRender.usageSize);
+        const render = endingMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
+        featureCopy.rings = updatedRings;
+        renders.push(render);
+      } // NOTE: линия должна быть в начале чтобы быть под митерами
+
+
+      renders.unshift(..._get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, featureCopy, resolution, crs));
+      return renders;
     }
   }, {
-    key: "setCursor",
-    value: function setCursor(cursor) {
-      const {
-        wrapper
-      } = this.painter;
-
-      if (wrapper && typeof wrapper !== 'string') {
-        wrapper.style.cursor = cursor;
-      }
+    key: "clone",
+    value: function clone() {
+      return new SGisPolylineSymbol(this.originalSymbol);
     }
   }]);
 
-  return BaseMeasureToolCreator;
-}(PolylineControl);
+  return SGisPolylineSymbol;
+}(PolylineSymbol);
 
-let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
-  _inherits(BaseMeasureToolEditor, _PolyEditor);
+let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
+  _inherits(LabelSymbol, _DynamicPointSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
+  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
 
-  function BaseMeasureToolEditor(map, painter, params) {
+  function LabelSymbol(_temp) {
     var _this;
 
-    _classCallCheck(this, BaseMeasureToolEditor);
-
-    _this = _super.call(this, map, params);
-
-    _this.measureResult = () => {
-      const feature = _this.activeFeature;
-      if (!feature) return null;
-      const {
-        rings,
-        isEnclosed,
-        crs
-      } = feature;
-      const pointsCount = rings[0].length;
-      const position = rings[0][pointsCount - 1];
-      const area$1 = area(rings, crs);
-      const length$1 = length(rings, crs, isEnclosed);
-      const content = isEnclosed ? _this.formatters.polygon(area$1, length$1) : _this.formatters.length(length$1);
-      return {
-        content,
-        position
-      };
-    };
-
-    _this.removeFeature = () => {
-      _this.fire('remove');
-    };
-
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-
-    _this.on('change', _this.updateMeasureResult);
+    let {
+      component,
+      offset
+    } = _temp === void 0 ? {} : _temp;
 
-    _this.on('edit', _this.updateMeasureResult);
+    _classCallCheck(this, LabelSymbol);
 
+    _this = _super.call(this, {
+      offset
+    });
+    _this.component = component;
     return _this;
   }
 
-  _createClass(BaseMeasureToolEditor, [{
-    key: "_activate",
-    value: function _activate() {
-      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
-
-      this.addMeasureResultLabel();
+  _createClass(LabelSymbol, [{
+    key: "_getFeatureNode",
+    value: function _getFeatureNode(feature) {
+      const node = document.createElement('div');
+      this.renderDom(feature.content, node);
+      return node;
     }
   }, {
-    key: "addMeasureResultLabel",
-    value: function addMeasureResultLabel() {
-      const measureResult = this.measureResult();
-      if (measureResult === null) return;
-      const {
-        content,
-        position
-      } = measureResult;
-      this.measureResultLabel = new LabelFeature(position, {
-        content,
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          onClose: this.removeFeature,
-          renderLabel: this.renderLabelSymbol
-        })
-      });
-      this._tempLayer && this._tempLayer.add(this.measureResultLabel);
+    key: "_updateFeatureNode",
+    value: function _updateFeatureNode(feature) {
+      this.renderDom(feature.content, this.getNode(feature));
     }
   }, {
-    key: "updateMeasureResult",
-    value: function updateMeasureResult() {
-      if (this.measureResultLabel) {
-        const measureResult = this.measureResult();
-        if (measureResult === null) return;
-        const {
-          content,
-          position
-        } = measureResult;
-        this.measureResultLabel.content = content;
-        this.measureResultLabel.position = position;
+    key: "renderDom",
+    value: function renderDom(content, node) {
+      if (!node) {
+        return;
       }
-    }
-  }]);
 
-  return BaseMeasureToolEditor;
-}(PolyEditor);
+      const Component = this.component;
 
-const metersToPixels = (meters, _ref) => {
-  let {
-    painter,
-    crs = geo
-  } = _ref;
-  const {
-    width
-  } = painter;
-  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
-  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
-  const widthDistance = distance(zeroPoint, maxWidthPoint);
-  const pxK = width / (widthDistance || 1);
-  return Math.round(meters * pxK);
-};
-
-const polygonCircleFromPoint = (center, diameter) => {
-  const coordinates = [];
-  const radius = diameter / 2;
-  const endAngle = Math.PI * 2;
-  const step = Math.max(Math.PI / 2 / radius, endAngle / 128);
-  let start = 0;
-  let end = endAngle;
+      if (Component) {
+        ReactDOM.render(React.createElement(Component, {
+          content: content
+        }), node);
+      } else {
+        node.innerText = content;
+      }
+    }
+  }]);
 
-  for (let ang = start; ang < end; ang += step) {
-    coordinates.push([Math.cos(ang) * radius + center[0], Math.sin(ang) * radius + center[1]]);
-  }
+  return LabelSymbol;
+}(DynamicPointSymbol);
 
-  return [coordinates];
+const defaultOffset = [8, -16];
+const createLabelSymbol = props => {
+  const {
+    offset = defaultOffset,
+    renderLabel = (_ref) => {
+      let {
+        content
+      } = _ref;
+      return React.createElement("div", null, content);
+    },
+    onClose = undefined
+  } = props || {};
+  return new LabelSymbol({
+    offset,
+    component: (_ref2) => {
+      let {
+        content
+      } = _ref2;
+      return renderLabel({
+        content,
+        onClose
+      });
+    }
+  });
 };
 
-let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(CircleLineMiterRender, _LineMiterRender);
+function createShadowRender(position, _ref) {
+  let {
+    strokeWidth = 2,
+    shadowColor,
+    shadowSize,
+    size = 6
+  } = _ref;
+  const shadowDiameter = size + strokeWidth + shadowSize;
+  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
+    fillColor: 'transparent',
+    strokeColor: shadowColor,
+    strokeWidth: shadowSize,
+    enclosed: true
+  });
+}
+function getEditorPointRenderer(position, _ref2) {
+  let {
+    strokeColor,
+    strokeWidth,
+    shadowColor,
+    fillColor,
+    shadowSize,
+    size = 0
+  } = _ref2;
+  return [createShadowRender(position, {
+    strokeWidth,
+    strokeColor,
+    shadowSize,
+    shadowColor,
+    size
+  }), new PolyRender(polygonCircleFromPoint(position, size), {
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    enclosed: true
+  })];
+}
 
-  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
+let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
+  _inherits(ShadowedPointSymbol, _PointSymbol);
 
-  function CircleLineMiterRender() {
-    _classCallCheck(this, CircleLineMiterRender);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
 
-    return _super.apply(this, arguments);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPointSymbol(options) {
+    _classCallCheck(this, ShadowedPointSymbol);
+
+    return _super.call(this, options);
   }
 
-  _createClass(CircleLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth * 3;
+  _createClass(ShadowedPointSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof PointFeature)) return [];
+      const {
+        position
+      } = feature.projectTo(crs);
+      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
+      const shadowRender = this.getShadow(pxPosition, feature);
+      const pointArc = this.getPoint(pxPosition, feature);
+      return shadowRender ? [shadowRender, pointArc] : [pointArc];
     }
   }, {
-    key: "createRings",
-    value: function createRings(_ref, xMultiplier) {
-      let [x, y] = _ref;
-      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
+    key: "getShadow",
+    value: function getShadow(position, _feature) {
+      return ShadowedPointSymbol.getShadowArc(position, this);
     }
   }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledCircle;
-      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
-        fillColor: isFilled ? this.color : 'transparent',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth,
+    key: "getPoint",
+    value: function getPoint(position, _feature) {
+      return ShadowedPointSymbol.getPointArc(position, this);
+    }
+  }], [{
+    key: "getShadowArc",
+    value: function getShadowArc(position, _ref) {
+      let {
+        strokeWidth = 2,
+        shadowColor,
+        shadowSize,
+        size = 6
+      } = _ref;
+      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
+        fillColor: 'transparent',
+        strokeColor: shadowColor,
+        strokeWidth: shadowSize,
         enclosed: true
       });
     }
-  }]);
-
-  return CircleLineMiterRender;
-}(LineMiterRender);
-
-let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(SquareLineMiterRender, _LineMiterRender);
-
-  var _super = /*#__PURE__*/_createSuper(SquareLineMiterRender);
-
-  function SquareLineMiterRender() {
-    _classCallCheck(this, SquareLineMiterRender);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(SquareLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth;
-    }
   }, {
-    key: "createRings",
-    value: function createRings(_ref, xMultiplier) {
-      let [x, y] = _ref;
-      return [[[x, y + this.miterSize / 2], [x, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y + this.miterSize / 2]]];
+    key: "getPointArc",
+    value: function getPointArc(position, _ref2) {
+      let {
+        strokeWidth,
+        fillColor,
+        strokeColor,
+        size = 6
+      } = _ref2;
+      return new PolyRender(polygonCircleFromPoint(position, size), {
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        enclosed: true
+      });
     }
   }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledSquare;
-      return new PolyRender(miterRings, {
-        enclosed: true,
-        fillColor: isFilled ? this.color : void 0,
-        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
-        lineCap: 'square',
-        lineJoin: 'miter',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth
-      });
+    key: "getArcs",
+    value: function getArcs(position, params) {
+      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
+      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
+      return shadowRender ? [shadowRender, pointRender] : [pointRender];
     }
   }]);
 
-  return SquareLineMiterRender;
-}(LineMiterRender);
+  return ShadowedPointSymbol;
+}(PointSymbol);
 
-const getLineMiterRender = options => {
-  switch (options.kind) {
-    case LineMiterKind.Arrow:
-    case LineMiterKind.FilledArrow:
-      return new ArrowLineMiterRender(options);
+let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
+  _inherits(ShadowedPolySymbol, _PolylineSymbol);
 
-    case LineMiterKind.Square:
-    case LineMiterKind.FilledSquare:
-      return new SquareLineMiterRender(options);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
 
-    case LineMiterKind.Circle:
-    case LineMiterKind.FilledCircle:
-      return new CircleLineMiterRender(options);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPolySymbol(options) {
+    _classCallCheck(this, ShadowedPolySymbol);
 
-    default:
-      return null;
+    return _super.call(this, options);
   }
-};
 
-const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
-  const reversedRing = ring.slice().reverse();
+  _createClass(ShadowedPolySymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof Poly)) return [];
+      const coordinates = PolylineSymbol.getRenderedCoordinates(feature, resolution, crs);
+      const polyRender = this.getPolyRender(coordinates, feature);
+      const shadowRender = this.getShadow(coordinates, feature);
+      const vertexRenders = this.getVertexRenders(coordinates);
+      let renders = [polyRender];
 
-  for (let i = 0; i < reversedRing.length; i++) {
-    const coordinates = reversedRing[i];
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-    if (isLastRing && i === 0) {
-      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
-    }
-
-    const nextCoordinates = reversedRing[i - 1];
+      if (vertexRenders) {
+        renders = renders.concat(vertexRenders);
+      }
 
-    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
-      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
+      return renders;
     }
-  }
-
-  return reversedRing.reverse();
-};
-
-const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
-  const newRing = ring.slice();
-
-  for (let i = 0; i < newRing.length; i++) {
-    const coordinates = newRing[i];
-
-    if (i === 0 && isFirstRing) {
-      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
+  }, {
+    key: "getShadow",
+    value: function getShadow(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
     }
-
-    const prevCoordinates = newRing[i - 1];
-
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
+        enclosed: this.enclose,
+        fillColor: this.fillColor,
+        strokeColor: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        lineDash: this.lineDash
+      });
     }
-  }
+  }, {
+    key: "getVertexRenders",
+    value: function getVertexRenders(coordinates) {
+      if (!this.showVertex) return;
+      const vertexCoordinates = coordinates.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
+        size: 6,
+        strokeWidth: 2,
+        shadowColor: this.shadowColor,
+        strokeColor: this.strokeColor,
+        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
+        fillColor: '#ffffff'
+      })).reduce((acc, curr) => acc.concat(curr), []);
+    }
+  }]);
 
-  return newRing;
+  return ShadowedPolySymbol;
+}(PolylineSymbol);
+const polySymbolParams = {
+  strokeWidth: 2,
+  strokeColor: '#e33600',
+  shadowSize: 8,
+  shadowColor: 'rgba(227, 54, 0, 0.3)'
 };
-
-const updateRingsForMiter = (rings, position, miterSize) => {
-  return rings.map((ring, ringIndex) => {
-    switch (position) {
-      case 'right':
-        return updateRingForRightMiter(ring, miterSize, ringIndex === rings.length - 1);
-
-      default:
-        return updateRingForLeftMiter(ring, miterSize, ringIndex === 0);
-    }
-  });
+const measureSymbolParams = {
+  strokeColor: '#ff6933',
+  shadowSize: 0,
+  vertexShadowSize: 0
 };
+const measureLengthSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
+  enclose: false,
+  showVertex: true
+}));
+const measureAreaSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
+  fillColor: 'rgba(255, 105, 51, 0.25)',
+  enclose: true,
+  showVertex: true
+}));
+const snapSymbolParams = {
+  size: 10,
+  strokeWidth: 2,
+  strokeColor: '#e33600',
+  fillColor: '#ffffff',
+  shadowColor: 'rgba(227, 54, 0, 0.3)',
+  shadowSize: 3
+};
+const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
+  strokeColor: '#ff6933',
+  shadowSize: 0
+}));
 
-const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
-let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
-  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
-
-  function SGisPolylineSymbol(originalSymbol) {
-    var _originalSymbol$strok, _originalSymbol$strok2;
+let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
+  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
 
-    var _this;
+  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
 
-    _classCallCheck(this, SGisPolylineSymbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPointSymbol(props) {
+    _classCallCheck(this, SelectedPointSymbol);
 
-    _this = _super.call(this, {
-      // @ts-ignore
-      strokeColor: getHexColor(getParameterValue((_originalSymbol$strok = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok.color)),
-      strokeWidth: clamp( // @ts-ignore
-      getParameterValue((_originalSymbol$strok2 = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok2.width), PREVIEW_LIMITS.STROKE_WIDTH_MIN, PREVIEW_LIMITS.STROKE_WIDTH_MAX),
-      // @ts-ignore
-      lineDash: getLineDash(originalSymbol.stroke),
-      // @ts-ignore
-      lineCap: isDashedBrush(originalSymbol.stroke) ? 'square' : 'round'
-    });
-    _this.originalSymbol = originalSymbol;
-    return _this;
+    return _super.call(this, props);
   }
 
-  _createClass(SGisPolylineSymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!isSimplePolylineSymbol(this.originalSymbol)) return _get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, feature, resolution, crs);
-      const {
-        ending,
-        beginningSize,
-        beginning,
-        endingSize
-      } = this.originalSymbol;
-      const renders = [];
-      const featureCopy = feature.clone();
-      const beginningMiterRender = getLineMiterRender({
-        color: this.strokeColor,
-        // @ts-ignore
-        kind: beginning,
-        position: 'left',
-        // @ts-ignore
-        size: beginningSize,
-        strokeWidth: this.strokeWidth
-      });
-      const endingMiterRender = getLineMiterRender({
-        color: this.strokeColor,
-        // @ts-ignore
-        kind: ending,
-        position: 'right',
-        // @ts-ignore
-        size: endingSize,
-        strokeWidth: this.strokeWidth
-      });
-
-      if (beginningMiterRender) {
-        const updatedRings = updateRingsForMiter(featureCopy.rings, 'left', beginningMiterRender.usageSize);
-        const render = beginningMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
-        featureCopy.rings = updatedRings;
-        renders.push(render);
+  _createClass(SelectedPointSymbol, [{
+    key: "getShadow",
+    value: function getShadow(position, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getShadow", this).call(this, position, feature);
       }
-
-      if (endingMiterRender) {
-        const updatedRings = updateRingsForMiter(featureCopy.rings, 'right', endingMiterRender.usageSize);
-        const render = endingMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
-        featureCopy.rings = updatedRings;
-        renders.push(render);
-      } // NOTE: линия должна быть в начале чтобы быть под митерами
-
-
-      renders.unshift(..._get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, featureCopy, resolution, crs));
-      return renders;
     }
   }, {
-    key: "clone",
-    value: function clone() {
-      return new SGisPolylineSymbol(this.originalSymbol);
-    }
-  }]);
+    key: "getPoint",
+    value: function getPoint(position, feature) {
+      const pointRender = _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getPoint", this).call(this, position, feature);
 
-  return SGisPolylineSymbol;
-}(PolylineSymbol);
+      if (feature.isSelected) {
+        pointRender.strokeColor = this.selectedStrokeColor;
+        pointRender.fillColor = this.selectedFillColor;
+      }
 
-let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
-  _inherits(LabelSymbol, _DynamicPointSymbol);
+      return pointRender;
+    }
+  }]);
 
-  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
+  return SelectedPointSymbol;
+}(ShadowedPointSymbol);
 
-  function LabelSymbol(_temp) {
-    var _this;
+let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
+  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
 
-    let {
-      component,
-      offset
-    } = _temp === void 0 ? {} : _temp;
+  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
 
-    _classCallCheck(this, LabelSymbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPolySymbol(props) {
+    _classCallCheck(this, SelectedPolySymbol);
 
-    _this = _super.call(this, {
-      offset
-    });
-    _this.component = component;
-    return _this;
+    return _super.call(this, props);
   }
 
-  _createClass(LabelSymbol, [{
-    key: "_getFeatureNode",
-    value: function _getFeatureNode(feature) {
-      const node = document.createElement('div');
-      this.renderDom(feature.content, node);
-      return node;
-    }
-  }, {
-    key: "_updateFeatureNode",
-    value: function _updateFeatureNode(feature) {
-      this.renderDom(feature.content, this.getNode(feature));
+  _createClass(SelectedPolySymbol, [{
+    key: "getShadow",
+    value: function getShadow(coordinates, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, feature);
+      }
     }
   }, {
-    key: "renderDom",
-    value: function renderDom(content, node) {
-      if (!node) {
-        return;
-      }
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, feature) {
+      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
 
-      const Component = this.component;
+      if (feature.isSelected) {
+        polyRender.fillColor = this.selectedFillColor;
+        polyRender.strokeColor = this.selectedStrokeColor;
 
-      if (Component) {
-        ReactDOM.render(React.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
+        if (this.selectedStrokeWidth !== void 0) {
+          polyRender.strokeWidth = this.selectedStrokeWidth;
+        }
       }
+
+      return polyRender;
     }
   }]);
 
-  return LabelSymbol;
-}(DynamicPointSymbol);
+  return SelectedPolySymbol;
+}(ShadowedPolySymbol);
 
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
-  const {
-    offset = defaultOffset,
-    renderLabel = _ref => {
-      let {
-        content
-      } = _ref;
-      return React.createElement("div", null, content);
-    },
-    onClose = undefined
-  } = props || {};
-  return new LabelSymbol({
-    offset,
-    component: _ref2 => {
-      let {
-        content
-      } = _ref2;
-      return renderLabel({
-        content,
-        onClose
-      });
-    }
-  });
-};
+const selectedPoint = /*#__PURE__*/new SelectedPointSymbol({
+  size: 8,
+  strokeWidth: 2,
+  strokeColor: 'rgba(255, 87, 34, 0.3)',
+  fillColor: 'rgba(255, 255, 255, 0.65)',
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  shadowSize: 3,
+  selectedStrokeColor: '#ff5722',
+  selectedFillColor: 'rgba(255, 255, 255, 0.65)'
+});
+const selectedPolyline = /*#__PURE__*/new SelectedPolySymbol({
+  strokeWidth: 6,
+  strokeColor: 'rgba(255, 87, 34, 0.2)',
+  shadowSize: 8,
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  selectedStrokeColor: '#ff5722',
+  selectedStrokeWidth: 2
+});
+const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
+  strokeWidth: 2,
+  strokeColor: 'rgba(255, 87, 34, 0.3)',
+  shadowSize: 8,
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  fillColor: 'rgba(255, 255, 255, 0.36)',
+  enclose: true,
+  selectedFillColor: 'rgba(255, 255, 255, 0.56)',
+  selectedStrokeColor: '#ff5722'
+});
 
-function createShadowRender(position, _ref) {
+const metersToPixels = (meters, _ref) => {
   let {
-    strokeWidth = 2,
-    shadowColor,
-    shadowSize,
-    size = 6
+    painter,
+    crs = geo
   } = _ref;
-  const shadowDiameter = size + strokeWidth + shadowSize;
-  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
-    fillColor: 'transparent',
-    strokeColor: shadowColor,
-    strokeWidth: shadowSize,
-    enclosed: true
-  });
-}
-function getEditorPointRenderer(position, _ref2) {
-  let {
-    strokeColor,
-    strokeWidth,
-    shadowColor,
-    fillColor,
-    shadowSize,
-    size = 0
-  } = _ref2;
-  return [createShadowRender(position, {
-    strokeWidth,
-    strokeColor,
-    shadowSize,
-    shadowColor,
-    size
-  }), new PolyRender(polygonCircleFromPoint(position, size), {
-    fillColor,
-    strokeColor,
-    strokeWidth,
-    enclosed: true
-  })];
-}
+  const {
+    width
+  } = painter;
+  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
+  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
+  const widthDistance = distance(zeroPoint, maxWidthPoint);
+  const pxK = width / (widthDistance || 1);
+  return Math.round(meters * pxK);
+};
 
-let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
-  _inherits(ShadowedPointSymbol, _PointSymbol);
+const defaultPathStyles = {
+  strokeWidth: 2,
+  strokeColor: 'rgb(0, 163, 245)',
+  fillStyle: FillStyle.None
+};
+let SVGPoly = /*#__PURE__*/function (_Symbol) {
+  _inherits(SVGPoly, _Symbol);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
+  var _super = /*#__PURE__*/_createSuper(SVGPoly);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPointSymbol(options) {
-    _classCallCheck(this, ShadowedPointSymbol);
+  function SVGPoly(_temp) {
+    var _this;
 
-    return _super.call(this, options);
+    let {
+      redrawFeatureNode,
+      pathStyles,
+      circle,
+      className,
+      appendToSvg
+    } = _temp === void 0 ? {} : _temp;
+
+    _classCallCheck(this, SVGPoly);
+
+    _this = _super.call(this);
+    _this.container = document.createElement('div');
+    _this.container.style.position = 'absolute';
+    _this.redrawFeatureNode = redrawFeatureNode;
+    _this.pathStyles = _extends({
+      center: [0, 0],
+      fillColor: 'none'
+    }, pathStyles);
+    _this.circle = circle;
+    _this.className = className;
+    _this.appendToSvg = appendToSvg;
+    return _this;
   }
 
-  _createClass(ShadowedPointSymbol, [{
+  _createClass(SVGPoly, [{
     key: "renderFunction",
     value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof PointFeature)) return [];
-      const {
-        position
-      } = feature.projectTo(crs);
-      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
-      const shadowRender = this.getShadow(pxPosition, feature);
-      const pointArc = this.getPoint(pxPosition, feature);
-      return shadowRender ? [shadowRender, pointArc] : [pointArc];
+      const coordinates = feature instanceof Poly ? PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+      this.setCirclePxRaius(crs);
+      this.container.innerHTML = '';
+      const svg = this.setSvg(coordinates);
+      svg && this.container.append(svg);
+      feature.__dynamicSymbolRender = new DynamicRender({
+        node: this.container,
+        update: (bbox, resolution) => this.update({
+          bbox,
+          resolution,
+          feature,
+          crs
+        }),
+        redraw: () => {
+          this.redrawFeatureNode && this.redrawFeatureNode(feature);
+        }
+      });
+
+      this._setEventListeners(feature);
+
+      return [feature.__dynamicSymbolRender];
     }
   }, {
-    key: "getShadow",
-    value: function getShadow(position, _feature) {
-      return ShadowedPointSymbol.getShadowArc(position, this);
+    key: "setCirclePxRaius",
+    value: function setCirclePxRaius(crs) {
+      if (this.circle && this.pathStyles) {
+        var _this$circle;
+
+        this.pathStyles.radius = metersToPixels(this.circle.radius, {
+          painter: this.circle.painter,
+          crs
+        }) + (((_this$circle = this.circle) == null ? void 0 : _this$circle.pxOffset) || 0);
+      }
     }
   }, {
-    key: "getPoint",
-    value: function getPoint(position, _feature) {
-      return ShadowedPointSymbol.getPointArc(position, this);
-    }
-  }], [{
-    key: "getShadowArc",
-    value: function getShadowArc(position, _ref) {
+    key: "update",
+    value: function update(_ref) {
+      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
+
       let {
-        strokeWidth = 2,
-        shadowColor,
-        shadowSize,
-        size = 6
+        bbox,
+        resolution,
+        feature,
+        crs
       } = _ref;
-      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
-        fillColor: 'transparent',
-        strokeColor: shadowColor,
-        strokeWidth: shadowSize,
-        enclosed: true
-      });
+      if (!feature) return;
+      if (!bbox) bbox = feature.__lastBbox;
+      if (!resolution) resolution = feature.__lastResolution;
+      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
+
+      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
+        const newCoordinates = feature instanceof Poly ? PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+        this.setCirclePxRaius(crs);
+        this.container.innerHTML = '';
+        const svg = this.setSvg(newCoordinates);
+        svg && this.container.append(svg);
+      }
+
+      const polygon = feature.projectTo(bbox.crs);
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
+      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
+      this.container.style.left = dx.toString() + "px";
+      this.container.style.top = dy.toString() + "px";
+      feature.__lastBbox = bbox;
+      feature.__lastResolution = resolution;
     }
   }, {
-    key: "getPointArc",
-    value: function getPointArc(position, _ref2) {
-      let {
-        strokeWidth,
-        fillColor,
-        strokeColor,
-        size = 6
-      } = _ref2;
-      return new PolyRender(polygonCircleFromPoint(position, size), {
-        fillColor,
-        strokeColor,
-        strokeWidth,
-        enclosed: true
-      });
-    }
-  }, {
-    key: "getArcs",
-    value: function getArcs(position, params) {
-      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
-      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
-      return shadowRender ? [shadowRender, pointRender] : [pointRender];
-    }
-  }]);
-
-  return ShadowedPointSymbol;
-}(PointSymbol);
-
-let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
-  _inherits(ShadowedPolySymbol, _PolylineSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
-
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPolySymbol(options) {
-    _classCallCheck(this, ShadowedPolySymbol);
-
-    return _super.call(this, options);
-  }
-
-  _createClass(ShadowedPolySymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof Poly)) return [];
-      const coordinates = PolylineSymbol.getRenderedCoordinates(feature, resolution, crs);
-      const polyRender = this.getPolyRender(coordinates, feature);
-      const shadowRender = this.getShadow(coordinates, feature);
-      const vertexRenders = this.getVertexRenders(coordinates);
-      let renders = [polyRender];
+    key: "setSvg",
+    value: function setSvg(coordinates) {
+      const {
+        lineCap,
+        lineJoin,
+        miterLimit,
+        lineDash,
+        dashOffset
+      } = this.pathStyles || {};
+      const svgRender = new SvgRender(_extends({
+        coordinates
+      }, defaultPathStyles, {
+        appendToSvg: this.appendToSvg
+      }, this.pathStyles));
 
-      if (shadowRender) {
-        renders = [shadowRender, polyRender];
+      if (this.circle) {
+        svgRender._setArcNode();
+      } else {
+        svgRender._setPolyNode();
       }
 
-      if (vertexRenders) {
-        renders = renders.concat(vertexRenders);
-      }
+      let svgElement;
+      svgRender.getNode((_, svg) => {
+        svgElement = svg;
+        this.className && svgElement.classList.add(this.className);
+        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
 
-      return renders;
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: FillStyle.None,
-        enclosed: this.enclose,
-        strokeColor: this.shadowColor,
-        strokeWidth: this.shadowSize,
-        lineDash: this.lineDash
+        if (path) {
+          path.setAttribute('stroke-linecap', lineCap || 'round');
+          path.setAttribute('stroke-linejoin', lineJoin || 'round');
+          path.setAttribute('stroke-miterlimit', (miterLimit || 10).toString());
+          path.setAttribute('stroke-dashoffset', (dashOffset || 0).toString());
+
+          if (this.circle) {
+            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
+          }
+        }
       });
+      return svgElement;
     }
   }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
-        enclosed: this.enclose,
-        fillColor: this.fillColor,
-        strokeColor: this.strokeColor,
-        strokeWidth: this.strokeWidth,
-        lineDash: this.lineDash
+    key: "_setEventListeners",
+    value: function _setEventListeners(dynamicFeature) {
+      var _dynamicFeature$__dyn;
+
+      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
+      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
+      Object.keys(mouseEvents).forEach(eventName => {
+        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
+          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
+            dynamicFeature.fire(mouseEvents[eventName].type, {
+              node: svgNode,
+              browserEvent: event
+            });
+          });
+        }
       });
     }
-  }, {
-    key: "getVertexRenders",
-    value: function getVertexRenders(coordinates) {
-      if (!this.showVertex) return;
-      const vertexCoordinates = coordinates.reduce((acc, curr) => {
-        return acc.concat(curr);
-      }, []);
-      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
-        size: 6,
-        strokeWidth: 2,
-        shadowColor: this.shadowColor,
-        strokeColor: this.strokeColor,
-        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
-        fillColor: '#ffffff'
-      })).reduce((acc, curr) => acc.concat(curr), []);
-    }
   }]);
 
-  return ShadowedPolySymbol;
-}(PolylineSymbol);
-const polySymbolParams = {
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  shadowSize: 8,
-  shadowColor: 'rgba(227, 54, 0, 0.3)'
-};
-const measureSymbolParams = {
-  strokeColor: '#ff6933',
-  shadowSize: 0,
-  vertexShadowSize: 0
-};
-const measureLengthSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  enclose: false,
-  showVertex: true
-}));
-const measureAreaSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  fillColor: 'rgba(255, 105, 51, 0.25)',
-  enclose: true,
-  showVertex: true
-}));
-const snapSymbolParams = {
-  size: 10,
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  fillColor: '#ffffff',
-  shadowColor: 'rgba(227, 54, 0, 0.3)',
-  shadowSize: 3
-};
-const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
-  strokeColor: '#ff6933',
-  shadowSize: 0
-}));
+  return SVGPoly;
+}(Symbol$1);
 
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
+function isSGisPointSymbol(symbol) {
+  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
+}
+function isSGisImageSymbol(symbol) {
+  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
+}
+function isSGisPolygonSymbol(symbol) {
+  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
+}
+function isSGisPolylineSymbol(symbol) {
+  return symbol instanceof PolylineSymbol;
+}
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
+/**
+ * Моки фич для отображения превью символа
+ * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
+ */
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
+const viewBoxSize = 100;
+const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
+  crs: plain
+});
+const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
+  crs: plain
+});
+const polygonFeature = /*#__PURE__*/new Polygon([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+  crs: plain
+});
+const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
+  crs: plain
+});
+const polygonLegendFeature = /*#__PURE__*/new Polygon([[0, 0], [100, 0], [100, -100], [0, -100]], {
+  crs: plain
+});
+const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
+  crs: plain
+});
+const MAP_LEGEND_FEATURES = {
+  polygon: polygonMapLegendFeature
+};
+const LEGEND_FEATURES = {
+  polyline: lineLegendFeature,
+  polygon: polygonLegendFeature
+};
+const MOCK_FEATURES = {
+  point: pointFeature,
+  polyline: lineFeature,
+  polygon: polygonFeature
+};
 
-    return _super.call(this, props);
+function getSymbolRenders(symbol, size, features) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  _createClass(SelectedPointSymbol, [{
-    key: "getShadow",
-    value: function getShadow(position, feature) {
-      if (feature.isSelected) {
-        return _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getShadow", this).call(this, position, feature);
-      }
-    }
-  }, {
-    key: "getPoint",
-    value: function getPoint(position, feature) {
-      const pointRender = _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getPoint", this).call(this, position, feature);
-
-      if (feature.isSelected) {
-        pointRender.strokeColor = this.selectedStrokeColor;
-        pointRender.fillColor = this.selectedFillColor;
-      }
+  if (features === void 0) {
+    features = {};
+  }
 
-      return pointRender;
-    }
-  }]);
+  const resolution = viewBoxSize / size;
 
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
+  const featuresToRender = _extends({}, MOCK_FEATURES, features);
 
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
+  if (isSGisPolygonSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
+  }
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
+  if (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
+}
+const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-    return _super.call(this, props);
+  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
+};
+const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  _createClass(SelectedPolySymbol, [{
-    key: "getShadow",
-    value: function getShadow(coordinates, feature) {
-      if (feature.isSelected) {
-        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, feature);
-      }
-    }
-  }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, feature) {
-      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
+  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
+};
 
-      if (feature.isSelected) {
-        polyRender.fillColor = this.selectedFillColor;
-        polyRender.strokeColor = this.selectedStrokeColor;
+function renderSymbolToCanvas(renders, canvas) {
+  renders.forEach(render => {
+    canvas.draw(render);
+  });
+}
 
-        if (this.selectedStrokeWidth !== void 0) {
-          polyRender.strokeWidth = this.selectedStrokeWidth;
-        }
-      }
+function deserializeSymbol(symbol) {
+  switch (symbol.type) {
+    case 'circlePointSymbol':
+      return deserializePointSymbol(symbol);
 
-      return polyRender;
-    }
-  }]);
+    case 'squarePointSymbol':
+      return deserializeSquareSymbol(symbol);
 
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
+    case 'maskedImagePointSymbol':
+      return deserializeMaskedImageSymbol(symbol);
 
-const selectedPoint = /*#__PURE__*/new SelectedPointSymbol({
-  size: 8,
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.65)',
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 3,
-  selectedStrokeColor: '#ff5722',
-  selectedFillColor: 'rgba(255, 255, 255, 0.65)'
-});
-const selectedPolyline = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 6,
-  strokeColor: 'rgba(255, 87, 34, 0.2)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  selectedStrokeColor: '#ff5722',
-  selectedStrokeWidth: 2
-});
-const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.36)',
-  enclose: true,
-  selectedFillColor: 'rgba(255, 255, 255, 0.56)',
-  selectedStrokeColor: '#ff5722'
-});
+    case 'imagePointSymbol':
+      return deserializeImagePointSymbol(symbol);
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: FillStyle.None
-};
-let SVGPoly = /*#__PURE__*/function (_Symbol) {
-  _inherits(SVGPoly, _Symbol);
+    case 'polygonSymbol':
+      return deserializePolygonSymbol(symbol);
 
-  var _super = /*#__PURE__*/_createSuper(SVGPoly);
+    case 'simplePolylineSymbol':
+    case 'polylineSymbol':
+      return deserializePolylineSymbol(symbol);
 
-  function SVGPoly(_temp) {
-    var _this;
+    default:
+      return null;
+  }
+}
 
-    let {
-      redrawFeatureNode,
-      pathStyles,
-      circle,
-      className,
-      appendToSvg
-    } = _temp === void 0 ? {} : _temp;
+function deserializePointSymbol(symbol) {
+  // @ts-ignore
+  return new PointSymbol(deserializePointSymbolParams(symbol));
+}
 
-    _classCallCheck(this, SVGPoly);
+function deserializeSquareSymbol(symbol) {
+  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle)
+  }));
+}
 
-    _this = _super.call(this);
-    _this.container = document.createElement('div');
-    _this.container.style.position = 'absolute';
-    _this.redrawFeatureNode = redrawFeatureNode;
-    _this.pathStyles = _extends({
-      center: [0, 0],
-      fillColor: 'none'
-    }, pathStyles);
-    _this.circle = circle;
-    _this.className = className;
-    _this.appendToSvg = appendToSvg;
-    return _this;
+function deserializeMaskedImageSymbol(symbol) {
+  return new MaskedImage(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    imageSource: deserializeBase64(symbol.image),
+    // @ts-ignore
+    maskSource: deserializeBase64(symbol.imageMask),
+    // @ts-ignore
+    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
+  }));
+}
+
+function deserializeImagePointSymbol(symbol) {
+  return new StaticImageSymbol(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    source: deserializeBase64(symbol.image)
+  }));
+}
+
+function deserializePolygonSymbol(symbol) {
+  if (isPolygonHasPatternBrush(symbol)) {
+    return new SGisImageFill(symbol);
   }
 
-  _createClass(SVGPoly, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      const coordinates = feature instanceof Poly ? PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-      this.setCirclePxRaius(crs);
-      this.container.innerHTML = '';
-      const svg = this.setSvg(coordinates);
-      svg && this.container.append(svg);
-      feature.__dynamicSymbolRender = new DynamicRender({
-        node: this.container,
-        update: (bbox, resolution) => this.update({
-          bbox,
-          resolution,
-          feature,
-          crs
-        }),
-        redraw: () => {
-          this.redrawFeatureNode && this.redrawFeatureNode(feature);
-        }
-      });
+  if (isPolygonHasHatchBrush(symbol)) {
+    return new SGisBrushFill(symbol);
+  }
 
-      this._setEventListeners(feature);
+  return new SGisPolygonSymbol(symbol);
+}
 
-      return [feature.__dynamicSymbolRender];
-    }
-  }, {
-    key: "setCirclePxRaius",
-    value: function setCirclePxRaius(crs) {
-      if (this.circle && this.pathStyles) {
-        var _this$circle;
+function deserializePolylineSymbol(symbol) {
+  return new SGisPolylineSymbol(symbol);
+}
 
-        this.pathStyles.radius = metersToPixels(this.circle.radius, {
-          painter: this.circle.painter,
-          crs
-        }) + (((_this$circle = this.circle) == null ? void 0 : _this$circle.pxOffset) || 0);
-      }
-    }
-  }, {
-    key: "update",
-    value: function update(_ref) {
-      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
+function deserializePointSymbolParams(_ref) {
+  let {
+    size,
+    offset,
+    strokeColor,
+    strokeWidth,
+    fillColor
+  } = _ref;
+  return {
+    size: getParameterValue(size),
+    offset: deserializeAnchor(offset),
+    strokeWidth: getParameterValue(strokeWidth),
+    strokeColor: deserializeColor(getParameterValue(strokeColor)),
+    fillColor: deserializeColor(getParameterValue(fillColor))
+  };
+}
 
-      let {
-        bbox,
-        resolution,
-        feature,
-        crs
-      } = _ref;
-      if (!feature) return;
-      if (!bbox) bbox = feature.__lastBbox;
-      if (!resolution) resolution = feature.__lastResolution;
-      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
+function deserializeBase64(base) {
+  return "data:image/png;base64," + base;
+}
 
-      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
-        const newCoordinates = feature instanceof Poly ? PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-        this.setCirclePxRaius(crs);
-        this.container.innerHTML = '';
-        const svg = this.setSvg(newCoordinates);
-        svg && this.container.append(svg);
-      }
+function deserializeAnchor(offset) {
+  // @ts-ignore
+  return offset.map(getParameterValue);
+}
 
-      const polygon = feature.projectTo(bbox.crs);
-      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
-      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
-      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
-      this.container.style.left = dx.toString() + "px";
-      this.container.style.top = dy.toString() + "px";
-      feature.__lastBbox = bbox;
-      feature.__lastResolution = resolution;
-    }
-  }, {
-    key: "setSvg",
-    value: function setSvg(coordinates) {
-      const {
-        lineCap,
-        lineJoin,
-        miterLimit,
-        lineDash,
-        dashOffset
-      } = this.pathStyles || {};
-      const svgRender = new SvgRender(_extends({
-        coordinates
-      }, defaultPathStyles, {
-        appendToSvg: this.appendToSvg
-      }, this.pathStyles));
+function deserializeColor(color) {
+  return color ? new Color(color).toString() : null;
+}
 
-      if (this.circle) {
-        svgRender._setArcNode();
-      } else {
-        svgRender._setPolyNode();
-      }
+const clampSymbol = (symbol, min, max) => {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.width = clamp(symbol.width, min, max);
+    symbol.height = clamp(symbol.height, min, max);
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.size = clamp(symbol.size, min, max);
+  }
 
-      let svgElement;
-      svgRender.getNode((_, svg) => {
-        svgElement = svg;
-        this.className && svgElement.classList.add(this.className);
-        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
+  return symbol;
+};
+function centerAlignSymbol(symbol) {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.offset = [0, 0];
+  }
 
-        if (path) {
-          path.setAttribute('stroke-linecap', lineCap || 'round');
-          path.setAttribute('stroke-linejoin', lineJoin || 'round');
-          path.setAttribute('stroke-miterlimit', (miterLimit || 10).toString());
-          path.setAttribute('stroke-dashoffset', (dashOffset || 0).toString());
+  return symbol;
+}
+const adjustSymbol = (symbol, _ref) => {
+  let {
+    size
+  } = _ref;
+  return centerAlignSymbol(clampSymbol(symbol, 0, size));
+};
 
-          if (this.circle) {
-            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
-          }
-        }
-      });
-      return svgElement;
-    }
-  }, {
-    key: "_setEventListeners",
-    value: function _setEventListeners(dynamicFeature) {
-      var _dynamicFeature$__dyn;
+let EvergisFeature = /*#__PURE__*/function () {
+  function EvergisFeature(feature) {
+    _classCallCheck(this, EvergisFeature);
 
-      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
-      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
-      Object.keys(mouseEvents).forEach(eventName => {
-        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
-          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
-            dynamicFeature.fire(mouseEvents[eventName].type, {
-              node: svgNode,
-              browserEvent: event
-            });
-          });
-        }
-      });
-    }
-  }]);
+    this.id = null;
+    this.displayName = null;
+    this.geometry = null;
+    this.layerName = null;
+    this.layerAlias = null;
+    this.attributes = null;
+    this.symbol = null;
+    this.id = feature.id;
+    this.displayName = feature.id;
+    this.geometry = feature.geometry;
+    this.layerName = feature.layer;
+    this.layerAlias = feature.layer;
+    this.attributes = getFeatureAttributes(feature.attributes);
+  }
 
-  return SVGPoly;
-}(Symbol$1);
+  _createClass(EvergisFeature, [{
+    key: "sGisFeature",
+    value: function sGisFeature() {
+      if (!this.geometry || !this.symbol) {
+        return null;
+      } // @ts-ignore
 
-function isSGisPointSymbol(symbol) {
-  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
-}
-function isSGisImageSymbol(symbol) {
-  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
-}
-function isSGisPolygonSymbol(symbol) {
-  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
-}
-function isSGisPolylineSymbol(symbol) {
-  return symbol instanceof PolylineSymbol;
-}
 
-/**
- * Моки фич для отображения превью символа
- * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
- */
+      const {
+        type,
+        coordinates,
+        sr
+      } = this.geometry;
+      const crs = CRS_MAP[sr];
 
-const viewBoxSize = 100;
-const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
-  crs: plain
-});
-const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
-  crs: plain
-});
-const polygonFeature = /*#__PURE__*/new Polygon([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
-  crs: plain
-});
-const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
-  crs: plain
-});
-const polygonLegendFeature = /*#__PURE__*/new Polygon([[0, 0], [100, 0], [100, -100], [0, -100]], {
-  crs: plain
-});
-const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
-  crs: plain
-});
-const MAP_LEGEND_FEATURES = {
-  polygon: polygonMapLegendFeature
-};
-const LEGEND_FEATURES = {
-  polyline: lineLegendFeature,
-  polygon: polygonLegendFeature
-};
-const MOCK_FEATURES = {
-  point: pointFeature,
-  polyline: lineFeature,
-  polygon: polygonFeature
-};
+      if (!crs) {
+        return null;
+      }
 
-function getSymbolRenders(symbol, size, features) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+      switch (type) {
+        case GeometryType.Point:
+          return new PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-  if (features === void 0) {
-    features = {};
-  }
+        case GeometryType.Multipoint:
+          return new MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-  const resolution = viewBoxSize / size;
+        case GeometryType.Polyline:
+          return new Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
 
-  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+        case GeometryType.Polygon:
+          return new Polygon(coordinates, {
+            symbol: selectedPolygon,
+            crs
+          });
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
-  }
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "extent",
+    value: function extent() {
+      const feature = this.sGisFeature();
+      return feature && feature.bbox;
+    }
+  }]);
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
-  }
+  return EvergisFeature;
+}();
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
-}
-const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+function evaluateCondition(condition, attributes) {
+  try {
+    const evaluator = new ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition);
 
-  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
-};
-const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+    if (result instanceof Error) {
+      return null;
+    }
 
-  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
-};
+    return result;
+  } catch (_unused) {
+    return null;
+  }
+}
 
-function renderSymbolToCanvas(renders, canvas) {
-  renders.forEach(render => {
-    canvas.draw(render);
+function getAttributeValue(attributes, attributeName) {
+  const attributeMeta = attributes.find((_ref) => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
   });
-}
-
-function deserializeSymbol(symbol) {
-  switch (symbol.type) {
-    case 'circlePointSymbol':
-      return deserializePointSymbol(symbol);
-
-    case 'squarePointSymbol':
-      return deserializeSquareSymbol(symbol);
-
-    case 'maskedImagePointSymbol':
-      return deserializeMaskedImageSymbol(symbol);
-
-    case 'imagePointSymbol':
-      return deserializeImagePointSymbol(symbol);
-
-    case 'polygonSymbol':
-      return deserializePolygonSymbol(symbol);
-
-    case 'simplePolylineSymbol':
-    case 'polylineSymbol':
-      return deserializePolylineSymbol(symbol);
-
-    default:
-      return null;
-  }
-}
-
-function deserializePointSymbol(symbol) {
-  // @ts-ignore
-  return new PointSymbol(deserializePointSymbolParams(symbol));
-}
-
-function deserializeSquareSymbol(symbol) {
-  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle)
-  }));
-}
-
-function deserializeMaskedImageSymbol(symbol) {
-  return new MaskedImage(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    imageSource: deserializeBase64(symbol.image),
-    // @ts-ignore
-    maskSource: deserializeBase64(symbol.imageMask),
-    // @ts-ignore
-    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
-  }));
-}
-
-function deserializeImagePointSymbol(symbol) {
-  return new StaticImageSymbol(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    source: deserializeBase64(symbol.image)
-  }));
-}
-
-function deserializePolygonSymbol(symbol) {
-  if (isPolygonHasPatternBrush(symbol)) {
-    return new SGisImageFill(symbol);
-  }
-
-  if (isPolygonHasHatchBrush(symbol)) {
-    return new SGisBrushFill(symbol);
-  }
-
-  return new SGisPolygonSymbol(symbol);
-}
-
-function deserializePolylineSymbol(symbol) {
-  return new SGisPolylineSymbol(symbol);
-}
-
-function deserializePointSymbolParams(_ref) {
-  let {
-    size,
-    offset,
-    strokeColor,
-    strokeWidth,
-    fillColor
-  } = _ref;
-  return {
-    size: getParameterValue(size),
-    offset: deserializeAnchor(offset),
-    strokeWidth: getParameterValue(strokeWidth),
-    strokeColor: deserializeColor(getParameterValue(strokeColor)),
-    fillColor: deserializeColor(getParameterValue(fillColor))
-  };
-}
-
-function deserializeBase64(base) {
-  return "data:image/png;base64," + base;
-}
-
-function deserializeAnchor(offset) {
-  // @ts-ignore
-  return offset.map(getParameterValue);
-}
-
-function deserializeColor(color) {
-  return color ? new Color(color).toString() : null;
-}
-
-const clampSymbol = (symbol, min, max) => {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.width = clamp(symbol.width, min, max);
-    symbol.height = clamp(symbol.height, min, max);
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.size = clamp(symbol.size, min, max);
-  }
-
-  return symbol;
-};
-function centerAlignSymbol(symbol) {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.offset = [0, 0];
-  }
-
-  return symbol;
-}
-const adjustSymbol = (symbol, _ref) => {
-  let {
-    size
-  } = _ref;
-  return centerAlignSymbol(clampSymbol(symbol, 0, size));
-};
-
-let EvergisFeature = /*#__PURE__*/function () {
-  function EvergisFeature(feature) {
-    _classCallCheck(this, EvergisFeature);
-
-    this.id = null;
-    this.displayName = null;
-    this.geometry = null;
-    this.layerName = null;
-    this.layerAlias = null;
-    this.attributes = null;
-    this.symbol = null;
-    this.id = feature.id;
-    this.displayName = feature.id;
-    this.geometry = feature.geometry;
-    this.layerName = feature.layer;
-    this.layerAlias = feature.layer;
-    this.attributes = getFeatureAttributes(feature.attributes);
-  }
-
-  _createClass(EvergisFeature, [{
-    key: "sGisFeature",
-    value: function sGisFeature() {
-      if (!this.geometry || !this.symbol) {
-        return null;
-      } // @ts-ignore
-
-
-      const {
-        type,
-        coordinates,
-        sr
-      } = this.geometry;
-      const crs = CRS_MAP[sr];
-
-      if (!crs) {
-        return null;
-      }
-
-      switch (type) {
-        case GeometryType.Point:
-          return new PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Multipoint:
-          return new MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Polyline:
-          return new Polyline(coordinates, {
-            symbol: selectedPolyline,
-            crs
-          });
-
-        case GeometryType.Polygon:
-          return new Polygon(coordinates, {
-            symbol: selectedPolygon,
-            crs
-          });
-
-        default:
-          return null;
-      }
-    }
-  }, {
-    key: "extent",
-    value: function extent() {
-      const feature = this.sGisFeature();
-      return feature && feature.bbox;
-    }
-  }]);
-
-  return EvergisFeature;
-}();
-
-function evaluateCondition(condition, attributes) {
-  try {
-    const evaluator = new ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition);
-
-    if (result instanceof Error) {
-      return null;
-    }
-
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
-
-function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
-    let {
-      name
-    } = _ref;
-    return name === attributeName;
-  });
-  return attributeMeta ? attributeMeta.value : null;
+  return attributeMeta ? attributeMeta.value : null;
 }
 
 const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
@@ -3105,7 +2757,7 @@ const getAttributeNameFromClassified = values => values.length > 0 ? getAttribut
 
 function findFeatureValue(parameterValues, _ref2) {
   let [name, value] = _ref2;
-  return value !== null ? parameterValues.find(_ref3 => {
+  return value !== null ? parameterValues.find((_ref3) => {
     let {
       condition
     } = _ref3;
@@ -3145,7 +2797,7 @@ function evaluateFeatureSymbol(attributes) {
 }
 
 function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
+  return (childStyles || []).find((_ref5) => {
     let {
       condition
     } = _ref5;
@@ -3206,7 +2858,7 @@ let EvergisLayer = /*#__PURE__*/function () {
       feature.attributes = mergeAttributes(feature.attributes || [], this.attributes || []);
       feature.symbol = this.style && getFeatureSymbol(this.style, feature.attributes);
       feature.layerAlias = this.alias;
-      const titleAttribute = (feature.attributes || []).find(_ref => {
+      const titleAttribute = (feature.attributes || []).find((_ref) => {
         let {
           name
         } = _ref;
@@ -3229,7 +2881,7 @@ const evaluateFeature = layers => feature => {
 };
 
 const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
+const createLegendItem = (_ref) => {
   let {
     attributes,
     renderTitle,
@@ -3271,7 +2923,7 @@ function createStyleLegend(style, config) {
     classificationManager,
     symbol
   } = style;
-  const items = classificationManager.filter(_ref => {
+  const items = classificationManager.filter((_ref) => {
     let {
       parameter
     } = _ref;
@@ -3388,7 +3040,7 @@ const useMapLegend = (layer, config) => {
 };
 
 const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
+const useLegendValueSymbol = (_ref) => {
   let {
     parameter,
     parameterValue
@@ -3790,7 +3442,7 @@ function useMapWrapper() {
   return wrapperRef;
 }
 
-const byScale = scale => _ref => {
+const byScale = scale => (_ref) => {
   let {
     zIndex
   } = _ref;
@@ -3989,7 +3641,7 @@ const useTooltip = function useTooltip(zIndex) {
 
     return reset;
   }, [reset, map, layer, zIndex]);
-  const onSetLabelFeature = useCallback(_ref => {
+  const onSetLabelFeature = useCallback((_ref) => {
     let {
       point,
       position,
@@ -4153,7 +3805,7 @@ function useClusterLayer(_ref) {
 }
 
 const INIT_FEATURES = [];
-const useEvergisSelect = _ref => {
+const useEvergisSelect = (_ref) => {
   let {
     onPick,
     onFeatures
@@ -4186,7 +3838,7 @@ function none() {
   return;
 }
 
-const useDraggableMarker = _ref => {
+const useDraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -4302,7 +3954,7 @@ const useDebouncedCallback = interval => {
   }, interval), [interval]);
 };
 
-const Symbol = _ref => {
+const Symbol = (_ref) => {
   let {
     symbol,
     size,
@@ -4323,7 +3975,7 @@ const Symbol = _ref => {
 };
 
 var _templateObject;
-const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), _ref => {
+const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), (_ref) => {
   let {
     geometryType,
     icons
@@ -4332,7 +3984,7 @@ const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = _ref => {
+const StyleSymbol = (_ref) => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4377,7 +4029,7 @@ const CloseIcon = /*#__PURE__*/styled(Icon)(_templateObject20 || (_templateObjec
 const PrevIcon = /*#__PURE__*/styled(Icon)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
 const NextIcon = /*#__PURE__*/styled(Icon)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
 
-const MailValue = _ref => {
+const MailValue = (_ref) => {
   let {
     mail
   } = _ref;
@@ -4388,7 +4040,7 @@ const MailValue = _ref => {
   }, mail);
 };
 
-const PhoneValue = _ref => {
+const PhoneValue = (_ref) => {
   let {
     phone
   } = _ref;
@@ -4399,7 +4051,7 @@ const PhoneValue = _ref => {
   }, phone);
 };
 
-const UrlValue = _ref => {
+const UrlValue = (_ref) => {
   let {
     url
   } = _ref;
@@ -4410,7 +4062,7 @@ const UrlValue = _ref => {
   }, url);
 };
 
-const AttributeValue = _ref => {
+const AttributeValue = (_ref) => {
   let {
     attribute
   } = _ref;
@@ -4424,29 +4076,29 @@ const AttributeValue = _ref => {
     if (attributeValue.type === 2
     /* Url */
     ) {
-      return React.createElement(UrlValue, {
-        key: key,
-        url: punycodeDecode(value)
-      });
-    }
+        return React.createElement(UrlValue, {
+          key: key,
+          url: punycodeDecode(value)
+        });
+      }
 
     if (attributeValue.type === 3
     /* Mail */
     ) {
-      return React.createElement(MailValue, {
-        key: key,
-        mail: value
-      });
-    }
+        return React.createElement(MailValue, {
+          key: key,
+          mail: value
+        });
+      }
 
     if (attributeValue.type === 1
     /* Phone */
     ) {
-      return React.createElement(PhoneValue, {
-        key: key,
-        phone: value
-      });
-    }
+        return React.createElement(PhoneValue, {
+          key: key,
+          phone: value
+        });
+      }
 
     return React.createElement(SimpleAttribute, {
       key: value
@@ -4462,7 +4114,7 @@ function punycodeDecode(domains) {
   }
 }
 
-const EvergisCardAttribute = _ref => {
+const EvergisCardAttribute = (_ref) => {
   let {
     attribute,
     className
@@ -4474,7 +4126,7 @@ const EvergisCardAttribute = _ref => {
   }));
 };
 
-const StyledCard = _ref => {
+const StyledCard = (_ref) => {
   let {
     features = [],
     className,
@@ -4525,7 +4177,7 @@ const StyledCard = _ref => {
 };
 
 const _excluded$1 = ["renderCard", "className", "children"];
-const EvergisCard = _ref => {
+const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
@@ -4577,7 +4229,7 @@ const toSgis = feature => feature.sGisFeature(); // TODO inner hooks???
 
 const useSGisFeatures = (features, currentIndex) => useMemo(() => features.map(toSgis).filter(truthly).map(setSelected(currentIndex)), [features, currentIndex]);
 
-const EvergisSelectLayer = _ref => {
+const EvergisSelectLayer = (_ref) => {
   let {
     features,
     zIndex,
@@ -4622,7 +4274,7 @@ const TileLayer = props => {
 };
 
 const defaultZIndex = 200;
-const EvergisSelect = _ref => {
+const EvergisSelect = (_ref) => {
   let {
     onPick,
     className,
@@ -4657,7 +4309,7 @@ const LegendSymbolTitle = /*#__PURE__*/styled.p(_templateObject3$1 || (_template
 const LegendValueContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.625rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
 const LegendSectionHeader = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])));
 
-const LegendSection = _ref => {
+const LegendSection = (_ref) => {
   let {
     item,
     renderLegendTitle,
@@ -4674,7 +4326,7 @@ SearchPrefix.defaultProps = {
   kind: "search"
 };
 
-const SearchInput = _ref => {
+const SearchInput = (_ref) => {
   let {
     onChange
   } = _ref;
@@ -4683,7 +4335,7 @@ const SearchInput = _ref => {
   }));
 };
 
-const LegendSymbol = _ref => {
+const LegendSymbol = (_ref) => {
   let {
     parameter,
     parameterValue,
@@ -4701,7 +4353,7 @@ const LegendSymbol = _ref => {
   return React.createElement(React.Fragment, null, children(symbol));
 };
 
-const LegendValue = _ref => {
+const LegendValue = (_ref) => {
   let {
     value,
     parameter,
@@ -4723,7 +4375,7 @@ const getNumberParam = (parameterValue, param) => {
   return typeof parameterValue === 'object' && param in parameterValue && typeof parameterValue[param] === 'number' ? parameterValue[param] : null;
 };
 
-const getSymbolSize = _ref => {
+const getSymbolSize = (_ref) => {
   let {
     parameterValue,
     maxSize
@@ -4748,7 +4400,7 @@ const getSymbolSize = _ref => {
   }
 };
 
-const Legend = _ref => {
+const Legend = (_ref) => {
   let {
     layer,
     children,
@@ -4791,7 +4443,7 @@ const Legend = _ref => {
   })))));
 };
 
-const Map = _ref => {
+const Map = (_ref) => {
   let {
     className,
     position,
@@ -4813,163 +4465,488 @@ const Map = _ref => {
     })) {
       onBboxChange(state);
     }
-  }, [map, onBboxChange, position, resolution]);
-  useUpdateMapView({
-    position,
-    resolution
-  });
-  useMaxMinScale(minScale, maxScale, position, resolution);
-  useMapBboxChange(handleBboxChange);
-  return React.createElement("div", {
-    className: className,
-    ref: wrapperRef,
-    style: style
-  }, children);
-};
-
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
-
-const topLeft = distance => css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
+  }, [map, onBboxChange, position, resolution]);
+  useUpdateMapView({
+    position,
+    resolution
+  });
+  useMaxMinScale(minScale, maxScale, position, resolution);
+  useMapBboxChange(handleBboxChange);
+  return React.createElement("div", {
+    className: className,
+    ref: wrapperRef,
+    style: style
+  }, children);
+};
+
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
+
+const topLeft = distance => css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
+
+const topRight = distance => css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+
+const bottomLeft = distance => css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+
+const bottomRight = distance => css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+
+const placementMixin = function placementMixin(placement, distance) {
+  if (placement === void 0) {
+    placement = 'bottom-left';
+  }
+
+  if (distance === void 0) {
+    distance = '1rem';
+  }
+
+  return css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
+};
+
+var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+const mapControlBtnMixin = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
+const ZoomInBtn = /*#__PURE__*/styled(Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomInBtn.defaultProps = {
+  kind: "plus"
+};
+const ZoomOutBtn = /*#__PURE__*/styled(Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomOutBtn.defaultProps = {
+  kind: "minus"
+};
+const SearchBtn = /*#__PURE__*/styled(Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+SearchBtn.defaultProps = {
+  kind: "search"
+}; // TODO not exists in fonts
+
+const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+FullscreenBtn.defaultProps = {
+  kind: "maximize"
+};
+const MeasureBtn = /*#__PURE__*/styled(Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+MeasureBtn.defaultProps = {
+  kind: "measure_length"
+};
+const MapControl = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"])));
+const MapControls = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), (_ref) => {
+  let {
+    vertical
+  } = _ref;
+  return vertical ? 'column' : 'row';
+}, (_ref2) => {
+  let {
+    placement
+  } = _ref2;
+  return placementMixin(placement);
+}, MapControl, (_ref3) => {
+  let {
+    vertical
+  } = _ref3;
+  return vertical ? '0.5rem' : '0';
+}, (_ref4) => {
+  let {
+    vertical
+  } = _ref4;
+  return vertical ? '0' : '0.5rem';
+}, (_ref5) => {
+  let {
+    vertical
+  } = _ref5;
+  return vertical ? 'column' : 'row';
+});
+
+const Measure = () => {
+  return React.createElement(MapControl, null, React.createElement(MeasureBtn, {
+    onClick: () => {}
+  }));
+};
+
+const Search = () => {
+  return React.createElement(MapControl, null, React.createElement(SearchBtn, {
+    onClick: () => {}
+  }));
+};
+
+const Fullscreen = () => {
+  return React.createElement(MapControl, null, React.createElement(FullscreenBtn, {
+    onClick: () => {}
+  }));
+};
+
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
+const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+const MapLegendSection = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
+
+const MAX_SIZE$2 = 100;
+const MapLegendSymbol = (_ref) => {
+  let {
+    value,
+    parameter
+  } = _ref;
+  return React.createElement(LegendSymbol, {
+    key: value.title,
+    parameter: parameter,
+    parameterValue: value.parameterValue
+  }, symbol => React.createElement(Symbol, {
+    render: getMapLegendSymbolRenders,
+    symbol: symbol,
+    size: MAX_SIZE$2
+  }));
+};
+
+const DEFAULT_FROM_TO = ['Выше', 'Ниже'];
+const MapLegend = (_ref) => {
+  let {
+    layer,
+    config,
+    fromToTitle = DEFAULT_FROM_TO,
+    className
+  } = _ref;
+  const legend = useMapLegend(layer, config);
+
+  if (!legend) {
+    return null;
+  }
+
+  const {
+    symbol,
+    item
+  } = legend;
+  return React.createElement(LegendProvider, {
+    symbol: symbol
+  }, React.createElement(MapLegendControl, {
+    className: className
+  }, React.createElement(MapLegendContainer, null, React.createElement(MapLegendHeader, null, item.title), React.createElement(MapLegendSection, null, React.createElement(MapLegendValueDescr, null, fromToTitle[0]), item.values.map(value => React.createElement(MapLegendSymbol, {
+    key: value.title,
+    value: value,
+    parameter: item.parameter
+  })), React.createElement(MapLegendValueDescr, null, fromToTitle[1])))));
+};
+
+const DEFAULT_FORMATTERS = {
+  polygon: formatPolygonMeasure,
+  length: formatLength
+};
+
+const COORD_FRACTION = 6;
+const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
+let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
+  _inherits(BaseMeasureToolCreator, _PolylineControl);
+
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+
+  function BaseMeasureToolCreator(map, painter, params) {
+    var _this;
+
+    _classCallCheck(this, BaseMeasureToolCreator);
+
+    _this = _super.call(this, map, params);
+
+    _this.cancel = () => {
+      _this.fire('cancel');
+    };
+
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
+    _this.areaSymbol = params.areaSymbol;
+
+    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+
+
+    _this.on('change', _this.updateDistance);
+
+    return _this;
+  }
+
+  _createClass(BaseMeasureToolCreator, [{
+    key: "_handleMousemove",
+    value: function _handleMousemove(event) {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_handleMousemove", this).call(this, event);
+
+      this.drawPointOnMouseMove(event);
+    }
+  }, {
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_activate", this).call(this);
+
+      this.addTempLabel();
+      this.setCursor('pointer');
+    }
+  }, {
+    key: "_deactivate",
+    value: function _deactivate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_deactivate", this).call(this);
+
+      this.removeCoordLabel();
+      this.removeTempLabel();
+      this.removeMeasureLabel();
+      this.removeTempPolygon();
+      this.setCursor('default');
+    }
+  }, {
+    key: "handlePointAdd",
+    value: function handlePointAdd() {
+      const feature = this.activeFeature;
+      if (!feature) return;
+      const {
+        rings,
+        crs
+      } = feature;
+
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.finishDrawing();
+        this.fire(new DrawingFinishEvent(feature, new MouseEvent('mouseup')));
+        return;
+      }
+
+      if (rings[0].length === 2) {
+        const projection = crs.projectionTo(geo);
+        const point = rings[0][0];
+        if (!projection) return;
+        const [lat, long] = projection(point);
+        this.removeTempLabel();
+        this.addMeasureResultLabel();
+        this.addCoordLabel(lat.toFixed(COORD_FRACTION) + ", " + long.toFixed(COORD_FRACTION), point);
+      } else {
+        this.removeCoordLabel();
+      }
+    }
+  }, {
+    key: "polygonPreview",
+    value: function polygonPreview() {
+      if (this.tempPolygon) {
+        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
+      }
+
+      const feature = this.activeFeature;
+      if (!feature) return;
+      const {
+        rings,
+        crs
+      } = feature;
+      const polygonRings = [...rings[0]];
+      polygonRings.shift();
+      this.tempPolygon = new Polygon(polygonRings, {
+        crs
+      });
+      this.tempPolygon.symbol = this.areaSymbol || measureAreaSymbol;
+      this.activeFeature && this.activeFeature.hide();
+      this._tempLayer && this._tempLayer.add(this.tempPolygon);
+    }
+  }, {
+    key: "removeTempPolygon",
+    value: function removeTempPolygon() {
+      if (this.tempPolygon) {
+        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
+        delete this.tempPolygon;
+      }
+    }
+  }, {
+    key: "updateDistance",
+    value: function updateDistance(event) {
+      const feature = this.activeFeature;
+      const {
+        ringIndex,
+        pointIndex
+      } = event;
+      if (!feature || ringIndex === null || pointIndex === null) return;
+      const {
+        rings,
+        crs
+      } = feature;
+      const position = rings[ringIndex][pointIndex];
+      const length$1 = length(rings, crs);
+      let content = this.formatters.length(length$1);
+
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.polygonPreview();
+        const area$1 = area(rings, crs);
+        content = this.formatters.polygon(area$1, length$1);
+      } else if (this.tempPolygon) {
+        feature.show();
+        this.removeTempPolygon();
+      }
+
+      if (this.measureResultLabel) {
+        this.measureResultLabel.position = position;
+        this.measureResultLabel.content = content;
+      }
+    }
+  }, {
+    key: "addTempLabel",
+    value: function addTempLabel() {
+      this.tempLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
+        content: 'Нажмите на карту, чтобы начать измерение',
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this._tempLayer.add(this.tempLabel);
+    }
+  }, {
+    key: "addCoordLabel",
+    value: function addCoordLabel(content, position) {
+      this.coordLabel = new LabelFeature(position, {
+        content,
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol,
+          onClose: this.cancel
+        })
+      });
+      this._tempLayer && this.coordLabel && this._tempLayer.add(this.coordLabel);
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      this.measureResultLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this.measureResultLabel && this._tempLayer.add(this.measureResultLabel);
+    }
+  }, {
+    key: "removeTempLabel",
+    value: function removeTempLabel() {
+      if (this.tempLabel) {
+        this._tempLayer && this._tempLayer.remove(this.tempLabel);
+        delete this.tempLabel;
+      }
+    }
+  }, {
+    key: "removeCoordLabel",
+    value: function removeCoordLabel() {
+      if (this.coordLabel) {
+        this._tempLayer && this._tempLayer.remove(this.coordLabel);
+        delete this.coordLabel;
+      }
+    }
+  }, {
+    key: "removeMeasureLabel",
+    value: function removeMeasureLabel() {
+      if (this.measureResultLabel) {
+        this._tempLayer && this._tempLayer.remove(this.measureResultLabel);
+        delete this.measureResultLabel;
+      }
+    }
+  }, {
+    key: "drawPointOnMouseMove",
+    value: function drawPointOnMouseMove(event) {
+      if (this.tempLabel) {
+        this.tempLabel.position = event.point.position;
+      }
+    }
+  }, {
+    key: "setCursor",
+    value: function setCursor(cursor) {
+      const {
+        wrapper
+      } = this.painter;
 
-const topRight = distance => css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+      if (wrapper && typeof wrapper !== 'string') {
+        wrapper.style.cursor = cursor;
+      }
+    }
+  }]);
 
-const bottomLeft = distance => css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+  return BaseMeasureToolCreator;
+}(PolylineControl);
 
-const bottomRight = distance => css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
+  _inherits(BaseMeasureToolEditor, _PolyEditor);
 
-const placementMixin = function placementMixin(placement, distance) {
-  if (placement === void 0) {
-    placement = 'bottom-left';
-  }
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
 
-  if (distance === void 0) {
-    distance = '1rem';
-  }
+  function BaseMeasureToolEditor(map, painter, params) {
+    var _this;
 
-  return css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
-};
+    _classCallCheck(this, BaseMeasureToolEditor);
 
-var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
-const mapControlBtnMixin = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
-const ZoomInBtn = /*#__PURE__*/styled(Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomInBtn.defaultProps = {
-  kind: "plus"
-};
-const ZoomOutBtn = /*#__PURE__*/styled(Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomOutBtn.defaultProps = {
-  kind: "minus"
-};
-const SearchBtn = /*#__PURE__*/styled(Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-SearchBtn.defaultProps = {
-  kind: "search"
-}; // TODO not exists in fonts
+    _this = _super.call(this, map, params);
 
-const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-FullscreenBtn.defaultProps = {
-  kind: "maximize"
-};
-const MeasureBtn = /*#__PURE__*/styled(Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-MeasureBtn.defaultProps = {
-  kind: "measure_length"
-};
-const MapControl = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"])));
-const MapControls = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), _ref => {
-  let {
-    vertical
-  } = _ref;
-  return vertical ? 'column' : 'row';
-}, _ref2 => {
-  let {
-    placement
-  } = _ref2;
-  return placementMixin(placement);
-}, MapControl, _ref3 => {
-  let {
-    vertical
-  } = _ref3;
-  return vertical ? '0.5rem' : '0';
-}, _ref4 => {
-  let {
-    vertical
-  } = _ref4;
-  return vertical ? '0' : '0.5rem';
-}, _ref5 => {
-  let {
-    vertical
-  } = _ref5;
-  return vertical ? 'column' : 'row';
-});
+    _this.measureResult = () => {
+      const feature = _this.activeFeature;
+      if (!feature) return null;
+      const {
+        rings,
+        isEnclosed,
+        crs
+      } = feature;
+      const pointsCount = rings[0].length;
+      const position = rings[0][pointsCount - 1];
+      const area$1 = area(rings, crs);
+      const length$1 = length(rings, crs, isEnclosed);
+      const content = isEnclosed ? _this.formatters.polygon(area$1, length$1) : _this.formatters.length(length$1);
+      return {
+        content,
+        position
+      };
+    };
 
-const Measure = () => {
-  return React.createElement(MapControl, null, React.createElement(MeasureBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.removeFeature = () => {
+      _this.fire('remove');
+    };
 
-const Search = () => {
-  return React.createElement(MapControl, null, React.createElement(SearchBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
 
-const Fullscreen = () => {
-  return React.createElement(MapControl, null, React.createElement(FullscreenBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.on('change', _this.updateMeasureResult);
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
-const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-const MapLegendSection = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
+    _this.on('edit', _this.updateMeasureResult);
 
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
-  let {
-    value,
-    parameter
-  } = _ref;
-  return React.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React.createElement(Symbol, {
-    render: getMapLegendSymbolRenders,
-    symbol: symbol,
-    size: MAX_SIZE$2
-  }));
-};
+    return _this;
+  }
 
-const DEFAULT_FROM_TO = ['Выше', 'Ниже'];
-const MapLegend = _ref => {
-  let {
-    layer,
-    config,
-    fromToTitle = DEFAULT_FROM_TO,
-    className
-  } = _ref;
-  const legend = useMapLegend(layer, config);
+  _createClass(BaseMeasureToolEditor, [{
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
 
-  if (!legend) {
-    return null;
-  }
+      this.addMeasureResultLabel();
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      const measureResult = this.measureResult();
+      if (measureResult === null) return;
+      const {
+        content,
+        position
+      } = measureResult;
+      this.measureResultLabel = new LabelFeature(position, {
+        content,
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          onClose: this.removeFeature,
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this._tempLayer.add(this.measureResultLabel);
+    }
+  }, {
+    key: "updateMeasureResult",
+    value: function updateMeasureResult() {
+      if (this.measureResultLabel) {
+        const measureResult = this.measureResult();
+        if (measureResult === null) return;
+        const {
+          content,
+          position
+        } = measureResult;
+        this.measureResultLabel.content = content;
+        this.measureResultLabel.position = position;
+      }
+    }
+  }]);
 
-  const {
-    symbol,
-    item
-  } = legend;
-  return React.createElement(LegendProvider, {
-    symbol: symbol
-  }, React.createElement(MapLegendControl, {
-    className: className
-  }, React.createElement(MapLegendContainer, null, React.createElement(MapLegendHeader, null, item.title), React.createElement(MapLegendSection, null, React.createElement(MapLegendValueDescr, null, fromToTitle[0]), item.values.map(value => React.createElement(MapLegendSymbol, {
-    key: value.title,
-    value: value,
-    parameter: item.parameter
-  })), React.createElement(MapLegendValueDescr, null, fromToTitle[1])))));
-};
+  return BaseMeasureToolEditor;
+}(PolyEditor);
 
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
@@ -5159,7 +5136,7 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 const _excluded$3 = ["isActive"];
-const Measurer = _ref => {
+const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
@@ -5177,18 +5154,18 @@ const Measurer = _ref => {
 
 var _templateObject$7, _templateObject2$6, _templateObject3$6;
 const ScaleRulerContainer = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
-const ScaleRulerBlock = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
+const ScaleRulerBlock = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), (_ref) => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), (_ref2) => {
   let {
     alignEnd
   } = _ref2;
   return alignEnd ? 'flex-end' : 'center';
-}, _ref3 => {
+}, (_ref3) => {
   let {
     width
   } = _ref3;
@@ -5213,7 +5190,7 @@ const ScaleRuler = () => {
   }, currentScale >= 1000 ? currentScale / 1000 + "km" : currentScale + "m")));
 };
 
-const Zoom = _ref => {
+const Zoom = (_ref) => {
   let {
     children
   } = _ref;
@@ -5262,7 +5239,7 @@ const placementMixin$1 = function placementMixin(placement, distance, cornerSize
   return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
 };
 const corner = /*#__PURE__*/css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
-const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), _ref => {
+const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), (_ref) => {
   let {
     placement,
     distance = '0.5rem',
@@ -5270,7 +5247,7 @@ const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$1 || (_templa
     cornerSize = '0.25rem'
   } = _ref;
   return placementMixin$1(placement, distance, withArrow ? cornerSize : null);
-}, _ref2 => {
+}, (_ref2) => {
   let {
     withArrow
   } = _ref2;
@@ -5284,7 +5261,7 @@ const {
   Consumer
 } = /*#__PURE__*/createContext([]); // TODO I just cant read that
 
-const Tooltip = _ref => {
+const Tooltip = (_ref) => {
   let {
     features = [],
     map,
@@ -5323,7 +5300,7 @@ const Noop = () => React.createElement("div", {
   }
 });
 
-const DraggableMarker = _ref => {
+const DraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -5337,5 +5314,20 @@ const DraggableMarker = _ref => {
   return React.createElement(Fragment, null);
 };
 
+const polygonCircleFromPoint = (center, diameter) => {
+  const coordinates = [];
+  const radius = diameter / 2;
+  const endAngle = Math.PI * 2;
+  const step = Math.max(Math.PI / 2 / radius, endAngle / 128);
+  let start = 0;
+  let end = endAngle;
+
+  for (let ang = start; ang < end; ang += step) {
+    coordinates.push([Math.cos(ang) * radius + center[0], Math.sin(ang) * radius + center[1]]);
+  }
+
+  return [coordinates];
+};
+
 export { ArrowLineMiterRender, BaseMeasureToolCreator, BaseMeasureToolEditor, CRS_MAP, CardAttributes, CardHeader, CircleLineMiterRender, ClassificationCondition, ClassificationManager, ClusterLayer, CompoundIcon, DEFAULT_CRS, DEFAULT_SRID, DEFAULT_SYMBOL_SIZE, DraggableMarker, EvergisCard, EvergisCardAttribute, AttributeContainer as EvergisCardAttributeContainer, AttributeTitle as EvergisCardAttributeTitle, AttributeValueContainer as EvergisCardAttributeValueContainer, CardControls as EvergisCardCardControls, CardTitle as EvergisCardCardTitle, CloseIcon as EvergisCardCloseIcon, EvergisCardContainer, CurrentFeatureIndex as EvergisCardCurrentFeatureIndex, FeatureName as EvergisCardFeatureName, LayerName as EvergisCardLayerName, NextIcon as EvergisCardNextIcon, CardPagination as EvergisCardPagination, PaginationDescription as EvergisCardPaginationDescription, PrevIcon as EvergisCardPrevIcon, SimpleAttribute as EvergisCardSimpleValue, StickyHeader as EvergisCardStickyHeader, ValueLink as EvergisCardValueLink, ZoomIcon as EvergisCardZoomIcon, EvergisDynamicLayer, EvergisFeature, EvergisLayer, EvergisProvider, EvergisSelect, EvergisSelectLayer, EvergisSelectProvider, EvergisStyle, EvergisTileLayer, FeatureLayer, Fullscreen, LabelSymbol, Legend, LegendContainer, LegendProvider, LegendSection, LegendSectionContainer, LegendSymbol, LegendValue, LegendValueContainer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegend, MapLegendContainer, MapLegendHeader, MapLegendSection, MapLegendSymbol, MapProvider, Measure, MeasureTool, Measurer, NO_CONTENT_VALUE, Noop, PREVIEW_LIMITS, SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol, SOLID_INTERVALS, SVGPoly, ScaleRuler, ScaleRulerBlock, ScaleRulerContainer, Search, SelectedPointSymbol, SelectedPolySymbol, ShadowedPointSymbol, ShadowedPolySymbol, SquareLineMiterRender, SrId, StyleSymbol, Symbol, TextContainer, TileLayer, Tooltip, TooltipComponent, TooltipProvider, Zoom, ZoomLevel, adjustSymbol, applyParameterValue, clamp, copyRings, createCompositeSymbol, createLabelSymbol, createStyleLegend, createValueTitle, defaultOffset, defineStrokeStylePreset, deserializeSymbol, evaluateFeature, extractStyle, extractSymbol, findChildFeatureStyle, findChildFeatureSymbol, formatArea, formatAttributeValue, formatLength, formatPolygonMeasure, getAttributeNameFromClassified, getAttributeNameFromCondition, getChildSymbols, getCrs, getDashStylePreset, getFeatureSymbol, getLegendSymbolRenders, getLineDash, getLineMiterRender, getMapLegendSymbolRenders, getMapState, getParameterValue, getScale, getSymbolRenders, isArrowLineMiter, isCalculatedParameter, isCircleLineMiter, isCompositeSymbol, isDashedBrush, isFilledLineMitter, isHatchBrush, isImageSymbol, isLabelSymbol, isMaskedImageSymbol, isMiterExist, isParameterByAttribute, isParameterValueSimple, isParameterValueSymbol, isPatternBrush, isPointLabelSymbol, isPointSymbol, isPolygonHasHatchBrush, isPolygonHasPatternBrush, isPolygonLabelSymbol, isPolygonSymbol, isPolylineLabelSymbol, isPolylineLikePolygon, isPolylineSymbol, isPolylineSymbols, isRangeClass, isRasterSymbol, isSGisImageSymbol, isSGisPointSymbol, isSGisPolygonSymbol, isSGisPolylineSymbol, isScalablePolylineSymbol, isSimpleOffset, isSimplePolylineSymbol, isSimpleSymbol, isSizableSymbol, isSolidBrush, isSquareLineMiter, isSquareSymbol, isStaticImageSymbol, isStringParameterValue, isStrokeStyledSymbol, isStyle, isSymbolWithOffset, isTwoDimensionalSymbol, isUniqueClass, measureAreaSymbol, measureLengthSymbol, measurePolygonSnapSymbol, metersToPixels, numberWithSpaces, packStyle, polygonCircleFromPoint, printRangeClass, renderSymbolToCanvas, selectedPoint, selectedPolygon, selectedPolyline, setDefaultParameterValue, setParameterValue, shouldUpdateMapState, solidStrokeStylePreset, strokeStylePresets, symbolParameterWalker, symbolTypeGuard, toIntervals, toLineDash, unClassify, updateMapResolution, useCanvas, useClusterLayer, useCrs, useDebouncedCallback, useDraggableMarker, useEventPoint, useEvergisContext, useEvergisDynamicLayer, useEvergisSelect, useEvergisSelectContext, useEvergisTileLayer, useFeatureLayer, useLayerLegend, useLayerOrder, useLayerVisibility, useLegend, useLegendContext, useLegendValueSymbol, useMapBboxChange, useMapContext, useMapLegend, useMapLevel, useMapPick, useMapResize, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useProperty, useScale, useSymbol, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
 //# sourceMappingURL=react.esm.js.map