@evergis/react 2.0.71 → 2.0.74

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,
@@ -548,7 +540,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every(_ref => {
+  if (attributeValues.every((_ref) => {
     let {
       type
     } = _ref;
@@ -556,7 +548,7 @@ const formatStringAttribute = value => {
   }
   /* String */
   )) {
-    return [stringAttribute(attributeValues.map(_ref2 => {
+    return [stringAttribute(attributeValues.map((_ref2) => {
       let {
         value
       } = _ref2;
@@ -963,30 +955,33 @@ const unClassify = symbol => Object.entries(symbol).reduce((flatSymbol, _ref) =>
 }, {});
 
 const printRangeClass = (value, index) => {
-  const isDouble = Boolean(value.attribute && value.attribute.type === 'Double');
+  var _value$attribute, _value$attribute2;
+
+  const isDouble = Boolean(((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === 'Double');
+  const isDate = Boolean(((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === 'DateTime');
   const {
     from,
     to
-  } = getRangeValues(value, isDouble, index);
+  } = getRangeValues(value, isDouble, isDate, index);
 
   if (from === null) {
-    return to + " \u0438 \u043C\u0435\u043D\u0435\u0435";
+    return to + " " + (isDate ? 'и до' : 'и менее');
   }
 
   if (to === null) {
-    return "\u0431\u043E\u043B\u0435\u0435 " + from;
+    return (isDate ? 'после' : 'более') + " " + from;
   }
 
   return from === to ? "" + from : from + " - " + to;
 };
 
-function getRangeValues(_ref, isDouble, index) {
+function getRangeValues(_ref, isDouble, isDate, index) {
   let {
     from,
     to
   } = _ref;
   return {
-    from: from !== null && index !== 0 ? isDouble ? +from : +from + 1 : from,
+    from: from !== null && index !== 0 ? isDate ? from : isDouble ? +from : +from + 1 : from,
     to
   };
 }
@@ -1036,7 +1031,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
@@ -1044,7 +1039,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,
@@ -1062,7 +1057,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;
@@ -1477,7 +1472,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);
@@ -1569,1965 +1564,1625 @@ 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);
-
-      this.removeCoordLabel();
-      this.removeTempLabel();
-      this.removeMeasureLabel();
-      this.removeTempPolygon();
-      this.setCursor('default');
+    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: "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;
-      }
+  return SquareLineMiterRender;
+}(LineMiterRender);
 
-      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();
-      }
+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: "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);
+    const nextCoordinates = reversedRing[i - 1];
+
+    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
+      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "removeTempPolygon",
-    value: function removeTempPolygon() {
-      if (this.tempPolygon) {
-        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
-        delete 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: "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();
-      }
+    const prevCoordinates = newRing[i - 1];
 
-      if (this.measureResultLabel) {
-        this.measureResultLabel.position = position;
-        this.measureResultLabel.content = content;
-      }
+    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
+      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
     }
-  }, {
-    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;
+  }
 
-      if (wrapper && typeof wrapper !== 'string') {
-        wrapper.style.cursor = cursor;
-      }
+  return newRing;
+};
+
+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);
     }
-  }]);
+  });
+};
 
-  return BaseMeasureToolCreator;
-}(PolylineControl);
+const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
+let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
+  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
 
-let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
-  _inherits(BaseMeasureToolEditor, _PolyEditor);
+  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
+  function SGisPolylineSymbol(originalSymbol) {
+    var _originalSymbol$strok, _originalSymbol$strok2;
 
-  function BaseMeasureToolEditor(map, painter, params) {
     var _this;
 
-    _classCallCheck(this, BaseMeasureToolEditor);
+    _classCallCheck(this, SGisPolylineSymbol);
 
-    _this = _super.call(this, map, params);
+    _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;
+  }
 
-    _this.measureResult = () => {
-      const feature = _this.activeFeature;
-      if (!feature) return null;
+  _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 {
-        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
-      };
-    };
+        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
+      });
 
-    _this.removeFeature = () => {
-      _this.fire('remove');
-    };
+      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);
+      }
 
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
+      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: линия должна быть в начале чтобы быть под митерами
 
-    _this.on('change', _this.updateMeasureResult);
 
-    _this.on('edit', _this.updateMeasureResult);
+      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);
+    }
+  }]);
+
+  return SGisPolylineSymbol;
+}(PolylineSymbol);
+
+let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
+  _inherits(LabelSymbol, _DynamicPointSymbol);
+
+  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
+
+  function LabelSymbol(_temp) {
+    var _this;
+
+    let {
+      component,
+      offset
+    } = _temp === void 0 ? {} : _temp;
+
+    _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 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 Component = this.component;
 
-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;
     }
-  }
+  }, {
+    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
+      });
+    }
+  }, {
+    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 reversedRing.reverse();
+  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
+}));
 
-const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
-  const newRing = ring.slice();
-
-  for (let i = 0; i < newRing.length; i++) {
-    const coordinates = newRing[i];
+let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
+  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
 
-    if (i === 0 && isFirstRing) {
-      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
-    }
+  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
 
-    const prevCoordinates = newRing[i - 1];
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPointSymbol(props) {
+    _classCallCheck(this, SelectedPointSymbol);
 
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
-    }
+    return _super.call(this, props);
   }
 
-  return newRing;
-};
+  _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);
 
-const updateRingsForMiter = (rings, position, miterSize) => {
-  return rings.map((ring, ringIndex) => {
-    switch (position) {
-      case 'right':
-        return updateRingForRightMiter(ring, miterSize, ringIndex === rings.length - 1);
+      if (feature.isSelected) {
+        pointRender.strokeColor = this.selectedStrokeColor;
+        pointRender.fillColor = this.selectedFillColor;
+      }
 
-      default:
-        return updateRingForLeftMiter(ring, miterSize, ringIndex === 0);
+      return pointRender;
     }
-  });
-};
-
-const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
-let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
-  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
+  }]);
 
-  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
+  return SelectedPointSymbol;
+}(ShadowedPointSymbol);
 
