@evergis/react 3.0.18 → 3.0.20

package/dist/react.cjs.development.js

@@ -27,6 +27,8 @@ var PolylineSymbol = require('@evergis/sgis/es/symbols/PolylineSymbol');
 var Poly = require('@evergis/sgis/es/renders/Poly');
 var geotools = require('@evergis/sgis/es/geotools');
 var math = require('@evergis/sgis/es/utils/math');
+var Canvas = require('@evergis/sgis/es/painters/DomPainter/Canvas');
+var Crs = require('@evergis/sgis/es/Crs');
 var Poly$1 = require('@evergis/sgis/es/features/Poly');
 var Point = require('@evergis/sgis/es/symbols/point/Point');
 var PointFeature = require('@evergis/sgis/es/features/PointFeature');
@@ -36,7 +38,6 @@ var Render = require('@evergis/sgis/es/renders/Render');
 var SvgRender = require('@evergis/sgis/es/painters/DomPainter/SvgRender');
 var domEvent = require('@evergis/sgis/es/utils/domEvent');
 var EventHandler = require('@evergis/sgis/es/EventHandler');
-var Crs = require('@evergis/sgis/es/Crs');
 var StaticImageSymbol = require('@evergis/sgis/es/symbols/point/StaticImageSymbol');
 var Square = require('@evergis/sgis/es/symbols/point/Square');
 var MaskedImage = require('@evergis/sgis/es/symbols/point/MaskedImage');
@@ -46,7 +47,6 @@ var Polygon = require('@evergis/sgis/es/features/Polygon');
 var Polyline = require('@evergis/sgis/es/features/Polyline');
 var H3Feature = require('@evergis/sgis/es/features/H3Feature');
 var CombinedPolyline = require('@evergis/sgis/es/features/CombinedPolyline');
-var Canvas = require('@evergis/sgis/es/painters/DomPainter/Canvas');
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -67,6 +67,9 @@ 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;
 }
 
@@ -100,6 +103,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -158,6 +164,8 @@ 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);
@@ -191,7 +199,7 @@ function _superPropBase(object, property) {
   return object;
 }
 
