@tabler/core 1.0.0-beta11 → 1.0.0-beta12

package/dist/libs/jsvectormap/dist/js/jsvectormap.js

@@ -251,454 +251,6 @@
     Object.assign(target.prototype, source);
   };
 
-  var Defaults = {
-    map: 'world',
-    backgroundColor: 'transparent',
-    draggable: true,
-    zoomButtons: true,
-    zoomOnScroll: true,
-    zoomOnScrollSpeed: 3,
-    zoomMax: 12,
-    zoomMin: 1,
-    zoomAnimate: true,
-    showTooltip: true,
-    zoomStep: 1.5,
-    bindTouchEvents: true,
-    // Line options
-    lineStyle: {
-      stroke: '#808080',
-      strokeWidth: 1,
-      strokeLinecap: 'round'
-    },
-    // Marker options
-    markersSelectable: false,
-    markersSelectableOne: false,
-    markerStyle: {
-      initial: {
-        r: 7,
-        fill: '#374151',
-        fillOpacity: 1,
-        stroke: '#FFF',
-        strokeWidth: 5,
-        strokeOpacity: .5
-      },
-      hover: {
-        fill: '#3cc0ff',
-        cursor: 'pointer'
-      },
-      selected: {
-        fill: 'blue'
-      },
-      selectedHover: {}
-    },
-    markerLabelStyle: {
-      initial: {
-        fontFamily: 'Verdana',
-        fontSize: 12,
-        fontWeight: 500,
-        cursor: 'default',
-        fill: '#374151'
-      },
-      hover: {
-        cursor: 'pointer'
-      },
-      selected: {},
-      selectedHover: {}
-    },
-    // Region options
-    regionsSelectable: false,
-    regionsSelectableOne: false,
-    regionStyle: {
-      initial: {
-        fill: '#dee2e8',
-        fillOpacity: 1,
-        stroke: 'none',
-        strokeWidth: 0
-      },
-      hover: {
-        fillOpacity: .7,
-        cursor: 'pointer'
-      },
-      selected: {
-        fill: '#9ca3af'
-      },
-      selectedHover: {}
-    },
-    regionLabelStyle: {
-      initial: {
-        fontFamily: 'Verdana',
-        fontSize: '12',
-        fontWeight: 'bold',
-        cursor: 'default',
-        fill: '#35373e'
-      },
-      hover: {
-        cursor: 'pointer'
-      }
-    }
-  };
-
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-    return _setPrototypeOf(o, p);
-  }
-
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return self;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-    if (it) return (it = it.call(o)).next.bind(it);
-
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
-  var SVGElement = /*#__PURE__*/function () {
-    function SVGElement(name, config) {
-      this.node = this._createElement(name);
-
-      if (config) {
-        this.set(config);
-      }
-    } // Create new SVG element `svg`, `g`, `path`, `line`, `circle`, `image`, etc.
-    // https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris
-
-
-    var _proto = SVGElement.prototype;
-
-    _proto._createElement = function _createElement(tagName) {
-      return document.createElementNS('http://www.w3.org/2000/svg', tagName);
-    };
-
-    _proto.addClass = function addClass(className) {
-      this.node.setAttribute('class', className);
-    };
-
-    _proto.getBBox = function getBBox() {
-      return this.node.getBBox();
-    } // Apply attributes on the current node element
-    ;
-
-    _proto.set = function set(property, value) {
-      if (typeof property === 'object') {
-        for (var attr in property) {
-          this.applyAttr(attr, property[attr]);
-        }
-      } else {
-        this.applyAttr(property, value);
-      }
-    };
-
-    _proto.get = function get(property) {
-      return this.style.initial[property];
-    };
-
-    _proto.applyAttr = function applyAttr(property, value) {
-      this.node.setAttribute(hyphenate(property), value);
-    };
-
-    _proto.remove = function remove() {
-      removeElement(this.node);
-    };
-
-    return SVGElement;
-  }();
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
-  var SVGShapeElement = /*#__PURE__*/function (_SVGElement) {
-    _inheritsLoose(SVGShapeElement, _SVGElement);
-
-    function SVGShapeElement(name, config, style) {
-      var _this;
-
-      if (style === void 0) {
-        style = {};
-      }
-
-      _this = _SVGElement.call(this, name, config) || this;
-      _this.isHovered = false;
-      _this.isSelected = false;
-      _this.style = style;
-      _this.style.current = {};
-
-      _this.updateStyle();
-
-      return _this;
-    }
-
-    var _proto = SVGShapeElement.prototype;
-
-    _proto.setStyle = function setStyle(property, value) {
-      if (typeof property === 'object') {
-        merge(this.style.current, property);
-      } else {
-        var _merge;
-
-        merge(this.style.current, (_merge = {}, _merge[property] = value, _merge));
-      }
-
-      this.updateStyle();
-    };
-
-    _proto.updateStyle = function updateStyle() {
-      var attrs = {};
-      merge(attrs, this.style.initial);
-      merge(attrs, this.style.current);
-
-      if (this.isHovered) {
-        merge(attrs, this.style.hover);
-      }
-
-      if (this.isSelected) {
-        merge(attrs, this.style.selected);
-
-        if (this.isHovered) {
-          merge(attrs, this.style.selectedHover);
-        }
-      }
-
-      this.set(attrs);
-    };
-
-    return SVGShapeElement;
-  }(SVGElement);
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
-  var SVGTextElement = /*#__PURE__*/function (_SVGShapeElement) {
-    _inheritsLoose(SVGTextElement, _SVGShapeElement);
-
-    function SVGTextElement(config, style) {
-      return _SVGShapeElement.call(this, 'text', config, style) || this;
-    }
-
-    var _proto = SVGTextElement.prototype;
-
-    _proto.applyAttr = function applyAttr(attr, value) {
-      attr === 'text' ? this.node.textContent = value : _SVGShapeElement.prototype.applyAttr.call(this, attr, value);
-    };
-
-    return SVGTextElement;
-  }(SVGShapeElement);
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
-  var SVGImageElement = /*#__PURE__*/function (_SVGShapeElement) {
-    _inheritsLoose(SVGImageElement, _SVGShapeElement);
-
-    function SVGImageElement(config, style) {
-      return _SVGShapeElement.call(this, 'image', config, style) || this;
-    }
-
-    var _proto = SVGImageElement.prototype;
-
-    _proto.applyAttr = function applyAttr(attr, value) {
-      var imageUrl;
-
-      if (attr === 'image') {
-        // This get executed when we have url in series.markers[0].scale.someScale.url
-        if (typeof value === 'object') {
-          imageUrl = value.url;
-          this.offset = value.offset || [0, 0];
-        } else {
-          imageUrl = value;
-          this.offset = [0, 0];
-        }
-
-        this.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageUrl); // Set width and height then call this `applyAttr` again
-
-        this.width = 23;
-        this.height = 23;
-        this.applyAttr('width', this.width);
-        this.applyAttr('height', this.height);
-        this.applyAttr('x', this.cx - this.width / 2 + this.offset[0]);
-        this.applyAttr('y', this.cy - this.height / 2 + this.offset[1]);
-      } else if (attr == 'cx') {
-        this.cx = value;
-
-        if (this.width) {
-          this.applyAttr('x', value - this.width / 2 + this.offset[0]);
-        }
-      } else if (attr == 'cy') {
-        this.cy = value;
-
-        if (this.height) {
-          this.applyAttr('y', value - this.height / 2 + this.offset[1]);
-        }
-      } else {
-        // This time Call SVGElement
-        _SVGShapeElement.prototype.applyAttr.apply(this, arguments);
-      }
-    };
-
-    return SVGImageElement;
-  }(SVGShapeElement);
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
-  var SVGCanvasElement = /*#__PURE__*/function (_SVGElement) {
-    _inheritsLoose(SVGCanvasElement, _SVGElement);
-
-    function SVGCanvasElement(container) {
-      var _this;
-
-      _this = _SVGElement.call(this, 'svg') || this; // Create svg element for holding the whole map
-
-      _this._container = container; // Create the defs element
-
-      _this._defsElement = new SVGElement('defs'); // Create group element which will hold the paths (regions)
-
-      _this._rootElement = new SVGElement('g', {
-        id: 'jvm-regions-group'
-      }); // Append the defs element to the this.node (SVG tag)
-
-      _this.node.appendChild(_this._defsElement.node); // Append the group to this.node (SVG tag)
-
-
-      _this.node.appendChild(_this._rootElement.node); // Append this.node (SVG tag) to the container
-
-
-      _this._container.appendChild(_this.node);
-
-      return _this;
-    }
-
-    var _proto = SVGCanvasElement.prototype;
-
-    _proto.setSize = function setSize(width, height) {
-      this.node.setAttribute('width', width);
-      this.node.setAttribute('height', height);
-    };
-
-    _proto.applyTransformParams = function applyTransformParams(scale, transX, transY) {
-      this._rootElement.node.setAttribute('transform', "scale(" + scale + ") translate(" + transX + ", " + transY + ")");
-    } // Create `path` element
-    ;
-
-    _proto.createPath = function createPath(config, style) {
-      var path = new SVGShapeElement('path', config, style);
-      path.node.setAttribute('fill-rule', 'evenodd');
-      return this.add(path);
-    } // Create `circle` element
-    ;
-
-    _proto.createCircle = function createCircle(config, style, group) {
-      var circle = new SVGShapeElement('circle', config, style);
-      return this.add(circle, group);
-    } // Create `line` element
-    ;
-
-    _proto.createLine = function createLine(config, style, group) {
-      var line = new SVGShapeElement('line', config, style);
-      return this.add(line, group);
-    } // Create `text` element
-    ;
-
-    _proto.createText = function createText(config, style, group) {
-      var text = new SVGTextElement(config, style); // extends SVGShapeElement
-
-      return this.add(text, group);
-    } // Create `image` element
-    ;
-
-    _proto.createImage = function createImage(config, style, group) {
-      var image = new SVGImageElement(config, style); // extends SVGShapeElement
-
-      return this.add(image, group);
-    } // Create `g` element
-    ;
-
-    _proto.createGroup = function createGroup(id) {
-      var group = new SVGElement('g');
-      this.node.appendChild(group.node);
-
-      if (id) {
-        group.node.id = id;
-      }
-
-      group.canvas = this;
-      return group;
-    } // Add some element to a spcific group or the root element if the group isn't given
-    ;
-
-    _proto.add = function add(element, group) {
-      group = group || this._rootElement;
-      group.node.appendChild(element.node);
-      return element;
-    };
-
-    return SVGCanvasElement;
-  }(SVGElement);
-
   var eventRegistry = {};
   var eventUid = 1;
   /**
@@ -999,8 +551,69 @@
       lastTouchesLength = touches.length;
     };
 
-    EventHandler.on(map.container, 'touchstart', handleTouchEvent);
-    EventHandler.on(map.container, 'touchmove', handleTouchEvent);
+    EventHandler.on(map.container, 'touchstart', handleTouchEvent);
+    EventHandler.on(map.container, 'touchmove', handleTouchEvent);
+  }
+
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+
+    _setPrototypeOf(subClass, superClass);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
   /**
@@ -1123,7 +736,7 @@
 
 
       if (label && text) {
-        var offsets = _this.getLabelOffsets(code);
+        var offsets = _this.getLabelOffsets(code, label);
 
         _this.labelX = bbox.x + bbox.width / 2 + offsets[0];
         _this.labelY = bbox.y + bbox.height / 2 + offsets[1];
@@ -1169,7 +782,7 @@
 
   function createRegions() {
     var code, region;
-    this.regionLabelsGroup = this.regionLabelsGroup || this.canvas.createGroup('jvm-regions-labels-group');
+    this._regionLabelsGroup = this._regionLabelsGroup || this.canvas.createGroup('jvm-regions-labels-group');
 
     for (code in this.mapData.paths) {
       region = new Region({
@@ -1178,7 +791,7 @@
         path: this.mapData.paths[code].path,
         style: merge({}, this.params.regionStyle),
         labelStyle: this.params.regionLabelStyle,
-        labelsGroup: this.regionLabelsGroup,
+        labelsGroup: this._regionLabelsGroup,
         label: this.params.labels && this.params.labels.regions
       });
       this.regions[code] = {
@@ -1311,7 +924,7 @@
         dataIndex: index,
         cx: cx,
         cy: cy
-      }, _this._getStyle(), group);
+      }, style, group);
 
       _this.shape.addClass('jvm-marker jvm-element');
 
@@ -1337,765 +950,1141 @@
       }
     };
 
-    _proto._createLabel = function _createLabel(_ref2) {
-      var index = _ref2.index,
-          map = _ref2.map,
-          label = _ref2.label,
-          labelsGroup = _ref2.labelsGroup,
-          cx = _ref2.cx,
-          cy = _ref2.cy,
-          marker = _ref2.marker,
-          isRecentlyCreated = _ref2.isRecentlyCreated;
-      var labelText = this.getLabelText(index, label);
-      this._labelX = cx / map.scale - map.transX;
-      this._labelY = cy / map.scale - map.transY;
-      this._offsets = isRecentlyCreated && marker.offsets ? marker.offsets : this.getLabelOffsets(index, label);
-      this.label = map.canvas.createText({
-        text: labelText,
-        dataIndex: index,
-        x: this._labelX,
-        y: this._labelY,
-        dy: '0.6ex'
-      }, map.params.markerLabelStyle, labelsGroup);
-      this.label.addClass('jvm-marker jvm-element');
+    _proto._createLabel = function _createLabel(_ref2) {
+      var index = _ref2.index,
+          map = _ref2.map,
+          label = _ref2.label,
+          labelsGroup = _ref2.labelsGroup,
+          cx = _ref2.cx,
+          cy = _ref2.cy,
+          marker = _ref2.marker,
+          isRecentlyCreated = _ref2.isRecentlyCreated;
+      var labelText = this.getLabelText(index, label);
+      this._labelX = cx / map.scale - map.transX;
+      this._labelY = cy / map.scale - map.transY;
+      this._offsets = isRecentlyCreated && marker.offsets ? marker.offsets : this.getLabelOffsets(index, label);
+      this.label = map.canvas.createText({
+        text: labelText,
+        dataIndex: index,
+        x: this._labelX,
+        y: this._labelY,
+        dy: '0.6ex'
+      }, map.params.markerLabelStyle, labelsGroup);
+      this.label.addClass('jvm-marker jvm-element');
+
+      if (isRecentlyCreated) {
+        this.updateLabelPosition();
+      }
+    };
+
+    return Marker;
+  }(BaseComponent);
+
+  inherit(Marker, Interactable);
+
+  function createMarkers(markers, isRecentlyCreated) {
+    var _this = this;
+
+    if (markers === void 0) {
+      markers = {};
+    }
+
+    if (isRecentlyCreated === void 0) {
+      isRecentlyCreated = false;
+    }
+
+    var config, marker, point, uid; // Create groups for holding markers and markers labels
+    // We're checking if `markersGroup` exists or not becuase we may add markers after the map has loaded
+    // So we will append the futured markers to this group as well.
+
+    this._markersGroup = this._markersGroup || this.canvas.createGroup('jvm-markers-group');
+    this._markerLabelsGroup = this._markerLabelsGroup || this.canvas.createGroup('jvm-markers-labels-group');
+
+    for (var index in markers) {
+      config = markers[index];
+      point = this.getMarkerPosition(config);
+      uid = config.coords.join(':');
+
+      if (!point) {
+        continue;
+      } // We're checking if recently created marker does already exist
+      // If exists we don't need to create it again, so we'll continute
+      // Becuase we may have more than one marker submitted via `addMarkers` method.
+
+
+      if (isRecentlyCreated) {
+        if (Object.keys(this.markers).filter(function (i) {
+          return _this.markers[i]._uid === uid;
+        }).length) {
+          continue;
+        }
+
+        index = Object.keys(this.markers).length;
+      }
+
+      marker = new Marker({
+        index: index,
+        map: this,
+        // Merge the `markerStyle` object with the marker config `style` if presented.
+        style: merge(this.params.markerStyle, {
+          initial: config.style || {}
+        }, true),
+        label: this.params.labels && this.params.labels.markers,
+        labelsGroup: this._markerLabelsGroup,
+        cx: point.x,
+        cy: point.y,
+        group: this._markersGroup,
+        marker: config,
+        isRecentlyCreated: isRecentlyCreated
+      }); // Check for marker duplication
+      // this is useful when for example: a user clicks a button for creating marker two times
+      // so it will remove the old one and the new one will take its place.
+
+      if (this.markers[index]) {
+        this.removeMarkers([index]);
+      }
+
+      this.markers[index] = {
+        _uid: uid,
+        config: config,
+        element: marker
+      };
+    }
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+
+  var Legend = /*#__PURE__*/function () {
+    function Legend(options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      this._options = options;
+      this._map = this._options.map;
+      this._series = this._options.series;
+      this._body = createElement('div', 'jvm-legend');
+
+      if (this._options.cssClass) {
+        this._body.setAttribute('class', this._options.cssClass);
+      }
+
+      if (options.vertical) {
+        this._map.legendVertical.appendChild(this._body);
+      } else {
+        this._map.legendHorizontal.appendChild(this._body);
+      }
+
+      this.render();
+    }
+
+    var _proto = Legend.prototype;
+
+    _proto.render = function render() {
+      var ticks = this._series.scale.getTicks(),
+          inner = createElement('div', 'jvm-legend-inner'),
+          tick,
+          sample,
+          label;
+
+      this._body.innderHTML = '';
+
+      if (this._options.title) {
+        var legendTitle = createElement('div', 'jvm-legend-title', this._options.title);
+
+        this._body.appendChild(legendTitle);
+      }
+
+      this._body.appendChild(inner);
+
+      for (var i = 0; i < ticks.length; i++) {
+        tick = createElement('div', 'jvm-legend-tick');
+        sample = createElement('div', 'jvm-legend-tick-sample');
+
+        switch (this._series.config.attribute) {
+          case 'fill':
+            if (isImageUrl(ticks[i].value)) {
+              sample.style.background = "url(" + ticks[i].value + ")";
+            } else {
+              sample.style.background = ticks[i].value;
+            }
+
+            break;
+
+          case 'stroke':
+            sample.style.background = ticks[i].value;
+            break;
+
+          case 'image':
+            sample.style.background = "url(" + (typeof ticks[i].value === 'object' ? ticks[i].value.url : ticks[i].value) + ") no-repeat center center";
+            sample.style.backgroundSize = 'cover';
+            break;
+        }
+
+        tick.appendChild(sample);
+        label = ticks[i].label;
+
+        if (this._options.labelRender) {
+          label = this._options.labelRender(label);
+        }
+
+        var tickText = createElement('div', 'jvm-legend-tick-text', label);
+        tick.appendChild(tickText);
+        inner.appendChild(tick);
+      }
+    };
+
+    return Legend;
+  }();
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  var OrdinalScale = /*#__PURE__*/function () {
+    function OrdinalScale(scale) {
+      this._scale = scale;
+    }
+
+    var _proto = OrdinalScale.prototype;
+
+    _proto.getValue = function getValue(value) {
+      return this._scale[value];
+    };
+
+    _proto.getTicks = function getTicks() {
+      var ticks = [];
+
+      for (var key in this._scale) {
+        ticks.push({
+          label: key,
+          value: this._scale[key]
+        });
+      }
+
+      return ticks;
+    };
+
+    return OrdinalScale;
+  }();
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+
+  var Series = /*#__PURE__*/function () {
+    function Series(config, elements, map) {
+      if (config === void 0) {
+        config = {};
+      }
+
+      // Private
+      this._map = map;
+      this._elements = elements; // Could be markers or regions
+
+      this._values = config.values || {}; // Protected
+
+      this.config = config;
+      this.config.attribute = config.attribute || 'fill'; // Set initial attributes
+
+      if (config.attributes) {
+        this.setAttributes(config.attributes);
+      }
+
+      if (typeof config.scale === 'object') {
+        this.scale = new OrdinalScale(config.scale);
+      }
+
+      if (this.config.legend) {
+        this.legend = new Legend(merge({
+          map: this._map,
+          series: this
+        }, this.config.legend));
+      }
+
+      this.setValues(this._values);
+    }
+
+    var _proto = Series.prototype;
+
+    _proto.setValues = function setValues(values) {
+      var attrs = {};
+
+      for (var key in values) {
+        if (values[key]) {
+          attrs[key] = this.scale.getValue(values[key]);
+        }
+      }
+
+      this.setAttributes(attrs);
+    };
+
+    _proto.setAttributes = function setAttributes(attrs) {
+      for (var code in attrs) {
+        if (this._elements[code]) {
+          this._elements[code].element.setStyle(this.config.attribute, attrs[code]);
+        }
+      }
+    };
+
+    _proto.clear = function clear() {
+      var key,
+          attrs = {};
 
-      if (isRecentlyCreated) {
-        this.updateLabelPosition();
+      for (key in this._values) {
+        if (this._elements[key]) {
+          attrs[key] = this._elements[key].element.shape.style.initial[this.config.attribute];
+        }
       }
-    };
 
-    _proto._getStyle = function _getStyle() {
-      var style = {};
+      this.setAttributes(attrs);
+      this._values = {};
+    };
 
-      if (this._isImage) {
-        style.initial = {
-          image: this.config.style.initial.image
-        };
-      } else {
-        style = this.config.style;
-      }
+    return Series;
+  }();
 
-      return style;
+  function createSeries() {
+    this.series = {
+      markers: [],
+      regions: []
     };
 
-    return Marker;
-  }(BaseComponent);
+    for (var key in this.params.series) {
+      for (var i = 0; i < this.params.series[key].length; i++) {
+        this.series[key][i] = new Series(this.params.series[key][i], this[key], this);
+      }
+    }
+  }
 