-  function SGisPolylineSymbol(originalSymbol) {
-    var _originalSymbol$strok, _originalSymbol$strok2;
+let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
+  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
 
-    var _this;
+  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
 
-    _classCallCheck(this, SGisPolylineSymbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPolySymbol(props) {
+    _classCallCheck(this, SelectedPolySymbol);
 
-    _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(SelectedPolySymbol, [{
+    key: "getShadow",
+    value: function getShadow(coordinates, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, 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);
-    }
-  }]);
-
-  return SGisPolylineSymbol;
-}(PolylineSymbol);
-
-let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
-  _inherits(LabelSymbol, _DynamicPointSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, feature) {
+      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
 
-  function LabelSymbol(_temp) {
-    var _this;
+      if (feature.isSelected) {
+        polyRender.fillColor = this.selectedFillColor;
+        polyRender.strokeColor = this.selectedStrokeColor;
 
-    let {
-      component,
-      offset
-    } = _temp === void 0 ? {} : _temp;
+        if (this.selectedStrokeWidth !== void 0) {
+          polyRender.strokeWidth = this.selectedStrokeWidth;
+        }
+      }
 
-    _classCallCheck(this, LabelSymbol);
+      return polyRender;
+    }
+  }]);
 
-    _this = _super.call(this, {
-      offset
-    });
-    _this.component = component;
-    return _this;
-  }
+  return SelectedPolySymbol;
+}(ShadowedPolySymbol);
 
-  _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));
-    }
-  }, {
-    key: "renderDom",
-    value: function renderDom(content, node) {
-      if (!node) {
-        return;
-      }
-
-      const Component = this.component;
-
-      if (Component) {
-        ReactDOM.render(React.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
-      }
-    }
-  }]);
-
-  return LabelSymbol;
-}(DynamicPointSymbol);
+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'
+});
 
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
+const metersToPixels = (meters, _ref) => {
+  let {
+    painter,
+    crs = geo
+  } = _ref;
   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
-      });
-    }
-  });
+    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);
 };
 
-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
-  })];
-}
+const defaultPathStyles = {
+  strokeWidth: 2,
+  strokeColor: 'rgb(0, 163, 245)',
+  fillStyle: FillStyle.None
+};
+let SVGPoly = /*#__PURE__*/function (_Symbol) {
+  _inherits(SVGPoly, _Symbol);
 
-let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
-  _inherits(ShadowedPointSymbol, _PointSymbol);
+  var _super = /*#__PURE__*/_createSuper(SVGPoly);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
+  function SVGPoly(_temp) {
+    var _this;
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPointSymbol(options) {
-    _classCallCheck(this, ShadowedPointSymbol);
+    let {
+      redrawFeatureNode,
+      pathStyles,
+      circle,
+      className,
+      appendToSvg
+    } = _temp === void 0 ? {} : _temp;
 
-    return _super.call(this, options);
+    _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];
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(position, _feature) {
-      return ShadowedPointSymbol.getShadowArc(position, this);
-    }
-  }, {
-    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
+      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: "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: "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: "getArcs",
-    value: function getArcs(position, params) {
-      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
-      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
-      return shadowRender ? [shadowRender, pointRender] : [pointRender];
-    }
-  }]);
+    key: "update",
+    value: function update(_ref) {
+      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
 
-  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);
+      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;
 
-    return _super.call(this, options);
-  }
+      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);
+      }
 
-  _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];
+      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));
 
-      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)'
+  return SVGPoly;
+}(Symbol$1);
+
+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 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 measureSymbolParams = {
-  strokeColor: '#ff6933',
-  shadowSize: 0,
-  vertexShadowSize: 0
+const LEGEND_FEATURES = {
+  polyline: lineLegendFeature,
+  polygon: polygonLegendFeature
 };
-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 MOCK_FEATURES = {
+  point: pointFeature,
+  polyline: lineFeature,
+  polygon: polygonFeature
 };
-const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
-  strokeColor: '#ff6933',
-  shadowSize: 0
-}));
 
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
+function getSymbolRenders(symbol, size, features) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
+  if (features === void 0) {
+    features = {};
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
+  const resolution = viewBoxSize / size;
 
-    return _super.call(this, props);
+  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+
+  if (isSGisPolygonSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
   }
 
-  _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 (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
+  }
 
-      if (feature.isSelected) {
-        pointRender.strokeColor = this.selectedStrokeColor;
-        pointRender.fillColor = this.selectedFillColor;
-      }
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
+}
+const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-      return pointRender;
-    }
-  }]);
+  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
+};
+const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
+  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
+};
 
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
+function renderSymbolToCanvas(renders, canvas) {
+  renders.forEach(render => {
+    canvas.draw(render);
+  });
+}
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
+function deserializeSymbol(symbol) {
+  switch (symbol.type) {
+    case 'circlePointSymbol':
+      return deserializePointSymbol(symbol);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
+    case 'squarePointSymbol':
+      return deserializeSquareSymbol(symbol);
 
-    return _super.call(this, props);
-  }
+    case 'maskedImagePointSymbol':
+      return deserializeMaskedImageSymbol(symbol);
 
-  _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);
+    case 'imagePointSymbol':
+      return deserializeImagePointSymbol(symbol);
 
-      if (feature.isSelected) {
-        polyRender.fillColor = this.selectedFillColor;
-        polyRender.strokeColor = this.selectedStrokeColor;
+    case 'polygonSymbol':
+      return deserializePolygonSymbol(symbol);
 
-        if (this.selectedStrokeWidth !== void 0) {
-          polyRender.strokeWidth = this.selectedStrokeWidth;
-        }
-      }
+    case 'simplePolylineSymbol':
+    case 'polylineSymbol':
+      return deserializePolylineSymbol(symbol);
 
-      return polyRender;
-    }
-  }]);
+    default:
+      return null;
+  }
+}
 
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
+function deserializePointSymbol(symbol) {
+  // @ts-ignore
+  return new PointSymbol(deserializePointSymbolParams(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'
-});
+function deserializeSquareSymbol(symbol) {
+  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle)
+  }));
+}
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: FillStyle.None
-};
-let SVGPoly = /*#__PURE__*/function (_Symbol) {
-  _inherits(SVGPoly, _Symbol);
+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))
+  }));
+}
 