-function _get(target, property, receiver) {
+function _get() {
   if (typeof Reflect !== "undefined" && Reflect.get) {
     _get = Reflect.get;
   } else {
@@ -202,14 +210,14 @@ function _get(target, property, receiver) {
       var desc = Object.getOwnPropertyDescriptor(base, property);
 
       if (desc.get) {
-        return desc.get.call(receiver);
+        return desc.get.call(arguments.length < 3 ? target : receiver);
       }
 
       return desc.value;
     };
   }
 
-  return _get(target, property, receiver || target);
+  return _get.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -233,7 +241,7 @@ const isParameterType = (types, parameter) => {
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38;
 const MapLegendDescription = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const ItemText = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), (_ref) => {
+const ItemText = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
     theme: {
       fonts
@@ -243,28 +251,28 @@ const ItemText = /*#__PURE__*/styled__default.div(_templateObject2 || (_template
 });
 const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: '-';\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
 const SymbolContainer = /*#__PURE__*/styled__default('span')(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 1.5rem;\n  margin-right: 0.5rem;\n"])));
-const ClassifiedItem = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: ", ";\n  pointer-events: ", ";\n\n  :not(:last-of-type) {\n    margin-bottom: 0.25rem;\n  }\n\n  ", ", ", " {\n    transition: opacity 150ms;\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }\n\n  ", " {\n    margin-left: 0.5rem;\n  }\n"])), (_ref2) => {
+const ClassifiedItem = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: ", ";\n  pointer-events: ", ";\n\n  :not(:last-of-type) {\n    margin-bottom: 0.25rem;\n  }\n\n  ", ", ", " {\n    transition: opacity 150ms;\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }\n\n  ", " {\n    margin-left: 0.5rem;\n  }\n"])), _ref2 => {
   let {
     isClusterFillColor
   } = _ref2;
   return isClusterFillColor ? 'default' : 'pointer';
-}, (_ref3) => {
+}, _ref3 => {
   let {
     isClusterFillColor
   } = _ref3;
   return isClusterFillColor ? 'none' : 'auto';
-}, ItemText, SymbolContainer, ItemText, (_ref4) => {
+}, ItemText, SymbolContainer, ItemText, _ref4 => {
   let {
     isHidden
   } = _ref4;
   return isHidden ? 0.28 : 0.65;
-}, SymbolContainer, (_ref5) => {
+}, SymbolContainer, _ref5 => {
   let {
     isHidden
   } = _ref5;
   return isHidden ? 0.28 : 1;
 }, ItemText, SymbolContainer, icons.IconButton);
-const SymbolButtonWithClick = /*#__PURE__*/styled.css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 3.875rem;\n  height: 3.875rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (_ref6) => {
+const SymbolButtonWithClick = /*#__PURE__*/styled.css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 3.875rem;\n  height: 3.875rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), _ref6 => {
   let {
     theme: {
       palette
@@ -272,7 +280,7 @@ const SymbolButtonWithClick = /*#__PURE__*/styled.css(_templateObject6 || (_temp
   } = _ref6;
   return palette.elementDeep;
 });
-const SymbolButton = /*#__PURE__*/styled__default.span(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 150ms;\n  ", ";\n\n  svg {\n    max-width: 4rem;\n    max-height: 4rem;\n  }\n"])), (_ref7) => {
+const SymbolButton = /*#__PURE__*/styled__default.span(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 150ms;\n  ", ";\n\n  svg {\n    max-width: 4rem;\n    max-height: 4rem;\n  }\n"])), _ref7 => {
   let {
     onClick
   } = _ref7;
@@ -281,21 +289,21 @@ const SymbolButton = /*#__PURE__*/styled__default.span(_templateObject7 || (_tem
 const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
 const MapLegendHeader = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: bold;\n"])));
 const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendBadge = /*#__PURE__*/styled__default.span(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-width: 0.5rem;\n  height: 0.75rem;\n  display: inline-block;\n  margin-left: 0.25rem;\n  padding: 0.125rem 0.25rem;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n"])), (_ref8) => {
+const MapLegendBadge = /*#__PURE__*/styled__default.span(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-width: 0.5rem;\n  height: 0.75rem;\n  display: inline-block;\n  margin-left: 0.25rem;\n  padding: 0.125rem 0.25rem;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n"])), _ref8 => {
   let {
     theme: {
       borderRadius
     }
   } = _ref8;
   return borderRadius.xSmall;
-}, (_ref9) => {
+}, _ref9 => {
   let {
     theme: {
       palette
     }
   } = _ref9;
   return palette.element;
-}, (_ref10) => {
+}, _ref10 => {
   let {
     theme: {
       palette
@@ -303,17 +311,17 @@ const MapLegendBadge = /*#__PURE__*/styled__default.span(_templateObject11 || (_
   } = _ref10;
   return palette.textPrimary;
 });
-const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: 0;\n  opacity: ", ";\n  visibility: ", ";\n  overflow: hidden;\n  transition: opacity 0.5s, visibility 0.5s;\n"])), (_ref11) => {
+const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: 0;\n  opacity: ", ";\n  visibility: ", ";\n  overflow: hidden;\n  transition: opacity 0.5s, visibility 0.5s;\n"])), _ref11 => {
   let {
     isShown
   } = _ref11;
   return isShown ? 'relative' : 'absolute';
-}, (_ref12) => {
+}, _ref12 => {
   let {
     isShown
   } = _ref12;
   return isShown ? 1 : 0;
-}, (_ref13) => {
+}, _ref13 => {
   let {
     isShown
   } = _ref13;
@@ -321,7 +329,7 @@ const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObjec
 });
 const MinimizedLegendContainer = /*#__PURE__*/styled__default(MaximizedLegendContainer)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
 const LegendHeaderButton = /*#__PURE__*/styled__default.span(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n\n  ", " {\n    padding-left: 0.75rem;\n    visibility: hidden;\n\n    :first-child {\n      padding-left: 1rem;\n    }\n\n    :last-child {\n      margin-left: 0.75rem;\n      border-left: 1px ", " solid;\n    }\n  }\n  \n  :hover {\n    ", " {\n      visibility: visible;\n    }\n  }\n"])), LegendHeaderButton, (_ref14) => {
+const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n\n  ", " {\n    padding-left: 0.75rem;\n    visibility: hidden;\n\n    :first-child {\n      padding-left: 1rem;\n    }\n\n    :last-child {\n      margin-left: 0.75rem;\n      border-left: 1px ", " solid;\n    }\n  }\n  \n  :hover {\n    ", " {\n      visibility: visible;\n    }\n  }\n"])), LegendHeaderButton, _ref14 => {
   let {
     theme: {
       palette
@@ -329,14 +337,14 @@ const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObje
   } = _ref14;
   return palette.elementDeep;
 }, LegendHeaderButton);
-const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: ", ";\n  transition: height 0.5s;\n"])), (_ref15) => {
+const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: ", ";\n  transition: height 0.5s;\n"])), _ref15 => {
   let {
     minHeight,
     maxHeight,
     isExpanded
   } = _ref15;
   return isExpanded ? (maxHeight || 0) + 4 : minHeight;
-}, (_ref16) => {
+}, _ref16 => {
   let {
     isExpanded
   } = _ref16;
@@ -361,28 +369,28 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
 };
 
 const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), (_ref17) => {
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref17 => {
   let {
     parameter
   } = _ref17;
   return isParameterType(['strokeColor', 'stroke.color'], parameter) ? 0.25 : 1;
-}, (_ref18) => {
+}, _ref18 => {
   let {
     value
   } = _ref18;
   return typeof value === 'number' ? 'none' : value;
-}, (_ref19) => {
+}, _ref19 => {
   let {
     isHidden
   } = _ref19;
   return isHidden ? 0.28 : 1;
-}, (_ref20) => {
+}, _ref20 => {
   let {
     value,
     parameter
   } = _ref20;
   return isParameterType('size', parameter) && SizeLegendItemMixin(value);
-}, (_ref21) => {
+}, _ref21 => {
   let {
     value,
     parameter
@@ -398,28 +406,28 @@ const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObjec
 const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
 const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n\n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), (_ref22) => {
+const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n\n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref22 => {
   let {
     isSize
   } = _ref22;
   return isSize && SingleSizeLegendItemsMixin;
-}, MapLegendItem, (_ref23) => {
+}, MapLegendItem, _ref23 => {
   let {
     parameter
   } = _ref23;
   return isParameterType(['strokeColor', 'stroke.color'], parameter) && StrokeColorLegendItemMixin;
 });
-const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), (_ref24) => {
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref24 => {
   let {
     isSize
   } = _ref24;
   return isSize && SizeLegendItemsMixin;
-}, (_ref25) => {
+}, _ref25 => {
   let {
     isStrokeWidth
   } = _ref25;
   return isStrokeWidth && StrokeWidthLegendItemsMixin;
-}, (_ref26) => {
+}, _ref26 => {
   let {
     isSingle
   } = _ref26;
@@ -593,7 +601,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every((_ref) => {
+  if (attributeValues.every(_ref => {
     let {
       type
     } = _ref;
@@ -601,7 +609,7 @@ const formatStringAttribute = value => {
   }
   /* String */
   )) {
-    return [stringAttribute(attributeValues.map((_ref2) => {
+    return [stringAttribute(attributeValues.map(_ref2 => {
       let {
         value
       } = _ref2;
@@ -1202,7 +1210,7 @@ function evaluateCondition(condition$1, attributes) {
 }
 
 function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find((_ref) => {
+  const attributeMeta = attributes.find(_ref => {
     let {
       name
     } = _ref;
@@ -1216,7 +1224,7 @@ const getAttributeNameFromClassified = values => values.length > 0 ? getAttribut
 
 function findFeatureValue(parameterValues, _ref2) {
   let [name, value] = _ref2;
-  return value !== null ? parameterValues.find((_ref3) => {
+  return value !== null ? parameterValues.find(_ref3 => {
     let {
       condition
     } = _ref3;
@@ -1256,7 +1264,7 @@ function evaluateFeatureSymbol(attributes) {
 }
 
 function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find((_ref5) => {
+  return (childStyles || []).find(_ref5 => {
     let {
       condition
     } = _ref5;
@@ -1436,7 +1444,7 @@ const createSvgGradient = (svg, values) => svg.gradient('linear', add => {
   });
 }).from(0, 0).to(1, 1); // eslint-disable-next-line max-lines-per-function
 
-const manipulateSvgSymbol = (_ref2) => {
+const manipulateSvgSymbol = _ref2 => {
   var _$exec2;
 
   let {
@@ -1848,7 +1856,7 @@ const checkLayerHasLegend = layerInfo => {
     return (paramValue == null ? void 0 : paramValue.type) === 'byAttribute';
   })) || false;
 };
-const getTitleFromCondition = (_ref2) => {
+const getTitleFromCondition = _ref2 => {
   let {
     condition,
     attribute,
@@ -2620,7 +2628,7 @@ let SGisPolygonSymbol = /*#__PURE__*/function (_sPolygonSymbol) {
 const adaptMiterRings = (rings, resolution, fromCrs, toCrs) => {
   const projected = geotools.projectRings(rings, fromCrs, toCrs);
   return math.simplifyCoordinates(projected.map(ring => // @ts-ignore
-  ring.map((_ref) => {
+  ring.map(_ref => {
     let [x, y] = _ref;
     return [x / resolution, y / -resolution];
   })), 1);
@@ -2712,6 +2720,111 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   return ArrowLineMiterRender;
 }(LineMiterRender);
 
+const LegendContext = /*#__PURE__*/React.createContext(null);
+const LegendProvider = _ref => {
+  let {
+    symbol,
+    children
+  } = _ref;
+  return React__default.createElement(LegendContext.Provider, {
+    value: symbol || null
+  }, children);
+};
+const useLegendContext = () => React.useContext(LegendContext);
+
+function useCanvas() {
+  const canvas = React.useRef(null);
+  const ref = React.useCallback(node => {
+    if (node !== null) {
+      canvas.current = new Canvas.Canvas(node);
+    } else {
+      canvas.current = null;
+    }
+  }, []);
+  return {
+    canvas,
+    ref
+  };
+}
+
+function useMount(_ref) {
+  let {
+    onMount,
+    onUnmount
+  } = _ref;
+  React.useEffect(() => {
+    onMount && onMount();
+    return onUnmount; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+function useNode() {
+  const [node, onSetNode] = React.useState(null);
+  const ref = React.useCallback(onSetNode, [onSetNode]);
+  return [ref, node];
+}
+
+const DEFAULT_SYMBOL_SIZE$1 = 26;
+function useSymbol(_ref, canvasRef) {
+  let {
+    symbol,
+    size = DEFAULT_SYMBOL_SIZE$1,
+    render = getSymbolRenders,
+    maxWidth
+  } = _ref;
+  React.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;
+}
+
+const useToggle = initial => {
+  const [state, setState] = React.useState(initial !== undefined ? initial : false);
+  const toggle = React.useCallback(() => setState(!state), [state]);
+  return [state, toggle, setState];
+};
+
+const metersToPixels = (meters, _ref) => {
+  let {
+    painter,
+    crs = Crs.geo
+  } = _ref;
+  const {
+    width
+  } = painter;
+  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
+  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
+  const widthDistance = geotools.distance(zeroPoint, maxWidthPoint);
+  const pxK = width / (widthDistance || 1);
+  return Math.round(meters * pxK);
+};
+
+const polygonCircleFromPoint = (center, diameter) => {
+  const coordinates = [];
+  const radius = diameter / 2;
+  const endAngle = Math.PI * 2;
+  const step = Math.max(Math.PI / 2 / radius, endAngle / 128);
+  let start = 0;
+  let end = endAngle;
+
+  for (let ang = start; ang < end; ang += step) {
+    coordinates.push([Math.cos(ang) * radius + center[0], Math.sin(ang) * radius + center[1]]);
+  }
+
+  return [coordinates];
+};
+
 let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   _inherits(CircleLineMiterRender, _LineMiterRender);
 
@@ -3301,21 +3414,6 @@ const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
   selectedStrokeColor: '#ff5722'
 });
 
-const metersToPixels = (meters, _ref) => {
-  let {
-    painter,
-    crs = Crs.geo
-  } = _ref;
-  const {
-    width
-  } = painter;
-  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
-  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
-  const widthDistance = geotools.distance(zeroPoint, maxWidthPoint);
-  const pxK = width / (widthDistance || 1);
-  return Math.round(meters * pxK);
-};
-
 const defaultPathStyles = {
   strokeWidth: 2,
   strokeColor: 'rgb(0, 163, 245)',
@@ -3816,7 +3914,7 @@ const useSvgSymbol = (symbol, skipOffset, isClassified) => {
     SVGContainer.addTo(SVGWrapperRefElement.current);
   }, [SVGContainer]);
   const getSvgData = React.useCallback(() => SVGContainer.svg(), [SVGContainer]);
-  const manipulateSvg = React.useCallback((_ref) => {
+  const manipulateSvg = React.useCallback(_ref => {
     let {
       svg,
       bg,
@@ -3886,38 +3984,38 @@ const useSvgSymbol = (symbol, skipOffset, isClassified) => {
 
 var _templateObject$1, _templateObject2$1;
 const SvgSymbolContainer = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  line-height: 0;\n"])), (_ref) => {
+const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  line-height: 0;\n"])), _ref => {
   let {
     fontSettings
   } = _ref;
   return !!(fontSettings != null && fontSettings.fontFamily) && "font-family: " + fontSettings.fontFamily;
-}, (_ref2) => {
+}, _ref2 => {
   let {
     fontSettings
   } = _ref2;
   return !!(fontSettings != null && fontSettings.fontWeight) && "font-weight: " + fontSettings.fontWeight;
-}, (_ref3) => {
+}, _ref3 => {
   let {
     fontSettings
   } = _ref3;
   return !!(fontSettings != null && fontSettings.fontStyle) && "font-style: " + fontSettings.fontStyle;
-}, (_ref4) => {
+}, _ref4 => {
   let {
     fontSettings
   } = _ref4;
   return !!(fontSettings != null && fontSettings.fontColor) && "color: " + fontSettings.fontColor;
-}, (_ref5) => {
+}, _ref5 => {
   let {
     fontSettings
   } = _ref5;
   return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === 'string' ? fontSettings.fontSize : fontSettings.fontSize + "px");
-}, (_ref6) => {
+}, _ref6 => {
   let {
     fontSettings
   } = _ref6;
   return !!(fontSettings != null && fontSettings.haloColor) && !!(fontSettings != null && fontSettings.haloWidth) && "-webkit-text-stroke: " + fontSettings.haloWidth + "px " + fontSettings.haloColor + ";";
 });
-const SvgSymbol = /*#__PURE__*/React.memo((_ref7) => {
+const SvgSymbol = /*#__PURE__*/React.memo(_ref7 => {
   let {
     svg,
     bg,
@@ -3968,7 +4066,7 @@ const SvgSymbol = /*#__PURE__*/React.memo((_ref7) => {
   }, text)) : renderSymbol;
 });
 
-const ClusterSymbolPreview = (_ref) => {
+const ClusterSymbolPreview = _ref => {
   var _symbol$fillColor$val, _symbol$labelSymbol;
 
   let {
@@ -4005,7 +4103,7 @@ const ClusterSymbolPreview = (_ref) => {
   });
 };
 
-const SymbolByType = (_ref) => {
+const SymbolByType = _ref => {
   let {
     type,
     symbol,
@@ -4032,7 +4130,7 @@ const SymbolByType = (_ref) => {
   }
 };
 
-const LegendSymbolRenderer = /*#__PURE__*/React.memo((_ref) => {
+const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
   let {
     symbol,
     index
@@ -4054,7 +4152,7 @@ const LegendSymbolRenderer = /*#__PURE__*/React.memo((_ref) => {
   });
 });
 
-const LegendHeaderButtons = (_ref) => {
+const LegendHeaderButtons = _ref => {
   let {
     layerName,
     hasHiddenLegends,
@@ -4073,7 +4171,7 @@ const LegendHeaderButtons = (_ref) => {
 const getConditionAttribute = (attributes, condition) => {
   if (!condition) return null;
   const attributeName = getAttributeNameFromCondition(condition);
-  let attribute = attributes.find((_ref) => {
+  let attribute = attributes.find(_ref => {
     let {
       name
     } = _ref;
@@ -4106,7 +4204,7 @@ const renderColumn = (column, index) => {
   }, dateTime[0], React__default.createElement(MapLegendDescription, null, dateTime[1])), index === 0 && React__default.createElement(ItemSeparator, null));
 };
 
-const getLegendText = (_ref) => {
+const getLegendText = _ref => {
   let {
     title,
     index,
@@ -4139,7 +4237,7 @@ const getLegendText = (_ref) => {
 
 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
@@ -4147,7 +4245,7 @@ const getLayerAttributes = layerDefinition => {
   });
 };
 
-const LegendChildren = (_ref) => {
+const LegendChildren = _ref => {
   var _layerInfo$style, _layerInfo$style$chil;
 
   let {
@@ -4187,7 +4285,7 @@ const LegendChildren = (_ref) => {
   }));
 };
 
-const LegendParameterDescription = (_ref) => {
+const LegendParameterDescription = _ref => {
   let {
     parameter,
     index
@@ -4215,7 +4313,7 @@ const getValueFromLegendTitle = (title, minOrMax) => {
   return title.split(" ").find(isNumeric) || title || "";
 };
 
-const MinimizedLegend = (_ref) => {
+const MinimizedLegend = _ref => {
   var _currentValues$, _currentValues, _currentValues$2, _currentValues2;
 
   let {
@@ -4286,7 +4384,7 @@ const MinimizedLegend = (_ref) => {
   })), typeof (other == null ? void 0 : other.parameterValue) === "string" && (titleMax || titleMin) && React__default.createElement(MapLegendValues, null, React__default.createElement(MapLegendValuesRange, null, React__default.createElement("div", null, titleMax), React__default.createElement("div", null, titleMin)), React__default.createElement(MapLegendValuesOther, null, "-")));
 };
 
-const MaximizedLegend = (_ref) => {
+const MaximizedLegend = _ref => {
   let {
     innerRef,
     isShown,
@@ -4346,70 +4444,7 @@ const MaximizedLegend = (_ref) => {
   }, values.map(renderLegend));
 };
 
-function useCanvas() {
-  const canvas = React.useRef(null);
-  const ref = React.useCallback(node => {
-    if (node !== null) {
-      canvas.current = new Canvas.Canvas(node);
-    } else {
-      canvas.current = null;
-    }
-  }, []);
-  return {
-    canvas,
-    ref
-  };
-}
-
-function useMount(_ref) {
-  let {
-    onMount,
-    onUnmount
-  } = _ref;
-  React.useEffect(() => {
-    onMount && onMount();
-    return onUnmount; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}
-
-function useNode() {
-  const [node, onSetNode] = React.useState(null);
-  const ref = React.useCallback(onSetNode, [onSetNode]);
-  return [ref, node];
-}
-
-const DEFAULT_SYMBOL_SIZE$1 = 26;
-function useSymbol(_ref, canvasRef) {
-  let {
-    symbol,
-    size = DEFAULT_SYMBOL_SIZE$1,
-    render = getSymbolRenders,
-    maxWidth
-  } = _ref;
-  React.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;
-}
-
-const useToggle = initial => {
-  const [state, setState] = React.useState(initial !== undefined ? initial : false);
-  const toggle = React.useCallback(() => setState(!state), [state]);
-  return [state, toggle, setState];
-};
-
-const LegendSection = (_ref) => {
+const LegendSection = _ref => {
   var _hiddenLegends$layerN, _hiddenLegends$layerN2;
 
   let {
@@ -4474,7 +4509,7 @@ const LegendSection = (_ref) => {
 };
 
 const _excluded$1 = ["layerInfo", "formatValue", "hiddenLegends", "toggleHiddenLegend", "clearHiddenLegends", "goToClassification"];
-const Legend = /*#__PURE__*/React.memo((_ref) => {
+const Legend = /*#__PURE__*/React.memo(_ref => {
   var _layerInfo$style, _layerInfo$style$chil;
 
   let {
@@ -4555,7 +4590,7 @@ const Legend = /*#__PURE__*/React.memo((_ref) => {
   return React__default.createElement(MapLegendContainer, null, renderItems);
 });
 
-const Symbol = (_ref) => {
+const Symbol = _ref => {
   let {
     symbol,
     size,
@@ -4576,19 +4611,19 @@ const Symbol = (_ref) => {
 };
 
 var _templateObject$2, _templateObject2$2;
-const CompoundIcon = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), (_ref) => {
+const CompoundIcon = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), _ref => {
   let {
     geometryType,
     icons
   } = _ref;
   return "url(" + icons[geometryType] + ") center center / " + (geometryType === api.GeometryType.Polyline ? '2rem 1.3rem' : 'auto 1rem') + " no-repeat";
 });
-const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), (_ref2) => {
+const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), _ref2 => {
   let {
     color
   } = _ref2;
   return color;
-}, (_ref3) => {
+}, _ref3 => {
   let {
     color
   } = _ref3;
@@ -4596,7 +4631,7 @@ const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2$2 || (_t
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = (_ref) => {
+const StyleSymbol = _ref => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4635,33 +4670,6 @@ const StyleSymbol = (_ref) => {
   });
 };
 
-const LegendContext = /*#__PURE__*/React.createContext(null);
-const LegendProvider = (_ref) => {
-  let {
-    symbol,
-    children
-  } = _ref;
-  return React__default.createElement(LegendContext.Provider, {
-    value: symbol || null
-  }, children);
-};
-const useLegendContext = () => React.useContext(LegendContext);
-
-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];
-};
-
 exports.ArrowLineMiterRender = ArrowLineMiterRender;
 exports.BASE_OPERATORS = BASE_OPERATORS;
 exports.BETWEEN_OPERATORS = BETWEEN_OPERATORS;