-  inherit(Marker, Interactable);
+  function applyTransform() {
+    var maxTransX, maxTransY, minTransX, minTransY;
 
-  function createMarkers(markers, isRecentlyCreated) {
-    var _this = this;
+    if (this.defaultWidth * this.scale <= this.width) {
+      maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
+      minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
+    } else {
+      maxTransX = 0;
+      minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
+    }
 
-    if (markers === void 0) {
-      markers = {};
+    if (this.defaultHeight * this.scale <= this.height) {
+      maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
+      minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
+    } else {
+      maxTransY = 0;
+      minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
     }
 
-    if (isRecentlyCreated === void 0) {
-      isRecentlyCreated = false;
+    if (this.transY > maxTransY) {
+      this.transY = maxTransY;
+    } else if (this.transY < minTransY) {
+      this.transY = minTransY;
     }
 
-    var markerConfig, marker, point, uid; // Create groups for holding markers and markers labels
-    // We're checking if `markersGroup` exists or not becuase we may add markers after the map has loaded
-    // So we will append the futured markers to this group as well.
+    if (this.transX > maxTransX) {
+      this.transX = maxTransX;
+    } else if (this.transX < minTransX) {
+      this.transX = minTransX;
+    }
 
-    this.markersGroup = this.markersGroup || this.canvas.createGroup('jvm-markers-group');
-    this.markerLabelsGroup = this.markerLabelsGroup || this.canvas.createGroup('jvm-markers-labels-group');
+    this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
 
-    for (var index in markers) {
-      markerConfig = markers[index];
-      point = this.getMarkerPosition(markerConfig);
-      uid = markerConfig.coords.join(':'); // We're checking if recently created marker does already exist
-      // If exists we don't need to create it again, so we'll continute
-      // Becuase we may have more than one marker.
+    if (this.markers) {
+      this._repositionMarkers();
+    }
 
-      if (isRecentlyCreated) {
-        if (Object.keys(this.markers).filter(function (i) {
-          return _this.markers[i]._uid === uid;
-        }).length) {
-          continue;
-        }
+    if (this.lines) {
+      this._repositionLines();
+    }
 
-        index = Object.keys(this.markers).length;
-      }
+    this._repositionLabels();
+  }
 
-      if (point !== false) {
-        marker = new Marker({
-          index: index,
-          map: this,
-          // Merge the `markerStyle` object with the marker config `style` if presented.
-          style: merge(this.params.markerStyle, {
-            initial: markerConfig.style || {}
-          }, true),
-          label: this.params.labels && this.params.labels.markers,
-          labelsGroup: this.markerLabelsGroup,
-          cx: point.x,
-          cy: point.y,
-          group: this.markersGroup,
-          marker: markerConfig,
-          isRecentlyCreated: isRecentlyCreated
-        }); // Check for marker duplication
-        // this is useful when for example: a user clicks a button for creating marker two times
-        // so it will remove the old one and the new one will take its place.
-
-        if (this.markers[index]) {
-          this.removeMarkers([index]);
-        }
+  function resize() {
+    var curBaseScale = this.baseScale;
 
-        this.markers[index] = {
-          _uid: uid,
-          config: markerConfig,
-          element: marker
-        };
-      }
+    if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
+      this.baseScale = this.height / this.defaultHeight;
+      this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
+    } else {
+      this.baseScale = this.width / this.defaultWidth;
+      this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
     }
+
+    this.scale *= this.baseScale / curBaseScale;
+    this.transX *= this.baseScale / curBaseScale;
+    this.transY *= this.baseScale / curBaseScale;
   }
 
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
+  function setScale(scale, anchorX, anchorY, isCentered, animate) {
+    var _this = this;
 
-  var Legend = /*#__PURE__*/function () {
-    function Legend(options) {
-      if (options === void 0) {
-        options = {};
-      }
+    var zoomStep,
+        interval,
+        i = 0,
+        count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale))),
+        scaleStart,
+        scaleDiff,
+        transXStart,
+        transXDiff,
+        transYStart,
+        transYDiff,
+        transX,
+        transY;
 
-      this._options = options;
-      this._map = this._options.map;
-      this._series = this._options.series;
-      this._body = createElement('div', 'jvm-legend');
+    if (scale > this.params.zoomMax * this.baseScale) {
+      scale = this.params.zoomMax * this.baseScale;
+    } else if (scale < this.params.zoomMin * this.baseScale) {
+      scale = this.params.zoomMin * this.baseScale;
+    }
 
-      if (this._options.cssClass) {
-        this._body.setAttribute('class', this._options.cssClass);
-      }
+    if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
+      zoomStep = scale / this.scale;
 
-      if (options.vertical) {
-        this._map.legendVertical.appendChild(this._body);
+      if (isCentered) {
+        transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2;
+        transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2;
       } else {
-        this._map.legendHorizontal.appendChild(this._body);
+        transX = this.transX - (zoomStep - 1) / scale * anchorX;
+        transY = this.transY - (zoomStep - 1) / scale * anchorY;
       }
-
-      this.render();
     }
 
-    var _proto = Legend.prototype;
+    if (animate && count > 0) {
+      scaleStart = this.scale;
+      scaleDiff = (scale - scaleStart) / count;
+      transXStart = this.transX * this.scale;
+      transYStart = this.transY * this.scale;
+      transXDiff = (transX * scale - transXStart) / count;
+      transYDiff = (transY * scale - transYStart) / count;
+      interval = setInterval(function () {
+        i += 1;
+        _this.scale = scaleStart + scaleDiff * i;
+        _this.transX = (transXStart + transXDiff * i) / _this.scale;
+        _this.transY = (transYStart + transYDiff * i) / _this.scale;
 
-    _proto.render = function render() {
-      var ticks = this._series.scale.getTicks(),
-          inner = createElement('div', 'jvm-legend-inner'),
-          tick,
-          sample,
-          label;
+        _this._applyTransform();
 
-      this._body.innderHTML = '';
+        if (i == count) {
+          clearInterval(interval);
 
-      if (this._options.title) {
-        var legendTitle = createElement('div', 'jvm-legend-title', this._options.title);
+          _this._emit(Events.onViewportChange, [_this.scale, _this.transX, _this.transY]);
+        }
+      }, 10);
+    } else {
+      this.transX = transX;
+      this.transY = transY;
+      this.scale = scale;
 
-        this._body.appendChild(legendTitle);
-      }
+      this._applyTransform();
 
-      this._body.appendChild(inner);
+      this._emit(Events.onViewportChange, [this.scale, this.transX, this.transY]);
+    }
+  }
 
-      for (var i = 0; i < ticks.length; i++) {
-        tick = createElement('div', 'jvm-legend-tick');
-        sample = createElement('div', 'jvm-legend-tick-sample');
+  function setFocus(config) {
+    var _this = this;
 
-        switch (this._series.config.attribute) {
-          case 'fill':
-            if (isImageUrl(ticks[i].value)) {
-              sample.style.background = "url(" + ticks[i].value + ")";
-            } else {
-              sample.style.background = ticks[i].value;
-            }
+    if (config === void 0) {
+      config = {};
+    }
 
-            break;
+    var bbox,
+        codes = [];
 
-          case 'stroke':
-            sample.style.background = ticks[i].value;
-            break;
+    if (config.region) {
+      codes.push(config.region);
+    } else if (config.regions) {
+      codes = config.regions;
+    }
 
-          case 'image':
-            sample.style.background = "url(" + (typeof ticks[i].value === 'object' ? ticks[i].value.url : ticks[i].value) + ") no-repeat center center";
-            sample.style.backgroundSize = 'cover';
-            break;
+    if (codes.length) {
+      codes.forEach(function (code) {
+        if (_this.regions[code]) {
+          var itemBbox = _this.regions[code].element.shape.getBBox();
+
+          if (itemBbox) {
+            // Handle the first loop
+            if (typeof bbox == 'undefined') {
+              bbox = itemBbox;
+            } else {
+              // get the old bbox properties plus the current
+              // this kinda incrementing the old values and the new values
+              bbox = {
+                x: Math.min(bbox.x, itemBbox.x),
+                y: Math.min(bbox.y, itemBbox.y),
+                width: Math.max(bbox.x + bbox.width, itemBbox.x + itemBbox.width) - Math.min(bbox.x, itemBbox.x),
+                height: Math.max(bbox.y + bbox.height, itemBbox.y + itemBbox.height) - Math.min(bbox.y, itemBbox.y)
+              };
+            }
+          }
         }
+      });
+      return this._setScale(Math.min(this.width / bbox.width, this.height / bbox.height), -(bbox.x + bbox.width / 2), -(bbox.y + bbox.height / 2), true, config.animate);
+    } else if (config.coords) {
+      var point = this.coordsToPoint(config.coords[0], config.coords[1]);
+      var x = this.transX - point.x / this.scale;
+      var y = this.transY - point.y / this.scale;
+      return this._setScale(config.scale * this.baseScale, x, y, true, config.animate);
+    }
+  }
 
-        tick.appendChild(sample);
-        label = ticks[i].label;
+  function updateSize() {
+    this.width = this.container.offsetWidth;
+    this.height = this.container.offsetHeight;
 
-        if (this._options.labelRender) {
-          label = this._options.labelRender(label);
-        }
+    this._resize();
 
-        var tickText = createElement('div', 'jvm-legend-tick-text', label);
-        tick.appendChild(tickText);
-        inner.appendChild(tick);
-      }
-    };
+    this.canvas.setSize(this.width, this.height);
 
-    return Legend;
-  }();
+    this._applyTransform();
+  }
 
   /**
    * ------------------------------------------------------------------------
-   * Class Definition
+   * Object
    * ------------------------------------------------------------------------
    */
-  var OrdinalScale = /*#__PURE__*/function () {
-    function OrdinalScale(scale) {
-      this._scale = scale;
-    }
-
-    var _proto = OrdinalScale.prototype;
-
-    _proto.getValue = function getValue(value) {
-      return this._scale[value];
-    };
-
-    _proto.getTicks = function getTicks() {
-      var ticks = [];
-
-      for (var key in this._scale) {
-        ticks.push({
-          label: key,
-          value: this._scale[key]
-        });
-      }
+  var Proj = {
+    /* sgn(n){
+      if (n > 0) {
+        return 1;
+      } else if (n < 0) {
+        return -1;
+      } else {
+        return n;
+      }
+    }, */
+    mill: function mill(lat, lng, c) {
+      return {
+        x: this.radius * (lng - c) * this.radDeg,
+        y: -this.radius * Math.log(Math.tan((45 + 0.4 * lat) * this.radDeg)) / 0.8
+      };
+    },
 
-      return ticks;
-    };
+    /* mill_inv(x, y, c) {
+      return {
+        lat: (2.5 * Math.atan(Math.exp(0.8 * y / this.radius)) - 5 * Math.PI / 8) * this.degRad,
+        lng: (c * this.radDeg + x / this.radius) * this.degRad
+      };
+    }, */
+    merc: function merc(lat, lng, c) {
+      return {
+        x: this.radius * (lng - c) * this.radDeg,
+        y: -this.radius * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360))
+      };
+    },
 
-    return OrdinalScale;
-  }();
+    /* merc_inv(x, y, c) {
+      return {
+        lat: (2 * Math.atan(Math.exp(y / this.radius)) - Math.PI / 2) * this.degRad,
+        lng: (c * this.radDeg + x / this.radius) * this.degRad
+      };
+    }, */
+    aea: function aea(lat, lng, c) {
+      var fi0 = 0,
+          lambda0 = c * this.radDeg,
+          fi1 = 29.5 * this.radDeg,
+          fi2 = 45.5 * this.radDeg,
+          fi = lat * this.radDeg,
+          lambda = lng * this.radDeg,
+          n = (Math.sin(fi1) + Math.sin(fi2)) / 2,
+          C = Math.cos(fi1) * Math.cos(fi1) + 2 * n * Math.sin(fi1),
+          theta = n * (lambda - lambda0),
+          ro = Math.sqrt(C - 2 * n * Math.sin(fi)) / n,
+          ro0 = Math.sqrt(C - 2 * n * Math.sin(fi0)) / n;
+      return {
+        x: ro * Math.sin(theta) * this.radius,
+        y: -(ro0 - ro * Math.cos(theta)) * this.radius
+      };
+    },
 
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
+    /* aea_inv(xCoord, yCoord, c) {
+      var x = xCoord / this.radius,
+          y = yCoord / this.radius,
+          fi0 = 0,
+          lambda0 = c * this.radDeg,
+          fi1 = 29.5 * this.radDeg,
+          fi2 = 45.5 * this.radDeg,
+          n = (Math.sin(fi1)+Math.sin(fi2)) / 2,
+          C = Math.cos(fi1)*Math.cos(fi1)+2*n*Math.sin(fi1),
+          ro0 = Math.sqrt(C-2*n*Math.sin(fi0))/n,
+          ro = Math.sqrt(x*x+(ro0-y)*(ro0-y)),
+          theta = Math.atan( x / (ro0 - y) );
+        return {
+        lat: (Math.asin((C - ro * ro * n * n) / (2 * n))) * this.degRad,
+        lng: (lambda0 + theta / n) * this.degRad
+      };
+    }, */
+    lcc: function lcc(lat, lng, c) {
+      var fi0 = 0,
+          lambda0 = c * this.radDeg,
+          lambda = lng * this.radDeg,
+          fi1 = 33 * this.radDeg,
+          fi2 = 45 * this.radDeg,
+          fi = lat * this.radDeg,
+          n = Math.log(Math.cos(fi1) * (1 / Math.cos(fi2))) / Math.log(Math.tan(Math.PI / 4 + fi2 / 2) * (1 / Math.tan(Math.PI / 4 + fi1 / 2))),
+          F = Math.cos(fi1) * Math.pow(Math.tan(Math.PI / 4 + fi1 / 2), n) / n,
+          ro = F * Math.pow(1 / Math.tan(Math.PI / 4 + fi / 2), n),
+          ro0 = F * Math.pow(1 / Math.tan(Math.PI / 4 + fi0 / 2), n);
+      return {
+        x: ro * Math.sin(n * (lambda - lambda0)) * this.radius,
+        y: -(ro0 - ro * Math.cos(n * (lambda - lambda0))) * this.radius
+      };
+    }
+    /* lcc_inv(xCoord, yCoord, c) {
+      var x = xCoord / this.radius,
+          y = yCoord / this.radius,
+          fi0 = 0,
+          lambda0 = c * this.radDeg,
+          fi1 = 33 * this.radDeg,
+          fi2 = 45 * this.radDeg,
+          n = Math.log( Math.cos(fi1) * (1 / Math.cos(fi2)) ) / Math.log( Math.tan( Math.PI / 4 + fi2 / 2) * (1 / Math.tan( Math.PI / 4 + fi1 / 2) ) ),
+          F = ( Math.cos(fi1) * Math.pow( Math.tan( Math.PI / 4 + fi1 / 2 ), n ) ) / n,
+          ro0 = F * Math.pow( 1 / Math.tan( Math.PI / 4 + fi0 / 2 ), n ),
+          ro = this.sgn(n) * Math.sqrt(x*x+(ro0-y)*(ro0-y)),
+          theta = Math.atan( x / (ro0 - y) );
+        return {
+        lat: (2 * Math.atan(Math.pow(F/ro, 1/n)) - Math.PI / 2) * this.degRad,
+        lng: (lambda0 + theta / n) * this.degRad
+      };
+    } */
 
-  var Series = /*#__PURE__*/function () {
-    function Series(config, elements, map) {
-      if (config === void 0) {
-        config = {};
-      }
+  };
+  Proj.degRad = 180 / Math.PI;
+  Proj.radDeg = Math.PI / 180;
+  Proj.radius = 6381372;
 
-      // Private
-      this._map = map;
-      this._elements = elements; // Could be markers or regions
+  function coordsToPoint(lat, lng) {
+    var point,
+        proj = Map.maps[this.params.map].projection,
+        centralMeridian = proj.centralMeridian,
+        inset,
+        bbox;
+    point = Proj[proj.type](lat, lng, centralMeridian);
+    inset = this.getInsetForPoint(point.x, point.y);
 
-      this._values = config.values || {}; // Protected
+    if (inset) {
+      bbox = inset.bbox;
+      point.x = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x) * inset.width * this.scale;
+      point.y = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y) * inset.height * this.scale;
+      return {
+        x: point.x + this.transX * this.scale + inset.left * this.scale,
+        y: point.y + this.transY * this.scale + inset.top * this.scale
+      };
+    }
 
-      this.config = config;
-      this.config.attribute = config.attribute || 'fill'; // Set initial attributes
+    return false;
+  }
 