-  var _super = /*#__PURE__*/_createSuper(SVGPoly);
+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 SVGPoly(_temp) {
-    var _this;
+function deserializePolygonSymbol(symbol) {
+  if (isPolygonHasPatternBrush(symbol)) {
+    return new SGisImageFill(symbol);
+  }
 
-    let {
-      redrawFeatureNode,
-      pathStyles,
-      circle,
-      className,
-      appendToSvg
-    } = _temp === void 0 ? {} : _temp;
+  if (isPolygonHasHatchBrush(symbol)) {
+    return new SGisBrushFill(symbol);
+  }
 
-    _classCallCheck(this, SVGPoly);
+  return new SGisPolygonSymbol(symbol);
+}
 
-    _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 deserializePolylineSymbol(symbol) {
+  return new SGisPolylineSymbol(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);
-        }
-      });
+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))
+  };
+}
 
-      this._setEventListeners(feature);
+function deserializeBase64(base) {
+  return "data:image/png;base64," + base;
+}
 
-      return [feature.__dynamicSymbolRender];
-    }
-  }, {
-    key: "setCirclePxRaius",
-    value: function setCirclePxRaius(crs) {
-      if (this.circle && this.pathStyles) {
-        var _this$circle;
+function deserializeAnchor(offset) {
+  // @ts-ignore
+  return offset.map(getParameterValue);
+}
 
-        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 deserializeColor(color) {
+  return color ? new Color(color).toString() : null;
+}
 
-      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;
+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);
+  }
 
-      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);
-      }
+  return symbol;
+};
+function centerAlignSymbol(symbol) {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.offset = [0, 0];
+  }
 
-      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));
+  return symbol;
+}
+const adjustSymbol = (symbol, _ref) => {
+  let {
+    size
+  } = _ref;
+  return centerAlignSymbol(clampSymbol(symbol, 0, size));
+};
 
-      if (this.circle) {
-        svgRender._setArcNode();
-      } else {
-        svgRender._setPolyNode();
-      }
+let EvergisFeature = /*#__PURE__*/function () {
+  function EvergisFeature(feature) {
+    _classCallCheck(this, EvergisFeature);
 
-      let svgElement;
-      svgRender.getNode((_, svg) => {
-        svgElement = svg;
-        this.className && svgElement.classList.add(this.className);
-        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
+    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);
+  }
 
-        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());
+  _createClass(EvergisFeature, [{
+    key: "sGisFeature",
+    value: function sGisFeature() {
+      if (!this.geometry || !this.symbol) {
+        return null;
+      } // @ts-ignore
 
-          if (this.circle) {
-            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
-          }
-        }
-      });
-      return svgElement;
-    }
-  }, {
-    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
-            });
-          });
-        }
-      });
-    }
-  }]);
+      const {
+        type,
+        coordinates,
+        sr
+      } = this.geometry;
+      const crs = CRS_MAP[sr];
 
-  return SVGPoly;
-}(Symbol$1);
+      if (!crs) {
+        return null;
+      }
 
-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;
-}
+      switch (type) {
+        case GeometryType.Point:
+          return new PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-/**
- * Моки фич для отображения превью символа
- * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
- */
+        case GeometryType.Multipoint:
+          return new MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-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
-};
+        case GeometryType.Polyline:
+          return new Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
 
-function getSymbolRenders(symbol, size, features) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+        case GeometryType.Polygon:
+          return new Polygon(coordinates, {
+            symbol: selectedPolygon,
+            crs
+          });
 
-  if (features === void 0) {
-    features = {};
-  }
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "extent",
+    value: function extent() {
+      const feature = this.sGisFeature();
+      return feature && feature.bbox;
+    }
+  }]);
 
-  const resolution = viewBoxSize / size;
+  return EvergisFeature;
+}();
 
-  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+function evaluateCondition(condition, attributes) {
+  try {
+    const evaluator = new ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition);
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
-  }
+    if (result instanceof Error) {
+      return null;
+    }
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
+    return result;
+  } catch (_unused) {
+    return null;
   }
+}
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
+function getAttributeValue(attributes, attributeName) {
+  const attributeMeta = attributes.find((_ref) => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
+  });
+  return attributeMeta ? attributeMeta.value : null;
 }
-const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
 
-  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
-};
-const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
+const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
 
-  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
-};
+function findFeatureValue(parameterValues, _ref2) {
+  let [name, value] = _ref2;
+  return value !== null ? parameterValues.find((_ref3) => {
+    let {
+      condition
+    } = _ref3;
+    return value !== undefined && evaluateCondition(condition, {
+      [name]: value
+    });
+  }) : null;
+}
 
-function renderSymbolToCanvas(renders, canvas) {
-  renders.forEach(render => {
-    canvas.draw(render);
-  });
+function extractValuesAttribute(parameterValues, attributes) {
+  const name = getAttributeNameFromClassified(parameterValues) || '';
+  const value = name && getAttributeValue(attributes, name);
+  return [name, value];
 }
 
-function deserializeSymbol(symbol) {
-  switch (symbol.type) {
-    case 'circlePointSymbol':
-      return deserializePointSymbol(symbol);
+function evaluateFeatureSymbol(attributes) {
+  // @ts-ignore
+  function calc(result, _ref4) {
+    let [parameterName, parameterValue] = _ref4;
+    let newParameterValue;
 
-    case 'squarePointSymbol':
-      return deserializeSquareSymbol(symbol);
+    if (isParameterByAttribute(parameterValue)) {
+      const [attributeName, attributeValue] = extractValuesAttribute(parameterValue.values, attributes);
+      const featureValue = findFeatureValue(parameterValue.values, [attributeName, attributeValue]);
+      newParameterValue = featureValue ? featureValue.value : parameterValue.defaultValue;
+    } else if (isObject(parameterValue)) {
+      // @ts-ignore
+      newParameterValue = Object.entries(parameterValue).reduce(calc, parameterValue);
+    }
 
-    case 'maskedImagePointSymbol':
-      return deserializeMaskedImageSymbol(symbol);
+    return newParameterValue !== undefined ? _extends({}, result, {
+      [parameterName]: newParameterValue
+    }) : result;
+  }
 
-    case 'imagePointSymbol':
-      return deserializeImagePointSymbol(symbol);
+  return calc;
+}
 
-    case 'polygonSymbol':
-      return deserializePolygonSymbol(symbol);
+function findChildFeatureStyle(childStyles, attributes) {
+  return (childStyles || []).find((_ref5) => {
+    let {
+      condition
+    } = _ref5;
+    const attributeName = condition && getAttributeNameFromCondition(condition);
+    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
 
-    case 'simplePolylineSymbol':
-    case 'polylineSymbol':
-      return deserializePolylineSymbol(symbol);
+    if (condition && attributeName && attributeValue !== undefined) {
+      return evaluateCondition(condition, {
+        [attributeName]: attributeValue
+      });
+    }
 
-    default:
-      return null;
-  }
+    return false;
+  }) || null;
 }
-
-function deserializePointSymbol(symbol) {
-  // @ts-ignore
-  return new PointSymbol(deserializePointSymbolParams(symbol));
+function findChildFeatureSymbol(childStyles, attributes) {
+  const featureStyle = findChildFeatureStyle(childStyles, attributes);
+  return featureStyle ? featureStyle.symbol : null;
 }
+function getFeatureSymbol(style, attributes) {
+  if (!style || !style.symbol) {
+    return null;
+  }
 
-function deserializeSquareSymbol(symbol) {
-  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle)
-  }));
-}
+  if (style.children !== null) {
+    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
+  }
 