-      if (config.attributes) {
-        this.setAttributes(config.attributes);
-      }
+  function getInsetForPoint(x, y) {
+    var index,
+        bbox,
+        insets = Map.maps[this.params.map].insets;
 
-      if (typeof config.scale === 'object') {
-        this.scale = new OrdinalScale(config.scale);
-      }
+    for (index = 0; index < insets.length; index++) {
+      bbox = insets[index].bbox;
 
-      if (this.config.legend) {
-        this.legend = new Legend(merge({
-          map: this._map,
-          series: this
-        }, this.config.legend));
+      if (x > bbox[0].x && x < bbox[1].x && y > bbox[0].y && y < bbox[1].y) {
+        return insets[index];
       }
-
-      this.setValues(this._values);
     }
+  }
 
-    var _proto = Series.prototype;
-
-    _proto.setValues = function setValues(values) {
-      var attrs = {};
+  function getMarkerPosition(_ref) {
+    var coords = _ref.coords;
 
-      for (var key in values) {
-        if (values[key]) {
-          attrs[key] = this.scale.getValue(values[key]);
-        }
-      }
+    if (Map.maps[this.params.map].projection) {
+      return this.coordsToPoint.apply(this, coords);
+    }
 
-      this.setAttributes(attrs);
+    return {
+      x: coords[0] * this.scale + this.transX * this.scale,
+      y: coords[1] * this.scale + this.transY * this.scale
     };
+  }
 
-    _proto.setAttributes = function setAttributes(attrs) {
-      for (var code in attrs) {
-        if (this._elements[code]) {
-          this._elements[code].element.setStyle(this.config.attribute, attrs[code]);
-        }
-      }
-    };
+  function repositionLines() {
+    var point1 = false,
+        point2 = false;
+
+    for (var index in this.lines) {
+      for (var mindex in this.markers) {
+        var marker = this.markers[mindex]; // console.log(this.lines[index], index);
 
-    _proto.clear = function clear() {
-      var key,
-          attrs = {};
+        if (marker.config.name === this.lines[index].config.from) {
+          point1 = this.getMarkerPosition(marker.config);
+        }
 
-      for (key in this._values) {
-        if (this._elements[key]) {
-          attrs[key] = this._elements[key].element.shape.style.initial[this.config.attribute];
+        if (marker.config.name === this.lines[index].config.to) {
+          point2 = this.getMarkerPosition(marker.config);
         }
       }
 
-      this.setAttributes(attrs);
-      this._values = {};
-    };
+      if (point1 !== false && point2 !== false) {
+        this.lines[index].setStyle({
+          x1: point1.x,
+          y1: point1.y,
+          x2: point2.x,
+          y2: point2.y
+        });
+      }
+    }
+  }
 
-    return Series;
-  }();
+  function repositionMarkers() {
+    var point;
 
-  function createSeries() {
-    this.series = {
-      markers: [],
-      regions: []
-    };
+    for (var index in this.markers) {
+      point = this.getMarkerPosition(this.markers[index].config);
 
-    for (var key in this.params.series) {
-      for (var i = 0; i < this.params.series[key].length; i++) {
-        this.series[key][i] = new Series(this.params.series[key][i], this[key], this);
+      if (point !== false) {
+        this.markers[index].element.setStyle({
+          cx: point.x,
+          cy: point.y
+        });
       }
     }
   }
 
-  function applyTransform() {
-    var maxTransX, maxTransY, minTransX, minTransY;
-
-    if (this.defaultWidth * this.scale <= this.width) {
-      maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
-      minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
-    } else {
-      maxTransX = 0;
-      minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
-    }
+  function repositionLabels() {
+    var labels = this.params.labels;
 
-    if (this.defaultHeight * this.scale <= this.height) {
-      maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
-      minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
-    } else {
-      maxTransY = 0;
-      minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
-    }
+    if (!labels) {
+      return;
+    } // Regions labels
 
-    if (this.transY > maxTransY) {
-      this.transY = maxTransY;
-    } else if (this.transY < minTransY) {
-      this.transY = minTransY;
-    }
 
-    if (this.transX > maxTransX) {
-      this.transX = maxTransX;
-    } else if (this.transX < minTransX) {
-      this.transX = minTransX;
-    }
+    if (labels.regions) {
+      for (var key in this.regions) {
+        this.regions[key].element.updateLabelPosition();
+      }
+    } // Markers labels
 
-    this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
 
-    if (this.markers) {
-      this._repositionMarkers();
+    if (labels.markers) {
+      for (var _key in this.markers) {
+        this.markers[_key].element.updateLabelPosition();
+      }
     }
+  }
 
-    if (this.lines) {
-      this._repositionLines();
+  var core = {
+    _setupContainerEvents: setupContainerEvents,
+    _setupElementEvents: setupElementEvents,
+    _setupZoomButtons: setupZoomButtons,
+    _setupContainerTouchEvents: setupContainerTouchEvents,
+    _createRegions: createRegions,
+    _createLines: createLines,
+    _createMarkers: createMarkers,
+    _createSeries: createSeries,
+    _applyTransform: applyTransform,
+    _resize: resize,
+    _setScale: setScale,
+    setFocus: setFocus,
+    updateSize: updateSize,
+    coordsToPoint: coordsToPoint,
+    getInsetForPoint: getInsetForPoint,
+    getMarkerPosition: getMarkerPosition,
+    _repositionLines: repositionLines,
+    _repositionMarkers: repositionMarkers,
+    _repositionLabels: repositionLabels
+  };
+
+  var Defaults = {
+    map: 'world',
+    backgroundColor: 'transparent',
+    draggable: true,
+    zoomButtons: true,
+    zoomOnScroll: true,
+    zoomOnScrollSpeed: 3,
+    zoomMax: 12,
+    zoomMin: 1,
+    zoomAnimate: true,
+    showTooltip: true,
+    zoomStep: 1.5,
+    bindTouchEvents: true,
+    // Line options
+    lineStyle: {
+      stroke: '#808080',
+      strokeWidth: 1,
+      strokeLinecap: 'round'
+    },
+    // Marker options
+    markersSelectable: false,
+    markersSelectableOne: false,
+    markerStyle: {
+      initial: {
+        r: 7,
+        fill: '#374151',
+        fillOpacity: 1,
+        stroke: '#FFF',
+        strokeWidth: 5,
+        strokeOpacity: .5
+      },
+      hover: {
+        fill: '#3cc0ff',
+        cursor: 'pointer'
+      },
+      selected: {
+        fill: 'blue'
+      },
+      selectedHover: {}
+    },
+    markerLabelStyle: {
+      initial: {
+        fontFamily: 'Verdana',
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: 'default',
+        fill: '#374151'
+      },
+      hover: {
+        cursor: 'pointer'
+      },
+      selected: {},
+      selectedHover: {}
+    },
+    // Region options
+    regionsSelectable: false,
+    regionsSelectableOne: false,
+    regionStyle: {
+      initial: {
+        fill: '#dee2e8',
+        fillOpacity: 1,
+        stroke: 'none',
+        strokeWidth: 0
+      },
+      hover: {
+        fillOpacity: .7,
+        cursor: 'pointer'
+      },
+      selected: {
+        fill: '#9ca3af'
+      },
+      selectedHover: {}
+    },
+    regionLabelStyle: {
+      initial: {
+        fontFamily: 'Verdana',
+        fontSize: '12',
+        fontWeight: 'bold',
+        cursor: 'default',
+        fill: '#35373e'
+      },
+      hover: {
+        cursor: 'pointer'
+      }
     }
+  };
 
-    this._repositionLabels();
-  }
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
 
-  function resize() {
-    var curBaseScale = this.baseScale;
+  var SVGElement = /*#__PURE__*/function () {
+    function SVGElement(name, config) {
+      this.node = this._createElement(name);
 
-    if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
-      this.baseScale = this.height / this.defaultHeight;
-      this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
-    } else {
-      this.baseScale = this.width / this.defaultWidth;
-      this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
-    }
+      if (config) {
+        this.set(config);
+      }
+    } // Create new SVG element `svg`, `g`, `path`, `line`, `circle`, `image`, etc.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris
 
-    this.scale *= this.baseScale / curBaseScale;
-    this.transX *= this.baseScale / curBaseScale;
-    this.transY *= this.baseScale / curBaseScale;
-  }
 
-  function setScale(scale, anchorX, anchorY, isCentered, animate) {
-    var _this = this;
+    var _proto = SVGElement.prototype;
 
-    var zoomStep,
-        interval,
-        i = 0,
-        count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale))),
-        scaleStart,
-        scaleDiff,
-        transXStart,
-        transXDiff,
-        transYStart,
-        transYDiff,
-        transX,
-        transY;
+    _proto._createElement = function _createElement(tagName) {
+      return document.createElementNS('http://www.w3.org/2000/svg', tagName);
+    };
 
-    if (scale > this.params.zoomMax * this.baseScale) {
-      scale = this.params.zoomMax * this.baseScale;
-    } else if (scale < this.params.zoomMin * this.baseScale) {
-      scale = this.params.zoomMin * this.baseScale;
-    }
+    _proto.addClass = function addClass(className) {
+      this.node.setAttribute('class', className);
+    };
 
-    if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
-      zoomStep = scale / this.scale;
+    _proto.getBBox = function getBBox() {
+      return this.node.getBBox();
+    } // Apply attributes on the current node element
+    ;
 
-      if (isCentered) {
-        transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2;
-        transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2;
+    _proto.set = function set(property, value) {
+      if (typeof property === 'object') {
+        for (var attr in property) {
+          this.applyAttr(attr, property[attr]);
+        }
       } else {
-        transX = this.transX - (zoomStep - 1) / scale * anchorX;
-        transY = this.transY - (zoomStep - 1) / scale * anchorY;
+        this.applyAttr(property, value);
       }
-    }
-
-    if (animate && count > 0) {
-      scaleStart = this.scale;
-      scaleDiff = (scale - scaleStart) / count;
-      transXStart = this.transX * this.scale;
-      transYStart = this.transY * this.scale;
-      transXDiff = (transX * scale - transXStart) / count;
-      transYDiff = (transY * scale - transYStart) / count;
-      interval = setInterval(function () {
-        i += 1;
-        _this.scale = scaleStart + scaleDiff * i;
-        _this.transX = (transXStart + transXDiff * i) / _this.scale;
-        _this.transY = (transYStart + transYDiff * i) / _this.scale;
+    };
 
-        _this._applyTransform();
+    _proto.get = function get(property) {
+      return this.style.initial[property];
+    };
 
-        if (i == count) {
-          clearInterval(interval);
+    _proto.applyAttr = function applyAttr(property, value) {
+      this.node.setAttribute(hyphenate(property), value);
+    };
 
-          _this._emit(Events.onViewportChange, [_this.scale, _this.transX, _this.transY]);
-        }
-      }, 10);
-    } else {
-      this.transX = transX;
-      this.transY = transY;
-      this.scale = scale;
+    _proto.remove = function remove() {
+      removeElement(this.node);
+    };
 
-      this._applyTransform();
+    return SVGElement;
+  }();
 
-      this._emit(Events.onViewportChange, [this.scale, this.transX, this.transY]);
-    }
-  }
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
 
-  function setFocus(config) {
-    var _this = this;
+  var SVGShapeElement = /*#__PURE__*/function (_SVGElement) {
+    _inheritsLoose(SVGShapeElement, _SVGElement);
 
-    if (config === void 0) {
-      config = {};
-    }
+    function SVGShapeElement(name, config, style) {
+      var _this;
 
-    var bbox,
-        codes = [];
+      if (style === void 0) {
+        style = {};
+      }
 
-    if (config.region) {
-      codes.push(config.region);
-    } else if (config.regions) {
-      codes = config.regions;
-    }
+      _this = _SVGElement.call(this, name, config) || this;
+      _this.isHovered = false;
+      _this.isSelected = false;
+      _this.style = style;
+      _this.style.current = {};
 
-    if (codes.length) {
-      codes.forEach(function (code) {
-        if (_this.regions[code]) {
-          var itemBbox = _this.regions[code].element.shape.getBBox();
+      _this.updateStyle();
 
-          if (itemBbox) {
-            // Handle the first loop
-            if (typeof bbox == 'undefined') {
-              bbox = itemBbox;
-            } else {
-              // get the old bbox properties plus the current
-              // this kinda incrementing the old values and the new values
-              bbox = {
-                x: Math.min(bbox.x, itemBbox.x),
-                y: Math.min(bbox.y, itemBbox.y),
-                width: Math.max(bbox.x + bbox.width, itemBbox.x + itemBbox.width) - Math.min(bbox.x, itemBbox.x),
-                height: Math.max(bbox.y + bbox.height, itemBbox.y + itemBbox.height) - Math.min(bbox.y, itemBbox.y)
-              };
-            }
-          }
-        }
-      });
-      return this._setScale(Math.min(this.width / bbox.width, this.height / bbox.height), -(bbox.x + bbox.width / 2), -(bbox.y + bbox.height / 2), true, config.animate);
-    } else if (config.coords) {
-      var point = this.coordsToPoint(config.coords[0], config.coords[1]);
-      var x = this.transX - point.x / this.scale;
-      var y = this.transY - point.y / this.scale;
-      return this._setScale(config.scale * this.baseScale, x, y, true, config.animate);
+      return _this;
     }
-  }
 
-  function updateSize() {
-    this.width = this.container.offsetWidth;
-    this.height = this.container.offsetHeight;
+    var _proto = SVGShapeElement.prototype;
 
-    this._resize();
+    _proto.setStyle = function setStyle(property, value) {
+      if (typeof property === 'object') {
+        merge(this.style.current, property);
+      } else {
+        var _merge;
 
-    this.canvas.setSize(this.width, this.height);
+        merge(this.style.current, (_merge = {}, _merge[property] = value, _merge));
+      }
 
-    this._applyTransform();
-  }
+      this.updateStyle();
+    };
 
-  /**
-   * ------------------------------------------------------------------------
-   * Object
-   * ------------------------------------------------------------------------
-   */
-  var Proj = {
-    /* sgn(n){
-      if (n > 0) {
-        return 1;
-      } else if (n < 0) {
-        return -1;
-      } else {
-        return n;
-      }
-    }, */
-    mill: function mill(lat, lng, c) {
-      return {
-        x: this.radius * (lng - c) * this.radDeg,
-        y: -this.radius * Math.log(Math.tan((45 + 0.4 * lat) * this.radDeg)) / 0.8
-      };
-    },
+    _proto.updateStyle = function updateStyle() {
+      var attrs = {};
+      merge(attrs, this.style.initial);
+      merge(attrs, this.style.current);
 
-    /* mill_inv(x, y, c) {
-      return {
-        lat: (2.5 * Math.atan(Math.exp(0.8 * y / this.radius)) - 5 * Math.PI / 8) * this.degRad,
-        lng: (c * this.radDeg + x / this.radius) * this.degRad
-      };
-    }, */
-    merc: function merc(lat, lng, c) {
-      return {
-        x: this.radius * (lng - c) * this.radDeg,
-        y: -this.radius * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360))
-      };
-    },
+      if (this.isHovered) {
+        merge(attrs, this.style.hover);
+      }
 
-    /* merc_inv(x, y, c) {
-      return {
-        lat: (2 * Math.atan(Math.exp(y / this.radius)) - Math.PI / 2) * this.degRad,
-        lng: (c * this.radDeg + x / this.radius) * this.degRad
-      };
-    }, */
-    aea: function aea(lat, lng, c) {
-      var fi0 = 0,
-          lambda0 = c * this.radDeg,
-          fi1 = 29.5 * this.radDeg,
-          fi2 = 45.5 * this.radDeg,
-          fi = lat * this.radDeg,
-          lambda = lng * this.radDeg,
-          n = (Math.sin(fi1) + Math.sin(fi2)) / 2,
-          C = Math.cos(fi1) * Math.cos(fi1) + 2 * n * Math.sin(fi1),
-          theta = n * (lambda - lambda0),
-          ro = Math.sqrt(C - 2 * n * Math.sin(fi)) / n,
-          ro0 = Math.sqrt(C - 2 * n * Math.sin(fi0)) / n;
-      return {
-        x: ro * Math.sin(theta) * this.radius,
-        y: -(ro0 - ro * Math.cos(theta)) * this.radius
-      };
-    },
+      if (this.isSelected) {
+        merge(attrs, this.style.selected);
 
-    /* aea_inv(xCoord, yCoord, c) {
-      var x = xCoord / this.radius,
-          y = yCoord / this.radius,
-          fi0 = 0,
-          lambda0 = c * this.radDeg,
-          fi1 = 29.5 * this.radDeg,
-          fi2 = 45.5 * this.radDeg,
-          n = (Math.sin(fi1)+Math.sin(fi2)) / 2,
-          C = Math.cos(fi1)*Math.cos(fi1)+2*n*Math.sin(fi1),
-          ro0 = Math.sqrt(C-2*n*Math.sin(fi0))/n,
-          ro = Math.sqrt(x*x+(ro0-y)*(ro0-y)),
-          theta = Math.atan( x / (ro0 - y) );
-        return {
-        lat: (Math.asin((C - ro * ro * n * n) / (2 * n))) * this.degRad,
-        lng: (lambda0 + theta / n) * this.degRad
-      };
-    }, */
-    lcc: function lcc(lat, lng, c) {
-      var fi0 = 0,
-          lambda0 = c * this.radDeg,
-          lambda = lng * this.radDeg,
-          fi1 = 33 * this.radDeg,
-          fi2 = 45 * this.radDeg,
-          fi = lat * this.radDeg,
-          n = Math.log(Math.cos(fi1) * (1 / Math.cos(fi2))) / Math.log(Math.tan(Math.PI / 4 + fi2 / 2) * (1 / Math.tan(Math.PI / 4 + fi1 / 2))),
-          F = Math.cos(fi1) * Math.pow(Math.tan(Math.PI / 4 + fi1 / 2), n) / n,
-          ro = F * Math.pow(1 / Math.tan(Math.PI / 4 + fi / 2), n),
-          ro0 = F * Math.pow(1 / Math.tan(Math.PI / 4 + fi0 / 2), n);
-      return {
-        x: ro * Math.sin(n * (lambda - lambda0)) * this.radius,
-        y: -(ro0 - ro * Math.cos(n * (lambda - lambda0))) * this.radius
-      };
-    }
-    /* lcc_inv(xCoord, yCoord, c) {
-      var x = xCoord / this.radius,
-          y = yCoord / this.radius,
-          fi0 = 0,
-          lambda0 = c * this.radDeg,
-          fi1 = 33 * this.radDeg,
-          fi2 = 45 * this.radDeg,
-          n = Math.log( Math.cos(fi1) * (1 / Math.cos(fi2)) ) / Math.log( Math.tan( Math.PI / 4 + fi2 / 2) * (1 / Math.tan( Math.PI / 4 + fi1 / 2) ) ),
-          F = ( Math.cos(fi1) * Math.pow( Math.tan( Math.PI / 4 + fi1 / 2 ), n ) ) / n,
-          ro0 = F * Math.pow( 1 / Math.tan( Math.PI / 4 + fi0 / 2 ), n ),
-          ro = this.sgn(n) * Math.sqrt(x*x+(ro0-y)*(ro0-y)),
-          theta = Math.atan( x / (ro0 - y) );
-        return {
-        lat: (2 * Math.atan(Math.pow(F/ro, 1/n)) - Math.PI / 2) * this.degRad,
-        lng: (lambda0 + theta / n) * this.degRad
-      };
-    } */
+        if (this.isHovered) {
+          merge(attrs, this.style.selectedHover);
+        }
+      }
 
-  };
-  Proj.degRad = 180 / Math.PI;
-  Proj.radDeg = Math.PI / 180;
-  Proj.radius = 6381372;
+      this.set(attrs);
+    };
+
+    return SVGShapeElement;
+  }(SVGElement);
 
-  function coordsToPoint(lat, lng) {
-    var point,
-        proj = Map.maps[this.params.map].projection,
-        centralMeridian = proj.centralMeridian,
-        inset,
-        bbox;
-    point = Proj[proj.type](lat, lng, centralMeridian);
-    inset = this.getInsetForPoint(point.x, point.y);
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
 
-    if (inset) {
-      bbox = inset.bbox;
-      point.x = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x) * inset.width * this.scale;
-      point.y = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y) * inset.height * this.scale;
-      return {
-        x: point.x + this.transX * this.scale + inset.left * this.scale,
-        y: point.y + this.transY * this.scale + inset.top * this.scale
-      };
+  var SVGTextElement = /*#__PURE__*/function (_SVGShapeElement) {
+    _inheritsLoose(SVGTextElement, _SVGShapeElement);
+
+    function SVGTextElement(config, style) {
+      return _SVGShapeElement.call(this, 'text', config, style) || this;
     }
 
-    return false;
-  }
+    var _proto = SVGTextElement.prototype;
 
-  function getInsetForPoint(x, y) {
-    var index,
-        bbox,
-        insets = Map.maps[this.params.map].insets;
+    _proto.applyAttr = function applyAttr(attr, value) {
+      attr === 'text' ? this.node.textContent = value : _SVGShapeElement.prototype.applyAttr.call(this, attr, value);
+    };
 
-    for (index = 0; index < insets.length; index++) {
-      bbox = insets[index].bbox;
+    return SVGTextElement;
+  }(SVGShapeElement);
 
-      if (x > bbox[0].x && x < bbox[1].x && y > bbox[0].y && y < bbox[1].y) {
-        return insets[index];
-      }
-    }
-  }
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
 
-  function getMarkerPosition(_ref) {
-    var coords = _ref.coords;
+  var SVGImageElement = /*#__PURE__*/function (_SVGShapeElement) {
+    _inheritsLoose(SVGImageElement, _SVGShapeElement);
 
-    if (Map.maps[this.params.map].projection) {
-      return this.coordsToPoint.apply(this, coords);
+    function SVGImageElement(config, style) {
+      return _SVGShapeElement.call(this, 'image', config, style) || this;
     }
 
-    return {
-      x: coords[0] * this.scale + this.transX * this.scale,
-      y: coords[1] * this.scale + this.transY * this.scale
-    };
-  }
+    var _proto = SVGImageElement.prototype;
 
-  function repositionLines() {
-    var point1 = false,
-        point2 = false;
+    _proto.applyAttr = function applyAttr(attr, value) {
+      var imageUrl;
 
-    for (var index in this.lines) {
-      for (var mindex in this.markers) {
-        var marker = this.markers[mindex]; // console.log(this.lines[index], index);
+      if (attr === 'image') {
+        // This get executed when we have url in series.markers[0].scale.someScale.url
+        if (typeof value === 'object') {
+          imageUrl = value.url;
+          this.offset = value.offset || [0, 0];
+        } else {
+          imageUrl = value;
+          this.offset = [0, 0];
+        }
 
-        if (marker.config.name === this.lines[index].config.from) {
-          point1 = this.getMarkerPosition(marker.config);
+        this.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageUrl); // Set width and height then call this `applyAttr` again
+
+        this.width = 23;
+        this.height = 23;
+        this.applyAttr('width', this.width);
+        this.applyAttr('height', this.height);
+        this.applyAttr('x', this.cx - this.width / 2 + this.offset[0]);
+        this.applyAttr('y', this.cy - this.height / 2 + this.offset[1]);
+      } else if (attr == 'cx') {
+        this.cx = value;
+
+        if (this.width) {
+          this.applyAttr('x', value - this.width / 2 + this.offset[0]);
         }
+      } else if (attr == 'cy') {
+        this.cy = value;
 
-        if (marker.config.name === this.lines[index].config.to) {
-          point2 = this.getMarkerPosition(marker.config);
+        if (this.height) {
+          this.applyAttr('y', value - this.height / 2 + this.offset[1]);
         }
+      } else {
+        // This time Call SVGElement
+        _SVGShapeElement.prototype.applyAttr.apply(this, arguments);
       }
+    };
 
-      if (point1 !== false && point2 !== false) {
-        this.lines[index].setStyle({
-          x1: point1.x,
-          y1: point1.y,
-          x2: point2.x,
-          y2: point2.y
-        });
-      }
-    }
-  }
+    return SVGImageElement;
+  }(SVGShapeElement);
 
-  function repositionMarkers() {
-    var point;
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
 
-    for (var index in this.markers) {
-      point = this.getMarkerPosition(this.markers[index].config);
+  var SVGCanvasElement = /*#__PURE__*/function (_SVGElement) {
+    _inheritsLoose(SVGCanvasElement, _SVGElement);
 
-      if (point !== false) {
-        this.markers[index].element.setStyle({
-          cx: point.x,
-          cy: point.y
-        });
-      }
+    function SVGCanvasElement(container) {
+      var _this;
+
+      _this = _SVGElement.call(this, 'svg') || this; // Create svg element for holding the whole map
+
+      _this._container = container; // Create the defs element
+
+      _this._defsElement = new SVGElement('defs'); // Create group element which will hold the paths (regions)
+
+      _this._rootElement = new SVGElement('g', {
+        id: 'jvm-regions-group'
+      }); // Append the defs element to the this.node (SVG tag)
+
+      _this.node.appendChild(_this._defsElement.node); // Append the group to this.node (SVG tag)
+
+
+      _this.node.appendChild(_this._rootElement.node); // Append this.node (SVG tag) to the container
+
+
+      _this._container.appendChild(_this.node);
+
+      return _this;
     }
-  }
 
-  function repositionLabels() {
-    var labels = this.params.labels;
+    var _proto = SVGCanvasElement.prototype;
 
-    if (!labels) {
-      return;
-    } // Regions labels
+    _proto.setSize = function setSize(width, height) {
+      this.node.setAttribute('width', width);
+      this.node.setAttribute('height', height);
+    };
 
+    _proto.applyTransformParams = function applyTransformParams(scale, transX, transY) {
+      this._rootElement.node.setAttribute('transform', "scale(" + scale + ") translate(" + transX + ", " + transY + ")");
+    } // Create `path` element
+    ;
 
-    if (labels.regions) {
-      for (var key in this.regions) {
-        this.regions[key].element.updateLabelPosition();
-      }
-    } // Markers labels
+    _proto.createPath = function createPath(config, style) {
+      var path = new SVGShapeElement('path', config, style);
+      path.node.setAttribute('fill-rule', 'evenodd');
+      return this.add(path);
+    } // Create `circle` element
+    ;
 
+    _proto.createCircle = function createCircle(config, style, group) {
+      var circle = new SVGShapeElement('circle', config, style);
+      return this.add(circle, group);
+    } // Create `line` element
+    ;
 
-    if (labels.markers) {
-      for (var _key in this.markers) {
-        this.markers[_key].element.updateLabelPosition();
+    _proto.createLine = function createLine(config, style, group) {
+      var line = new SVGShapeElement('line', config, style);
+      return this.add(line, group);
+    } // Create `text` element
+    ;
+
+    _proto.createText = function createText(config, style, group) {
+      var text = new SVGTextElement(config, style); // extends SVGShapeElement
+
+      return this.add(text, group);
+    } // Create `image` element
+    ;
+
+    _proto.createImage = function createImage(config, style, group) {
+      var image = new SVGImageElement(config, style); // extends SVGShapeElement
+
+      return this.add(image, group);
+    } // Create `g` element
+    ;
+
+    _proto.createGroup = function createGroup(id) {
+      var group = new SVGElement('g');
+      this.node.appendChild(group.node);
+
+      if (id) {
+        group.node.id = id;
       }
-    }
-  }
 
-  var MapPrototypes = {
-    _setupContainerEvents: setupContainerEvents,
-    _setupElementEvents: setupElementEvents,
-    _setupZoomButtons: setupZoomButtons,
-    _setupContainerTouchEvents: setupContainerTouchEvents,
-    _createRegions: createRegions,
-    _createLines: createLines,
-    _createMarkers: createMarkers,
-    _createSeries: createSeries,
-    _applyTransform: applyTransform,
-    _resize: resize,
-    _setScale: setScale,
-    setFocus: setFocus,
-    updateSize: updateSize,
-    coordsToPoint: coordsToPoint,
-    getInsetForPoint: getInsetForPoint,
-    getMarkerPosition: getMarkerPosition,
-    _repositionLines: repositionLines,
-    _repositionMarkers: repositionMarkers,
-    _repositionLabels: repositionLabels
-  };
+      group.canvas = this;
+      return group;
+    } // Add some element to a spcific group or the root element if the group isn't given
+    ;
+
+    _proto.add = function add(element, group) {
+      group = group || this._rootElement;
+      group.node.appendChild(element.node);
+      return element;
+    };
+
+    return SVGCanvasElement;
+  }(SVGElement);
 
   /**
    * ------------------------------------------------------------------------
@@ -2176,12 +2165,18 @@
       this._tooltip.classList.remove('active');
     };
 
-    _proto.text = function text(string) {
+    _proto.text = function text(string, html) {
+      if (html === void 0) {
+        html = false;
+      }
+
+      var property = html ? 'innerHTML' : 'textContent';
+
       if (!string) {
-        return this._tooltip.textContent;
+        return this._tooltip[property];
       }
 
-      this._tooltip.textContent = string;
+      this._tooltip[property] = string;
     };
 
     _proto.css = function css(_css) {
@@ -2622,7 +2617,7 @@
 
   Map.maps = {};
   Map.defaults = Defaults;
-  Object.assign(Map.prototype, MapPrototypes);
+  Object.assign(Map.prototype, core);
 
   /**
    * jsVectorMap