-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))
-  }));
+  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
 }
 
-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)
-  }));
-}
+let EvergisLayer = /*#__PURE__*/function () {
+  function EvergisLayer(service) {
+    _classCallCheck(this, EvergisLayer);
 
-function deserializePolygonSymbol(symbol) {
-  if (isPolygonHasPatternBrush(symbol)) {
-    return new SGisImageFill(symbol);
+    this.name = null;
+    this.titleAttribute = null;
+    this.alias = null;
+    this.attributes = null;
+    this.style = null;
+    const evergisService = service;
+    const {
+      name,
+      alias,
+      style,
+      layerDefinition
+    } = evergisService;
+    this.name = name;
+    this.alias = alias || name;
+    this.attributes = getLayerAttributes(layerDefinition);
+    this.style = style && new EvergisStyle(style) || null;
+    this.titleAttribute = layerDefinition && layerDefinition.titleAttribute || null;
   }
 
-  if (isPolygonHasHatchBrush(symbol)) {
-    return new SGisBrushFill(symbol);
-  }
+  _createClass(EvergisLayer, [{
+    key: "evaluateFeature",
+    value: function evaluateFeature(feature) {
+      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) => {
+        let {
+          name
+        } = _ref;
+        return name === this.titleAttribute;
+      });
+      const displayName = titleAttribute && formatAttributeValue(titleAttribute)[0].value || feature.id;
+      feature.displayName = displayName ? "" + displayName : feature.id;
+      return feature;
+    }
+  }]);
 
-  return new SGisPolygonSymbol(symbol);
-}
+  return EvergisLayer;
+}();
 
-function deserializePolylineSymbol(symbol) {
-  return new SGisPolylineSymbol(symbol);
-}
+const findFeatureLayer = feature => layer => layer.name === feature.layerName;
 
-function deserializePointSymbolParams(_ref) {
+const evaluateFeature = layers => feature => {
+  const featureLayer = layers.find(findFeatureLayer(feature));
+  return featureLayer ? featureLayer.evaluateFeature(feature) : feature;
+};
+
+const OTHERS_TITLE = 'Другое';
+const createLegendItem = (_ref) => {
   let {
-    size,
-    offset,
-    strokeColor,
-    strokeWidth,
-    fillColor
+    attributes,
+    renderTitle,
+    skipDefaultValue,
+    reverse
   } = _ref;
-  return {
-    size: getParameterValue(size),
-    offset: deserializeAnchor(offset),
-    strokeWidth: getParameterValue(strokeWidth),
-    strokeColor: deserializeColor(getParameterValue(strokeColor)),
-    fillColor: deserializeColor(getParameterValue(fillColor))
+  return classification => {
+    const {
+      defaultTitle,
+      defaultValue,
+      values,
+      attribute: attributeName,
+      parameter
+    } = classification;
+    const attribute = attributeName && attributes ? getClassificationAttribute(attributeName, attributes) : undefined;
+    const defaultLegendValue = {
+      title: defaultTitle || OTHERS_TITLE,
+      parameterValue: defaultValue
+    };
+    const legendValues = values.map((value, index) => ({
+      title: renderTitle && renderTitle(_extends({}, value, {
+        attribute
+      }), index),
+      parameterValue: value.parameterValue
+    }));
+    const withDefault = skipDefaultValue ? legendValues : [...legendValues, defaultLegendValue];
+    const reversedValues = reverse ? [...withDefault].reverse() : withDefault;
+    return {
+      title: attribute && attribute.alias || attributeName,
+      attribute,
+      parameter,
+      values: reversedValues
+    };
   };
-}
+};
 
-function deserializeBase64(base) {
-  return "data:image/png;base64," + base;
-}
+function createStyleLegend(style, config) {
+  const {
+    classificationManager,
+    symbol
+  } = style;
+  const items = classificationManager.filter((_ref) => {
+    let {
+      parameter
+    } = _ref;
+    return config.parameters && parameter ? config.parameters.includes(parameter) : true;
+  });
 
-function deserializeAnchor(offset) {
-  // @ts-ignore
-  return offset.map(getParameterValue);
-}
+  if (items.length === 0) {
+    return null;
+  }
 
-function deserializeColor(color) {
-  return color ? new Color(color).toString() : null;
+  return {
+    symbol: unClassify(symbol),
+    items: items.map(createLegendItem(config))
+  };
 }
 
-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);
-  }
+function createValueTitle(value, index) {
+  if (value.title) return value.title;
+  if (isRangeClass(value)) return printRangeClass(value, index);
+  if (isUniqueClass(value)) return value.uniqueValue;
+  return '';
+}
 
-  return symbol;
-};
-function centerAlignSymbol(symbol) {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.offset = [0, 0];
+function formatArea(num) {
+  let result = num;
+  let measure = 'м²';
+
+  if (num >= 10000000) {
+    result = num / 1000000;
+    measure = 'км²';
+  } else if (num >= 10000) {
+    result = num / 10000;
+    measure = 'га';
   }
 
-  return symbol;
+  return numberWithSpaces(result) + " " + measure;
 }
-const adjustSymbol = (symbol, _ref) => {
-  let {
-    size
-  } = _ref;
-  return centerAlignSymbol(clampSymbol(symbol, 0, size));
-};
+function formatLength(num) {
+  let result = num;
+  let measure = 'м';
 
-let EvergisFeature = /*#__PURE__*/function () {
-  function EvergisFeature(feature) {
-    _classCallCheck(this, EvergisFeature);
+  if (num > 10000) {
+    result = num / 1000;
+    measure = 'км';
+  }
 
-    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 numberWithSpaces(result) + " " + measure;
+}
+function formatPolygonMeasure(area, perimiter) {
+  return "S : " + formatArea(area) + "  P : " + formatLength(perimiter);
+}
+function isPolylineLikePolygon(rings, resolution) {
+  if (rings[0].length <= 3) {
+    return false;
   }
 
-  _createClass(EvergisFeature, [{
-    key: "sGisFeature",
-    value: function sGisFeature() {
-      if (!this.geometry || !this.symbol) {
-        return null;
-      } // @ts-ignore
+  const coords = rings[0];
+  const firstPoint = coords[0];
+  const lastPoint = coords[coords.length - 1];
+  const distance = resolution * 2;
+  return softEquals(firstPoint[0], lastPoint[0], distance) && softEquals(firstPoint[1], lastPoint[1], distance);
+}
 
+function getScale(scale) {
+  const scales = [1, 2, 5];
 
-      const {
-        type,
-        coordinates,
-        sr
-      } = this.geometry;
-      const crs = CRS_MAP[sr];
+  for (let x = 0; x < 21; x++) {
+    for (let y = 0; y < scales.length; y++) {
+      const result = Math.pow(10, x) * scales[y];
 
-      if (!crs) {
-        return null;
+      if (result > scale) {
+        return result;
       }
+    }
+  }
 
-      switch (type) {
-        case GeometryType.Point:
-          return new PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
+  return 1;
+}
 
-        case GeometryType.Multipoint:
-          return new MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
+const useLegend = (style, config) => useMemo(() => {
+  if (!style || !(config && config.attributes)) return null;
+  return createStyleLegend(style, config);
+}, [style, config]);
 
-        case GeometryType.Polyline:
-          return new Polyline(coordinates, {
-            symbol: selectedPolyline,
-            crs
-          });
+const DEFAULT_LEGEND_CONFIG = {
+  renderTitle: createValueTitle
+};
+const useLayerLegend = (layer, config) => {
+  const {
+    style,
+    layerDefinition
+  } = layer || {};
+  const {
+    attributes
+  } = layerDefinition || {};
+  const styleProxy = style && new EvergisStyle(style);
+  return useLegend(styleProxy, _extends({
+    attributes: attributes
+  }, DEFAULT_LEGEND_CONFIG, config));
+};
 
-        case GeometryType.Polygon:
-          return new Polygon(coordinates, {
-            symbol: selectedPolygon,
-            crs
-          });
+const useMapLegend = (layer, config) => {
+  const legend = useLayerLegend(layer, config);
 
-        default:
-          return null;
-      }
-    }
-  }, {
-    key: "extent",
-    value: function extent() {
-      const feature = this.sGisFeature();
-      return feature && feature.bbox;
-    }
-  }]);
+  if (!legend) {
+    return null;
+  }
 
-  return EvergisFeature;
-}();
+  const firstLegend = legend.items[0];
+  return {
+    symbol: legend.symbol,
+    item: firstLegend
+  };
+};
+
+const LEGEND_SYMBOL_MAX_SIZE = 32;
+const useLegendValueSymbol = (_ref) => {
+  let {
+    parameter,
+    parameterValue
+  } = _ref;
+  const symbol = useLegendContext();
+  const valueSymbol = // @ts-ignore
+  symbol && applyParameterValue(symbol, parameter, parameterValue);
+  let sGisSymbol = null;
 
-function evaluateCondition(condition, attributes) {
   try {
-    const evaluator = new ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition);
+    sGisSymbol = valueSymbol && deserializeSymbol(valueSymbol);
+  } catch (e) {}
 
-    if (result instanceof Error) {
-      return null;
-    }
+  return sGisSymbol && adjustSymbol(sGisSymbol, {
+    size: LEGEND_SYMBOL_MAX_SIZE - 1
+  });
+};
 
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
+const DEFAULT_SYMBOL_SIZE = 16;
+function useSymbol(_ref, canvasRef) {
+  let {
+    symbol,
+    size = DEFAULT_SYMBOL_SIZE,
+    render = getSymbolRenders,
+    maxWidth
+  } = _ref;
+  useEffect(() => {
+    if (canvasRef.current !== null && symbol !== undefined) {
+      const canvas = canvasRef.current;
+      setCanvasSize(canvas, size, maxWidth);
+      render(symbol, size).then(renders => {
+        renderSymbolToCanvas(renders, canvas);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
-    let {
-      name
-    } = _ref;
-    return name === attributeName;
-  });
-  return attributeMeta ? attributeMeta.value : null;
+  }, [symbol, size, maxWidth]);
 }
 
-const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
-const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
+function setCanvasSize(canvas, size, maxWidth) {
+  canvas.node.height = size;
+  canvas.node.width = maxWidth ? Math.min(size, maxWidth) : size;
+}
 
-function findFeatureValue(parameterValues, _ref2) {
-  let [name, value] = _ref2;
-  return value !== null ? parameterValues.find(_ref3 => {
-    let {
-      condition
-    } = _ref3;
-    return value !== undefined && evaluateCondition(condition, {
-      [name]: value
-    });
-  }) : null;
+function useCanvas() {
+  const canvas = useRef(null);
+  const ref = useCallback(node => {
+    if (node !== null) {
+      canvas.current = new Canvas(node);
+    } else {
+      canvas.current = null;
+    }
+  }, []);
+  return {
+    canvas,
+    ref
+  };
 }
 
-function extractValuesAttribute(parameterValues, attributes) {
-  const name = getAttributeNameFromClassified(parameterValues) || '';
-  const value = name && getAttributeValue(attributes, name);
-  return [name, value];
+function useMount(_ref) {
+  let {
+    onMount,
+    onUnmount
+  } = _ref;
+  useEffect(() => {
+    onMount && onMount();
+    return onUnmount; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 }
 
-function evaluateFeatureSymbol(attributes) {
-  // @ts-ignore
-  function calc(result, _ref4) {
-    let [parameterName, parameterValue] = _ref4;
-    let newParameterValue;
-
-    if (isParameterByAttribute(parameterValue)) {
-      const [attributeName, attributeValue] = extractValuesAttribute(parameterValue.values, attributes);
-      const featureValue = findFeatureValue(parameterValue.values, [attributeName, attributeValue]);
-      newParameterValue = featureValue ? featureValue.value : parameterValue.defaultValue;
-    } else if (isObject(parameterValue)) {
-      // @ts-ignore
-      newParameterValue = Object.entries(parameterValue).reduce(calc, parameterValue);
-    }
+function useProperty(_ref, deps) {
+  let {
+    factory,
+    destructor,
+    update
+  } = _ref;
 
-    return newParameterValue !== undefined ? _extends({}, result, {
-      [parameterName]: newParameterValue
-    }) : result;
+  if (deps === void 0) {
+    deps = [];
   }
 
-  return calc;
-}
-
-function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
-    let {
-      condition
-    } = _ref5;
-    const attributeName = condition && getAttributeNameFromCondition(condition);
-    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
-
-    if (condition && attributeName && attributeValue !== undefined) {
-      return evaluateCondition(condition, {
-        [attributeName]: attributeValue
-      });
+  const propRef = useRef();
+  useMount({
+    onUnmount() {
+      if (propRef.current && destructor) {
+        destructor(propRef.current);
+      }
     }
 
-    return false;
-  }) || null;
-}
-function findChildFeatureSymbol(childStyles, attributes) {
-  const featureStyle = findChildFeatureStyle(childStyles, attributes);
-  return featureStyle ? featureStyle.symbol : null;
-}
-function getFeatureSymbol(style, attributes) {
-  if (!style || !style.symbol) {
-    return null;
-  }
-
-  if (style.children !== null) {
-    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
-  }
-
-  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
-}
-
-let EvergisLayer = /*#__PURE__*/function () {
-  function EvergisLayer(service) {
-    _classCallCheck(this, EvergisLayer);
-
-    this.name = null;
-    this.titleAttribute = null;
-    this.alias = null;
-    this.attributes = null;
-    this.style = null;
-    const evergisService = service;
-    const {
-      name,
-      alias,
-      style,
-      layerDefinition
-    } = evergisService;
-    this.name = name;
-    this.alias = alias || name;
-    this.attributes = getLayerAttributes(layerDefinition);
-    this.style = style && new EvergisStyle(style) || null;
-    this.titleAttribute = layerDefinition && layerDefinition.titleAttribute || null;
-  }
-
-  _createClass(EvergisLayer, [{
-    key: "evaluateFeature",
-    value: function evaluateFeature(feature) {
-      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 => {
-        let {
-          name
-        } = _ref;
-        return name === this.titleAttribute;
-      });
-      const displayName = titleAttribute && formatAttributeValue(titleAttribute)[0].value || feature.id;
-      feature.displayName = displayName ? "" + displayName : feature.id;
-      return feature;
+  });
+  return useMemo(() => {
+    if (propRef.current) {
+      if (update) {
+        const newProp = update(propRef.current, deps, {
+          factory,
+          destructor
+        });
+        if (newProp) propRef.current = newProp;
+      } else if (destructor) {
+        destructor(propRef.current);
+      }
+    } else {
+      if (!update || !propRef.current) {
+        propRef.current = factory(deps);
+      }
     }
-  }]);
-
-  return EvergisLayer;
-}();
-
-const findFeatureLayer = feature => layer => layer.name === feature.layerName;
 
-const evaluateFeature = layers => feature => {
-  const featureLayer = layers.find(findFeatureLayer(feature));
-  return featureLayer ? featureLayer.evaluateFeature(feature) : feature;
-};
+    return propRef.current; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
 
-const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
+function useUpdate(_ref) {
   let {
-    attributes,
-    renderTitle,
-    skipDefaultValue,
-    reverse
+    onUpdate,
+    shouldUpdate,
+    deps
   } = _ref;
-  return classification => {
-    const {
-      defaultTitle,
-      defaultValue,
-      values,
-      attribute: attributeName,
-      parameter
-    } = classification;
-    const attribute = attributeName && attributes ? getClassificationAttribute(attributeName, attributes) : undefined;
-    const defaultLegendValue = {
-      title: defaultTitle || OTHERS_TITLE,
-      parameterValue: defaultValue
-    };
-    const legendValues = values.map((value, index) => ({
-      title: renderTitle && renderTitle(_extends({}, value, {
-        attribute
-      }), index),
-      parameterValue: value.parameterValue
-    }));
-    const withDefault = skipDefaultValue ? legendValues : [...legendValues, defaultLegendValue];
-    const reversedValues = reverse ? [...withDefault].reverse() : withDefault;
-    return {
-      title: attribute && attribute.alias || attributeName,
-      attribute,
-      parameter,
-      values: reversedValues
-    };
-  };
-};
-
-function createStyleLegend(style, config) {
-  const {
-    classificationManager,
-    symbol
-  } = style;
-  const items = classificationManager.filter(_ref => {
-    let {
-      parameter
-    } = _ref;
-    return config.parameters && parameter ? config.parameters.includes(parameter) : true;
-  });
-
-  if (items.length === 0) {
-    return null;
-  }
+  useEffect(() => {
+    if (!shouldUpdate || shouldUpdate()) {
+      onUpdate();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  return {
-    symbol: unClassify(symbol),
-    items: items.map(createLegendItem(config))
-  };
+  }, deps);
 }
 
-function createValueTitle(value, index) {
-  if (value.title) return value.title;
-  if (isRangeClass(value)) return printRangeClass(value, index);
-  if (isUniqueClass(value)) return value.uniqueValue;
-  return '';
+function useLayerOrder(layer, zIndex) {
+  const {
+    map
+  } = useMapContext();
+  useUpdate({
+    onUpdate: () => map.insertLayer(layer, zIndex),
+    deps: [zIndex, layer]
+  });
 }
 
-function formatArea(num) {
-  let result = num;
-  let measure = 'м²';
-
-  if (num >= 10000000) {
-    result = num / 1000000;
-    measure = 'км²';
-  } else if (num >= 10000) {
-    result = num / 10000;
-    measure = 'га';
+function useLayerVisibility(layer, isDisplayed) {
+  if (isDisplayed === void 0) {
+    isDisplayed = true;
   }
 
-  return numberWithSpaces(result) + " " + measure;
+  useUpdate({
+    shouldUpdate: () => layer.isDisplayed !== isDisplayed,
+    onUpdate: () => layer.isDisplayed = isDisplayed,
+    deps: [isDisplayed, layer]
+  });
 }
-function formatLength(num) {
-  let result = num;
-  let measure = 'м';
 
-  if (num > 10000) {
-    result = num / 1000;
-    measure = 'км';
-  }
-
-  return numberWithSpaces(result) + " " + measure;
-}
-function formatPolygonMeasure(area, perimiter) {
-  return "S : " + formatArea(area) + "  P : " + formatLength(perimiter);
-}
-function isPolylineLikePolygon(rings, resolution) {
-  if (rings[0].length <= 3) {
-    return false;
+function useLayerOpacity(layer, opacity) {
+  if (opacity === void 0) {
+    opacity = 1;
   }
 
-  const coords = rings[0];
-  const firstPoint = coords[0];
-  const lastPoint = coords[coords.length - 1];
-  const distance = resolution * 2;
-  return softEquals(firstPoint[0], lastPoint[0], distance) && softEquals(firstPoint[1], lastPoint[1], distance);
-}
-
-function getScale(scale) {
-  const scales = [1, 2, 5];
-
-  for (let x = 0; x < 21; x++) {
-    for (let y = 0; y < scales.length; y++) {
-      const result = Math.pow(10, x) * scales[y];
-
-      if (result > scale) {
-        return result;
-      }
-    }
-  }
-
-  return 1;
-}
-
-const useLegend = (style, config) => useMemo(() => {
-  if (!style || !(config && config.attributes)) return null;
-  return createStyleLegend(style, config);
-}, [style, config]);
-
-const DEFAULT_LEGEND_CONFIG = {
-  renderTitle: createValueTitle
-};
-const useLayerLegend = (layer, config) => {
-  const {
-    style,
-    layerDefinition
-  } = layer || {};
-  const {
-    attributes
-  } = layerDefinition || {};
-  const styleProxy = style && new EvergisStyle(style);
-  return useLegend(styleProxy, _extends({
-    attributes: attributes
-  }, DEFAULT_LEGEND_CONFIG, config));
-};
-
-const useMapLegend = (layer, config) => {
-  const legend = useLayerLegend(layer, config);
-
-  if (!legend) {
-    return null;
-  }
-
-  const firstLegend = legend.items[0];
-  return {
-    symbol: legend.symbol,
-    item: firstLegend
-  };
-};
-
-const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
-  let {
-    parameter,
-    parameterValue
-  } = _ref;
-  const symbol = useLegendContext();
-  const valueSymbol = // @ts-ignore
-  symbol && applyParameterValue(symbol, parameter, parameterValue);
-  let sGisSymbol = null;
-
-  try {
-    sGisSymbol = valueSymbol && deserializeSymbol(valueSymbol);
-  } catch (e) {}
-
-  return sGisSymbol && adjustSymbol(sGisSymbol, {
-    size: LEGEND_SYMBOL_MAX_SIZE - 1
-  });
-};
-
-const DEFAULT_SYMBOL_SIZE = 16;
-function useSymbol(_ref, canvasRef) {
-  let {
-    symbol,
-    size = DEFAULT_SYMBOL_SIZE,
-    render = getSymbolRenders,
-    maxWidth
-  } = _ref;
-  useEffect(() => {
-    if (canvasRef.current !== null && symbol !== undefined) {
-      const canvas = canvasRef.current;
-      setCanvasSize(canvas, size, maxWidth);
-      render(symbol, size).then(renders => {
-        renderSymbolToCanvas(renders, canvas);
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [symbol, size, maxWidth]);
-}
-
-function setCanvasSize(canvas, size, maxWidth) {
-  canvas.node.height = size;
-  canvas.node.width = maxWidth ? Math.min(size, maxWidth) : size;
-}
-
-function useCanvas() {
-  const canvas = useRef(null);
-  const ref = useCallback(node => {
-    if (node !== null) {
-      canvas.current = new Canvas(node);
-    } else {
-      canvas.current = null;
-    }
-  }, []);
-  return {
-    canvas,
-    ref
-  };
-}
-
-function useMount(_ref) {
-  let {
-    onMount,
-    onUnmount
-  } = _ref;
-  useEffect(() => {
-    onMount && onMount();
-    return onUnmount; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}
-
-function useProperty(_ref, deps) {
-  let {
-    factory,
-    destructor,
-    update
-  } = _ref;
-
-  if (deps === void 0) {
-    deps = [];
-  }
-
-  const propRef = useRef();
-  useMount({
-    onUnmount() {
-      if (propRef.current && destructor) {
-        destructor(propRef.current);
-      }
-    }
-
-  });
-  return useMemo(() => {
-    if (propRef.current) {
-      if (update) {
-        const newProp = update(propRef.current, deps, {
-          factory,
-          destructor
-        });
-        if (newProp) propRef.current = newProp;
-      } else if (destructor) {
-        destructor(propRef.current);
-      }
-    } else {
-      if (!update || !propRef.current) {
-        propRef.current = factory(deps);
-      }
-    }
-
-    return propRef.current; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-}
-
-function useUpdate(_ref) {
-  let {
-    onUpdate,
-    shouldUpdate,
-    deps
-  } = _ref;
-  useEffect(() => {
-    if (!shouldUpdate || shouldUpdate()) {
-      onUpdate();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, deps);
-}
-
-function useLayerOrder(layer, zIndex) {
-  const {
-    map
-  } = useMapContext();
-  useUpdate({
-    onUpdate: () => map.insertLayer(layer, zIndex),
-    deps: [zIndex, layer]
-  });
-}
-
-function useLayerVisibility(layer, isDisplayed) {
-  if (isDisplayed === void 0) {
-    isDisplayed = true;
-  }
-
-  useUpdate({
-    shouldUpdate: () => layer.isDisplayed !== isDisplayed,
-    onUpdate: () => layer.isDisplayed = isDisplayed,
-    deps: [isDisplayed, layer]
-  });
-}
-
-function useLayerOpacity(layer, opacity) {
-  if (opacity === void 0) {
-    opacity = 1;
-  }
-
-  useUpdate({
-    shouldUpdate: () => layer.opacity !== opacity,
-    onUpdate: () => layer.opacity = opacity,
-    deps: [opacity, layer]
-  });
+  useUpdate({
+    shouldUpdate: () => layer.opacity !== opacity,
+    onUpdate: () => layer.opacity = opacity,
+    deps: [opacity, layer]
+  });
 }
 
 function useEvergisDynamicLayer(_ref) {
@@ -3749,7 +3404,7 @@ function useMapWrapper() {
   return wrapperRef;
 }
 
-const byScale = scale => _ref => {
+const byScale = scale => (_ref) => {
   let {
     zIndex
   } = _ref;
@@ -3948,7 +3603,7 @@ const useTooltip = function useTooltip(zIndex) {
 
     return reset;
   }, [reset, map, layer, zIndex]);
-  const onSetLabelFeature = useCallback(_ref => {
+  const onSetLabelFeature = useCallback((_ref) => {
     let {
       point,
       position,
@@ -4112,7 +3767,7 @@ function useClusterLayer(_ref) {
 }
 
 const INIT_FEATURES = [];
-const useEvergisSelect = _ref => {
+const useEvergisSelect = (_ref) => {
   let {
     onPick,
     onFeatures
@@ -4145,7 +3800,7 @@ function none() {
   return;
 }
 
-const useDraggableMarker = _ref => {
+const useDraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -4261,7 +3916,7 @@ const useDebouncedCallback = interval => {
   }, interval), [interval]);
 };
 
-const Symbol = _ref => {
+const Symbol = (_ref) => {
   let {
     symbol,
     size,
@@ -4282,7 +3937,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
@@ -4291,7 +3946,7 @@ const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = _ref => {
+const StyleSymbol = (_ref) => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4336,7 +3991,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;
@@ -4347,7 +4002,7 @@ const MailValue = _ref => {
   }, mail);
 };
 
-const PhoneValue = _ref => {
+const PhoneValue = (_ref) => {
   let {
     phone
   } = _ref;
@@ -4358,7 +4013,7 @@ const PhoneValue = _ref => {
   }, phone);
 };
 
-const UrlValue = _ref => {
+const UrlValue = (_ref) => {
   let {
     url
   } = _ref;
@@ -4369,7 +4024,7 @@ const UrlValue = _ref => {
   }, url);
 };
 
-const AttributeValue = _ref => {
+const AttributeValue = (_ref) => {
   let {
     attribute
   } = _ref;
@@ -4383,29 +4038,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
@@ -4421,7 +4076,7 @@ function punycodeDecode(domains) {
   }
 }
 
-const EvergisCardAttribute = _ref => {
+const EvergisCardAttribute = (_ref) => {
   let {
     attribute,
     className
@@ -4433,7 +4088,7 @@ const EvergisCardAttribute = _ref => {
   }));
 };
 
-const StyledCard = _ref => {
+const StyledCard = (_ref) => {
   let {
     features = [],
     className,
@@ -4484,7 +4139,7 @@ const StyledCard = _ref => {
 };
 
 const _excluded$1 = ["renderCard", "className", "children"];
-const EvergisCard = _ref => {
+const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
@@ -4536,7 +4191,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,
@@ -4581,7 +4236,7 @@ const TileLayer = props => {
 };
 
 const defaultZIndex = 200;
-const EvergisSelect = _ref => {
+const EvergisSelect = (_ref) => {
   let {
     onPick,
     className,
@@ -4616,7 +4271,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,
@@ -4633,7 +4288,7 @@ SearchPrefix.defaultProps = {
   kind: "search"
 };
 
-const SearchInput = _ref => {
+const SearchInput = (_ref) => {
   let {
     onChange
   } = _ref;
@@ -4642,7 +4297,7 @@ const SearchInput = _ref => {
   }));
 };
 
-const LegendSymbol = _ref => {
+const LegendSymbol = (_ref) => {
   let {
     parameter,
     parameterValue,
@@ -4660,7 +4315,7 @@ const LegendSymbol = _ref => {
   return React.createElement(React.Fragment, null, children(symbol));
 };
 
-const LegendValue = _ref => {
+const LegendValue = (_ref) => {
   let {
     value,
     parameter,
@@ -4682,7 +4337,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
@@ -4707,7 +4362,7 @@ const getSymbolSize = _ref => {
   }
 };
 
-const Legend = _ref => {
+const Legend = (_ref) => {
   let {
     layer,
     children,
@@ -4750,7 +4405,7 @@ const Legend = _ref => {
   })))));
 };
 
-const Map = _ref => {
+const Map = (_ref) => {
   let {
     className,
     position,
@@ -4772,163 +4427,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);
@@ -5118,7 +5098,7 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 const _excluded$3 = ["isActive"];
-const Measurer = _ref => {
+const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
@@ -5136,18 +5116,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;
@@ -5172,7 +5152,7 @@ const ScaleRuler = () => {
   }, currentScale >= 1000 ? currentScale / 1000 + "km" : currentScale + "m")));
 };
 
-const Zoom = _ref => {
+const Zoom = (_ref) => {
   let {
     children
   } = _ref;
@@ -5221,7 +5201,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',
@@ -5229,7 +5209,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;
@@ -5243,7 +5223,7 @@ const {
   Consumer
 } = /*#__PURE__*/createContext([]); // TODO I just cant read that
 
-const Tooltip = _ref => {
+const Tooltip = (_ref) => {
   let {
     features = [],
     map,
@@ -5282,7 +5262,7 @@ const Noop = () => React.createElement("div", {
   }
 });
 
-const DraggableMarker = _ref => {
+const DraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -5296,5 +5276,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, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useProperty, useScale, useSymbol, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
 //# sourceMappingURL=react.esm.js.map