highcharts 9.3.2 → 10.1.0

package/es-modules/Maps/MapView.js

@@ -8,16 +8,72 @@
  *
  * */
 'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 import defaultOptions from './MapViewOptionsDefault.js';
+import defaultInsetsOptions from './MapViewInsetsOptionsDefault.js';
+import GeoJSONModule from '../Extensions/GeoJSON.js';
+var topo2geo = GeoJSONModule.topo2geo;
+import MapChart from '../Core/Chart/MapChart.js';
+var maps = MapChart.maps;
+import MU from './MapUtilities.js';
+var boundsFromPath = MU.boundsFromPath, pointInPolygon = MU.pointInPolygon;
 import Projection from './Projection.js';
 import U from '../Core/Utilities.js';
-var addEvent = U.addEvent, clamp = U.clamp, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, pick = U.pick, relativeLength = U.relativeLength;
+var addEvent = U.addEvent, clamp = U.clamp, fireEvent = U.fireEvent, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, pick = U.pick, relativeLength = U.relativeLength;
 /**
  * The world size in terms of 10k meters in the Web Mercator projection, to
  * match a 256 square tile to zoom level 0
  */
 var worldSize = 400.979322;
 var tileSize = 256;
+// Compute the zoom from given bounds and the size of the playing field. Used in
+// two places, hence the local function.
+var zoomFromBounds = function (b, playingField) {
+    var width = playingField.width, height = playingField.height, scaleToField = Math.max((b.x2 - b.x1) / (width / tileSize), (b.y2 - b.y1) / (height / tileSize));
+    return Math.log(worldSize / scaleToField) / Math.log(2);
+};
+/*
+const mergeCollections = <
+    T extends Array<AnyRecord|undefined>
+>(a: T, b: T): T => {
+    b.forEach((newer, i): void => {
+        // Only merge by id supported for now. We may consider later to support
+        // more complex rules like those of `Chart.update` with `oneToOne`, but
+        // it is probably not needed. Existing insets can be disabled by
+        // overwriting the `geoBounds` with empty data.
+        if (newer && isString(newer.id)) {
+            const older = U.find(
+                a,
+                (aItem): boolean => (aItem && aItem.id) === newer.id
+            );
+            if (older) {
+                const aIndex = a.indexOf(older);
+                a[aIndex] = merge(older, newer);
+            }
+        }
+    });
+    return a;
+};
+*/
 /**
  * The map view handles zooming and centering on the map, and various
  * client-side projection capabilities.
@@ -35,8 +91,60 @@ var tileSize = 256;
 var MapView = /** @class */ (function () {
     function MapView(chart, options) {
         var _this = this;
+        this.insets = [];
+        this.padding = [0, 0, 0, 0];
+        this.eventsToUnbind = [];
+        var recommendedMapView;
+        var recommendedProjection;
+        if (!(this instanceof MapViewInset)) {
+            // Handle the global map and series-level mapData
+            var geoMaps = __spreadArrays([
+                chart.options.chart.map
+            ], (chart.options.series || []).map(function (s) { return s.mapData; })).map(function (mapData) { return _this.getGeoMap(mapData); });
+            var allGeoBounds_1 = [];
+            geoMaps.forEach(function (geoMap) {
+                if (geoMap) {
+                    // Use the first geo map as main
+                    if (!recommendedMapView) {
+                        recommendedMapView = geoMap['hc-recommended-mapview'];
+                    }
+                    // Combine the bounding boxes of all loaded maps
+                    if (geoMap.bbox) {
+                        var _a = geoMap.bbox, x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+                        allGeoBounds_1.push({ x1: x1, y1: y1, x2: x2, y2: y2 });
+                    }
+                }
+            });
+            // Get the composite bounds
+            var geoBounds = (allGeoBounds_1.length &&
+                MapView.compositeBounds(allGeoBounds_1));
+            // Provide a best-guess recommended projection if not set in the map
+            // or in user options
+            if (geoBounds) {
+                var x1 = geoBounds.x1, y1 = geoBounds.y1, x2 = geoBounds.x2, y2 = geoBounds.y2;
+                recommendedProjection = (x2 - x1 > 180 && y2 - y1 > 90) ?
+                    // Wide angle, go for the world view
+                    {
+                        name: 'EqualEarth'
+                    } :
+                    // Narrower angle, use a projection better suited for local
+                    // view
+                    {
+                        name: 'LambertConformalConic',
+                        parallels: [y1, y2],
+                        rotation: [-(x1 + x2) / 2]
+                    };
+            }
+            // Register the main geo map (from options.chart.map) if set
+            this.geoMap = geoMaps[0];
+        }
         this.userOptions = options || {};
-        var o = merge(defaultOptions, options);
+        var o = merge(defaultOptions, { projection: recommendedProjection }, recommendedMapView, options);
+        // Merge the inset collections by id, or index if id missing
+        var recInsets = recommendedMapView && recommendedMapView.insets, optInsets = options && options.insets;
+        if (recInsets && optInsets) {
+            o.insets = MapView.mergeInsets(recInsets, optInsets);
+        }
         this.chart = chart;
         /**
          * The current center of the view in terms of `[longitude, latitude]`.
@@ -47,6 +155,9 @@ var MapView = /** @class */ (function () {
         this.center = o.center;
         this.options = o;
         this.projection = new Projection(o.projection);
+        // Initialize with full plot box so we don't have to check for undefined
+        // every time we use it
+        this.playingField = chart.plotBox;
         /**
          * The current zoom level of the view.
          * @name Highcharts.MapView#zoom
@@ -54,106 +165,54 @@ var MapView = /** @class */ (function () {
          * @type {number}
          */
         this.zoom = o.zoom || 0;
+        // Create the insets
+        this.createInsets();
         // Initialize and respond to chart size changes
-        addEvent(chart, 'afterSetChartSize', function () {
+        this.eventsToUnbind.push(addEvent(chart, 'afterSetChartSize', function () {
+            _this.playingField = _this.getField();
             if (_this.minZoom === void 0 || // When initializing the chart
                 _this.minZoom === _this.zoom // When resizing the chart
             ) {
                 _this.fitToBounds(void 0, void 0, false);
-                if (isNumber(_this.userOptions.zoom)) {
+                if (
+                // Set zoom only when initializing the chart
+                // (do not overwrite when zooming in/out, #17082)
+                !_this.chart.hasRendered &&
+                    isNumber(_this.userOptions.zoom)) {
                     _this.zoom = _this.userOptions.zoom;
                 }
                 if (_this.userOptions.center) {
                     merge(true, _this.center, _this.userOptions.center);
                 }
             }
-        });
-        // Set up panning for maps. In orthographic projections the globe will
-        // rotate, otherwise adjust the map center.
-        var mouseDownCenterProjected;
-        var mouseDownKey;
-        var mouseDownRotation;
-        var onPan = function (e) {
-            var pinchDown = chart.pointer.pinchDown;
-            var mouseDownX = chart.mouseDownX, mouseDownY = chart.mouseDownY;
-            if (pinchDown.length === 1) {
-                mouseDownX = pinchDown[0].chartX;
-                mouseDownY = pinchDown[0].chartY;
-            }
-            if (typeof mouseDownX === 'number' &&
-                typeof mouseDownY === 'number') {
-                var key = mouseDownX + "," + mouseDownY, _a = e.originalEvent, chartX = _a.chartX, chartY = _a.chartY;
-                // Reset starting position
-                if (key !== mouseDownKey) {
-                    mouseDownKey = key;
-                    mouseDownCenterProjected = _this.projection
-                        .forward(_this.center);
-                    mouseDownRotation = (_this.projection.options.rotation || [0, 0]).slice();
-                }
-                // Panning rotates the globe
-                if (_this.projection.options.name === 'Orthographic' &&
-                    // ... but don't rotate if we're loading only a part of the
-                    // world
-                    (_this.minZoom || Infinity) < 3) {
-                    // Empirical ratio where the globe rotates roughly the same
-                    // speed as moving the pointer across the center of the
-                    // projection
-                    var ratio = 440 / (_this.getScale() * Math.min(chart.plotWidth, chart.plotHeight));
-                    if (mouseDownRotation) {
-                        var lon = (mouseDownX - chartX) * ratio -
-                            mouseDownRotation[0];
-                        var lat = clamp(-mouseDownRotation[1] -
-                            (mouseDownY - chartY) * ratio, -80, 80);
-                        _this.update({
-                            projection: {
-                                rotation: [-lon, -lat]
-                            },
-                            center: [lon, lat],
-                            zoom: _this.zoom
-                        }, true, false);
-                    }
-                }
-                else {
-                    var scale = _this.getScale();
-                    var newCenter = _this.projection.inverse([
-                        mouseDownCenterProjected[0] +
-                            (mouseDownX - chartX) / scale,
-                        mouseDownCenterProjected[1] -
-                            (mouseDownY - chartY) / scale
-                    ]);
-                    _this.setView(newCenter, void 0, true, false);
-                }
-                e.preventDefault();
-            }
-        };
-        addEvent(chart, 'pan', onPan);
-        addEvent(chart, 'touchpan', onPan);
-        // Perform the map zoom by selection
-        addEvent(chart, 'selection', function (evt) {
-            // Zoom in
-            if (!evt.resetSelection) {
-                var x = evt.x - chart.plotLeft;
-                var y = evt.y - chart.plotTop;
-                var _a = _this.pixelsToProjectedUnits({ x: x, y: y }), y1 = _a.y, x1 = _a.x;
-                var _b = _this.pixelsToProjectedUnits({ x: x + evt.width, y: y + evt.height }), y2 = _b.y, x2 = _b.x;
-                _this.fitToBounds({ x1: x1, y1: y1, x2: x2, y2: y2 }, void 0, true, evt.originalEvent.touches ?
-                    // On touch zoom, don't animate, since we're already in
-                    // transformed zoom preview
-                    false :
-                    // On mouse zoom, obey the chart-level animation
-                    void 0);
-                // Only for mouse. Touch users can pinch out.
-                if (!/^touch/.test((evt.originalEvent.type))) {
-                    chart.showResetZoom();
-                }
-                evt.preventDefault();
-                // Reset zoom
-            }
-            else {
-                _this.zoomBy();
-            }
-        });
+        }));
+        this.setUpEvents();
     }
+    // Merge two collections of insets by the id
+    MapView.mergeInsets = function (a, b) {
+        var toObject = function (insets) {
+            var ob = {};
+            insets.forEach(function (inset, i) {
+                ob[inset && inset.id || "i" + i] = inset;
+            });
+            return ob;
+        };
+        var insetsObj = merge(toObject(a), toObject(b)), insets = Object
+            .keys(insetsObj)
+            .map(function (key) { return insetsObj[key]; });
+        return insets;
+    };
+    // Create MapViewInset instances from insets options
+    MapView.prototype.createInsets = function () {
+        var _this = this;
+        var options = this.options, insets = options.insets;
+        if (insets) {
+            insets.forEach(function (item) {
+                var inset = new MapViewInset(_this, merge(options.insetOptions, item));
+                _this.insets.push(inset);
+            });
+        }
+    };
     /**
      * Fit the view to given bounds
      *
@@ -174,9 +233,16 @@ var MapView = /** @class */ (function () {
         if (redraw === void 0) { redraw = true; }
         var b = bounds || this.getProjectedBounds();
         if (b) {
-            var _a = this.chart, plotWidth = _a.plotWidth, plotHeight = _a.plotHeight, pad = pick(padding, bounds ? 0 : this.options.padding), paddingX = relativeLength(pad, plotWidth), paddingY = relativeLength(pad, plotHeight);
-            var scaleToPlotArea = Math.max((b.x2 - b.x1) / ((plotWidth - paddingX) / tileSize), (b.y2 - b.y1) / ((plotHeight - paddingY) / tileSize));
-            var zoom = Math.log(worldSize / scaleToPlotArea) / Math.log(2);
+            var pad = pick(padding, bounds ? 0 : this.options.padding), fullField = this.getField(false), padArr = isArray(pad) ? pad : [pad, pad, pad, pad];
+            this.padding = [
+                relativeLength(padArr[0], fullField.height),
+                relativeLength(padArr[1], fullField.width),
+                relativeLength(padArr[2], fullField.height),
+                relativeLength(padArr[3], fullField.width)
+            ];
+            // Apply the playing field, corrected with padding
+            this.playingField = this.getField();
+            var zoom = zoomFromBounds(b, this.playingField);
             // Reset minZoom when fitting to natural bounds
             if (!bounds) {
                 this.minZoom = zoom;
@@ -188,21 +254,176 @@ var MapView = /** @class */ (function () {
             this.setView(center, zoom, redraw, animation);
         }
     };
+    MapView.prototype.getField = function (padded) {
+        if (padded === void 0) { padded = true; }
+        var padding = padded ? this.padding : [0, 0, 0, 0];
+        return {
+            x: padding[3],
+            y: padding[0],
+            width: this.chart.plotWidth - padding[1] - padding[3],
+            height: this.chart.plotHeight - padding[0] - padding[2]
+        };
+    };
+    MapView.prototype.getGeoMap = function (map) {
+        if (isString(map)) {
+            return maps[map];
+        }
+        if (isObject(map, true)) {
+            if (map.type === 'FeatureCollection') {
+                return map;
+            }
+            if (map.type === 'Topology') {
+                return topo2geo(map);
+            }
+        }
+    };
+    MapView.prototype.getMapBBox = function () {
+        var bounds = this.getProjectedBounds(), scale = this.getScale();
+        if (bounds) {
+            var padding = this.padding, p1 = this.projectedUnitsToPixels({
+                x: bounds.x1,
+                y: bounds.y2
+            }), width = ((bounds.x2 - bounds.x1) * scale +
+                padding[1] + padding[3]), height = ((bounds.y2 - bounds.y1) * scale +
+                padding[0] + padding[2]);
+            return {
+                width: width,
+                height: height,
+                x: p1.x - padding[3],
+                y: p1.y - padding[0]
+            };
+        }
+    };
     MapView.prototype.getProjectedBounds = function () {
         var allBounds = this.chart.series.reduce(function (acc, s) {
             var bounds = s.getProjectedBounds && s.getProjectedBounds();
-            if (bounds) {
+            if (bounds &&
+                s.options.affectsMapView !== false) {
                 acc.push(bounds);
             }
             return acc;
         }, []);
-        return MapView.compositeBounds(allBounds);
+        return this.projection.bounds || MapView.compositeBounds(allBounds);
     };
     MapView.prototype.getScale = function () {
         // A zoom of 0 means the world (360x360 degrees) fits in a 256x256 px
         // tile
         return (tileSize / worldSize) * Math.pow(2, this.zoom);
     };
+    // Calculate the SVG transform to be applied to series groups
+    MapView.prototype.getSVGTransform = function () {
+        var _a = this.playingField, x = _a.x, y = _a.y, width = _a.width, height = _a.height, projectedCenter = this.projection.forward(this.center), flipFactor = this.projection.hasCoordinates ? -1 : 1, scaleX = this.getScale(), scaleY = scaleX * flipFactor, translateX = x + width / 2 - projectedCenter[0] * scaleX, translateY = y + height / 2 - projectedCenter[1] * scaleY;
+        return { scaleX: scaleX, scaleY: scaleY, translateX: translateX, translateY: translateY };
+    };
+    /**
+     * Convert map coordinates in longitude/latitude to pixels
+     *
+     * @function Highcharts.MapView#lonLatToPixels
+     * @since 10.0.0
+     * @param  {Highcharts.MapLonLatObject} lonLat
+     *         The map coordinates
+     * @return {Highcharts.PositionObject|undefined}
+     *         The pixel position
+     */
+    MapView.prototype.lonLatToPixels = function (lonLat) {
+        var pos = this.lonLatToProjectedUnits(lonLat);
+        if (pos) {
+            return this.projectedUnitsToPixels(pos);
+        }
+    };
+    /**
+     * Get projected units from longitude/latitude. Insets are accounted for.
+     * Returns an object with x and y values corresponding to positions on the
+     * projected plane.
+     *
+     * @requires modules/map
+     *
+     * @function Highcharts.MapView#lonLatToProjectedUnits
+     *
+     * @since 10.0.0
+     * @sample maps/series/latlon-to-point/ Find a point from lon/lat
+     *
+     * @param {Highcharts.MapLonLatObject} lonLat Coordinates.
+     *
+     * @return {Highcharts.ProjectedXY} X and Y coordinates in terms of
+     *      projected values
+     */
+    MapView.prototype.lonLatToProjectedUnits = function (lonLat) {
+        var chart = this.chart, mapTransforms = chart.mapTransforms;
+        // Legacy, built-in transforms
+        if (mapTransforms) {
+            for (var transform in mapTransforms) {
+                if (Object.hasOwnProperty.call(mapTransforms, transform) &&
+                    mapTransforms[transform].hitZone) {
+                    var coords = chart.transformFromLatLon(lonLat, mapTransforms[transform]);
+                    if (coords && pointInPolygon(coords, mapTransforms[transform].hitZone.coordinates[0])) {
+                        return coords;
+                    }
+                }
+            }
+            return chart.transformFromLatLon(lonLat, mapTransforms['default'] // eslint-disable-line dot-notation
+            );
+        }
+        // Handle insets
+        for (var _i = 0, _a = this.insets; _i < _a.length; _i++) {
+            var inset = _a[_i];
+            if (inset.options.geoBounds &&
+                pointInPolygon({ x: lonLat.lon, y: lonLat.lat }, inset.options.geoBounds.coordinates[0])) {
+                var insetProjectedPoint = inset.projection.forward([lonLat.lon, lonLat.lat]), pxPoint = inset.projectedUnitsToPixels({ x: insetProjectedPoint[0], y: insetProjectedPoint[1] });
+                return this.pixelsToProjectedUnits(pxPoint);
+            }
+        }
+        var point = this.projection.forward([lonLat.lon, lonLat.lat]);
+        if (!point.outside) {
+            return { x: point[0], y: point[1] };
+        }
+    };
+    /**
+     * Calculate longitude/latitude values for a point or position. Returns an
+     * object with the numeric properties `lon` and `lat`.
+     *
+     * @requires modules/map
+     *
+     * @function Highcharts.MapView#projectedUnitsToLonLat
+     *
+     * @since 10.0.0
+     *
+     * @sample maps/demo/latlon-advanced/ Advanced lat/lon demo
+     *
+     * @param {Highcharts.Point|Highcharts.ProjectedXY} point
+     *        A `Point` instance or anything containing `x` and `y` properties
+     *        with numeric values.
+     *
+     * @return {Highcharts.MapLonLatObject|undefined} An object with `lat` and
+     *         `lon` properties.
+     */
+    MapView.prototype.projectedUnitsToLonLat = function (point) {
+        var chart = this.chart, mapTransforms = chart.mapTransforms;
+        // Legacy, built-in transforms
+        if (mapTransforms) {
+            for (var transform in mapTransforms) {
+                if (Object.hasOwnProperty.call(mapTransforms, transform) &&
+                    mapTransforms[transform].hitZone &&
+                    pointInPolygon(point, mapTransforms[transform].hitZone.coordinates[0])) {
+                    return chart.transformToLatLon(point, mapTransforms[transform]);
+                }
+            }
+            return chart.transformToLatLon(point, mapTransforms['default'] // eslint-disable-line dot-notation
+            );
+        }
+        var pxPoint = this.projectedUnitsToPixels(point);
+        for (var _i = 0, _a = this.insets; _i < _a.length; _i++) {
+            var inset = _a[_i];
+            if (inset.hitZone &&
+                pointInPolygon(pxPoint, inset.hitZone.coordinates[0])) {
+                var insetProjectedPoint = inset
+                    .pixelsToProjectedUnits(pxPoint), coordinates_1 = inset.projection.inverse([insetProjectedPoint.x, insetProjectedPoint.y]);
+                return { lon: coordinates_1[0], lat: coordinates_1[1] };
+            }
+        }
+        var coordinates = this.projection.inverse([point.x, point.y]);
+        return { lon: coordinates[0], lat: coordinates[1] };
+    };
     MapView.prototype.redraw = function (animation) {
         this.chart.series.forEach(function (s) {
             if (s.useMapGeometry) {
@@ -228,7 +449,6 @@ var MapView = /** @class */ (function () {
      */
     MapView.prototype.setView = function (center, zoom, redraw, animation) {
         if (redraw === void 0) { redraw = true; }
-        var zoomingIn = false;
         if (center) {
             this.center = center;
         }
@@ -239,64 +459,59 @@ var MapView = /** @class */ (function () {
             if (typeof this.options.maxZoom === 'number') {
                 zoom = Math.min(zoom, this.options.maxZoom);
             }
-            zoomingIn = zoom > this.zoom;
             this.zoom = zoom;
         }
-        // Stay within the data bounds
         var bounds = this.getProjectedBounds();
-        if (bounds &&
-            // When zooming in, we don't need to adjust to the bounds, as that
-            // could shift the location under the mouse
-            !zoomingIn) {
-            var projectedCenter = this.projection.forward(this.center);
-            var _a = this.chart, plotWidth = _a.plotWidth, plotHeight = _a.plotHeight;
-            var scale = this.getScale();
-            var bottomLeft = this.projectedUnitsToPixels({
+        if (bounds) {
+            var projectedCenter = this.projection.forward(this.center), _a = this.playingField, x = _a.x, y = _a.y, width = _a.width, height = _a.height, scale = this.getScale(), bottomLeft = this.projectedUnitsToPixels({
                 x: bounds.x1,
                 y: bounds.y1
-            });
-            var topRight = this.projectedUnitsToPixels({
+            }), topRight = this.projectedUnitsToPixels({
                 x: bounds.x2,
                 y: bounds.y2
-            });
-            var boundsCenterProjected = [
+            }), boundsCenterProjected = [
                 (bounds.x1 + bounds.x2) / 2,
                 (bounds.y1 + bounds.y2) / 2
             ];
+            // Constrain to data bounds
             // Pixel coordinate system is reversed vs projected
-            var x1 = bottomLeft.x;
-            var y1 = topRight.y;
-            var x2 = topRight.x;
-            var y2 = bottomLeft.y;
+            var x1 = bottomLeft.x, y1 = topRight.y, x2 = topRight.x, y2 = bottomLeft.y;
             // Map smaller than plot area, center it
-            if (x2 - x1 < plotWidth) {
+            if (x2 - x1 < width) {
                 projectedCenter[0] = boundsCenterProjected[0];
                 // Off west
             }
-            else if (x1 < 0 && x2 < plotWidth) {
+            else if (x1 < x && x2 < x + width) {
                 // Adjust eastwards
-                projectedCenter[0] += Math.max(x1, x2 - plotWidth) / scale;
+                projectedCenter[0] += Math.max(x1 - x, x2 - width - x) / scale;
                 // Off east
             }
-            else if (x2 > plotWidth && x1 > 0) {
+            else if (x2 > x + width && x1 > x) {
                 // Adjust westwards
-                projectedCenter[0] += Math.min(x2 - plotWidth, x1) / scale;
+                projectedCenter[0] += Math.min(x2 - width - x, x1 - x) / scale;
             }
             // Map smaller than plot area, center it
-            if (y2 - y1 < plotHeight) {
+            if (y2 - y1 < height) {
                 projectedCenter[1] = boundsCenterProjected[1];
                 // Off north
             }
-            else if (y1 < 0 && y2 < plotHeight) {
+            else if (y1 < y && y2 < y + height) {
                 // Adjust southwards
-                projectedCenter[1] -= Math.max(y1, y2 - plotHeight) / scale;
+                projectedCenter[1] -= Math.max(y1 - y, y2 - height - y) / scale;
                 // Off south
             }
-            else if (y2 > plotHeight && y1 > 0) {
+            else if (y2 > y + height && y1 > y) {
                 // Adjust northwards
-                projectedCenter[1] -= Math.min(y2 - plotHeight, y1) / scale;
+                projectedCenter[1] -= Math.min(y2 - height - y, y1 - y) / scale;
             }
             this.center = this.projection.inverse(projectedCenter);
+            this.insets.forEach(function (inset) {
+                if (inset.options.field) {
+                    inset.hitZone = inset.getHitZone();
+                    inset.playingField = inset.getField();
+                }
+            });
+            this.render();
         }
         fireEvent(this, 'afterSetView');
         if (redraw) {
@@ -312,14 +527,24 @@ var MapView = /** @class */ (function () {
      * @return {Highcharts.PositionObject} The position in pixels
      */
     MapView.prototype.projectedUnitsToPixels = function (pos) {
-        var scale = this.getScale();
-        var projectedCenter = this.projection.forward(this.center);
-        var centerPxX = this.chart.plotWidth / 2;
-        var centerPxY = this.chart.plotHeight / 2;
+        var scale = this.getScale(), projectedCenter = this.projection.forward(this.center), field = this.playingField, centerPxX = field.x + field.width / 2, centerPxY = field.y + field.height / 2;
         var x = centerPxX - scale * (projectedCenter[0] - pos.x);
         var y = centerPxY + scale * (projectedCenter[1] - pos.y);
         return { x: x, y: y };
     };
+    /**
+     * Convert pixel position to longitude and latitude.
+     *
+     * @function Highcharts.MapView#pixelsToLonLat
+     * @since 10.0.0
+     * @param  {Highcharts.PositionObject} pos
+     *         The position in pixels
+     * @return {Highcharts.MapLonLatObject|undefined}
+     *         The map coordinates
+     */
+    MapView.prototype.pixelsToLonLat = function (pos) {
+        return this.projectedUnitsToLonLat(this.pixelsToProjectedUnits(pos));
+    };
     /**
      * Convert pixel position to projected units
      *
@@ -329,15 +554,111 @@ var MapView = /** @class */ (function () {
      * @return {Highcharts.PositionObject} The position in projected units
      */
     MapView.prototype.pixelsToProjectedUnits = function (pos) {
-        var x = pos.x, y = pos.y;
-        var scale = this.getScale();
-        var projectedCenter = this.projection.forward(this.center);
-        var centerPxX = this.chart.plotWidth / 2;
-        var centerPxY = this.chart.plotHeight / 2;
+        var x = pos.x, y = pos.y, scale = this.getScale(), projectedCenter = this.projection.forward(this.center), field = this.playingField, centerPxX = field.x + field.width / 2, centerPxY = field.y + field.height / 2;
         var projectedX = projectedCenter[0] + (x - centerPxX) / scale;
         var projectedY = projectedCenter[1] - (y - centerPxY) / scale;
         return { x: projectedX, y: projectedY };
     };
+    MapView.prototype.setUpEvents = function () {
+        var _this = this;
+        var chart = this.chart;
+        // Set up panning for maps. In orthographic projections the globe will
+        // rotate, otherwise adjust the map center.
+        var mouseDownCenterProjected;
+        var mouseDownKey;
+        var mouseDownRotation;
+        var onPan = function (e) {
+            var pinchDown = chart.pointer.pinchDown, projection = _this.projection;
+            var mouseDownX = chart.mouseDownX, mouseDownY = chart.mouseDownY;
+            if (pinchDown.length === 1) {
+                mouseDownX = pinchDown[0].chartX;
+                mouseDownY = pinchDown[0].chartY;
+            }
+            if (typeof mouseDownX === 'number' &&
+                typeof mouseDownY === 'number') {
+                var key = mouseDownX + "," + mouseDownY, _a = e.originalEvent, chartX = _a.chartX, chartY = _a.chartY;
+                // Reset starting position
+                if (key !== mouseDownKey) {
+                    mouseDownKey = key;
+                    mouseDownCenterProjected = _this.projection
+                        .forward(_this.center);
+                    mouseDownRotation = (_this.projection.options.rotation || [0, 0]).slice();
+                }
+                // Get the natural zoom level of the projection itself when
+                // zoomed to view the full world
+                var worldBounds = projection.def && projection.def.bounds, worldZoom = (worldBounds &&
+                    zoomFromBounds(worldBounds, _this.playingField)) || -Infinity;
+                // Panning rotates the globe
+                if (projection.options.name === 'Orthographic' &&
+                    // ... but don't rotate if we're loading only a part of the
+                    // world
+                    (_this.minZoom || Infinity) < worldZoom * 1.1) {
+                    // Empirical ratio where the globe rotates roughly the same
+                    // speed as moving the pointer across the center of the
+                    // projection
+                    var ratio = 440 / (_this.getScale() * Math.min(chart.plotWidth, chart.plotHeight));
+                    if (mouseDownRotation) {
+                        var lon = (mouseDownX - chartX) * ratio -
+                            mouseDownRotation[0], lat = clamp(-mouseDownRotation[1] -
+                            (mouseDownY - chartY) * ratio, -80, 80), zoom = _this.zoom;
+                        _this.update({
+                            projection: {
+                                rotation: [-lon, -lat]
+                            }
+                        }, false);
+                        _this.zoom = zoom;
+                        chart.redraw(false);
+                    }
+                }
+                else {
+                    var scale = _this.getScale();
+                    var newCenter = _this.projection.inverse([
+                        mouseDownCenterProjected[0] +
+                            (mouseDownX - chartX) / scale,
+                        mouseDownCenterProjected[1] -
+                            (mouseDownY - chartY) / scale
+                    ]);
+                    _this.setView(newCenter, void 0, true, false);
+                }
+                e.preventDefault();
+            }
+        };
+        addEvent(chart, 'pan', onPan);
+        addEvent(chart, 'touchpan', onPan);
+        // Perform the map zoom by selection
+        addEvent(chart, 'selection', function (evt) {
+            // Zoom in
+            if (!evt.resetSelection) {
+                var x = evt.x - chart.plotLeft;
+                var y = evt.y - chart.plotTop;
+                var _a = _this.pixelsToProjectedUnits({ x: x, y: y }), y1 = _a.y, x1 = _a.x;
+                var _b = _this.pixelsToProjectedUnits({ x: x + evt.width, y: y + evt.height }), y2 = _b.y, x2 = _b.x;
+                _this.fitToBounds({ x1: x1, y1: y1, x2: x2, y2: y2 }, void 0, true, evt.originalEvent.touches ?
+                    // On touch zoom, don't animate, since we're already in
+                    // transformed zoom preview
+                    false :
+                    // On mouse zoom, obey the chart-level animation
+                    void 0);
+                // Only for mouse. Touch users can pinch out.
+                if (!/^touch/.test((evt.originalEvent.type))) {
+                    chart.showResetZoom();
+                }
+                evt.preventDefault();
+                // Reset zoom
+            }
+            else {
+                _this.zoomBy();
+            }
+        });
+    };
+    MapView.prototype.render = function () {
+        // We need a group for the insets
+        if (!this.group) {
+            this.group = this.chart.renderer.g('map-view')
+                .attr({ zIndex: 4 })
+                .add();
+        }
+    };
     /**
      * Update the view with given options
      *
@@ -354,18 +675,41 @@ var MapView = /** @class */ (function () {
         if (redraw === void 0) { redraw = true; }
         var newProjection = options.projection;
         var isDirtyProjection = newProjection && ((Projection.toString(newProjection) !==
-            Projection.toString(this.options.projection)));
+            Projection.toString(this.options.projection))), isDirtyInsets = false;
         merge(true, this.userOptions, options);
         merge(true, this.options, options);
-        if (isDirtyProjection) {
+        // If anything changed with the insets, destroy them all and create
+        // again below
+        if ('insets' in options) {
+            this.insets.forEach(function (inset) { return inset.destroy(); });
+            this.insets.length = 0;
+            isDirtyInsets = true;
+        }
+        if (isDirtyProjection || isDirtyInsets) {
             this.chart.series.forEach(function (series) {
+                var groups = series.transformGroups;
                 if (series.clearBounds) {
                     series.clearBounds();
                 }
                 series.isDirty = true;
                 series.isDirtyData = true;
+                // Destroy inset transform groups
+                if (isDirtyInsets && groups) {
+                    while (groups.length > 1) {
+                        var group = groups.pop();
+                        if (group) {
+                            group.destroy();
+                        }
+                    }
+                }
             });
-            this.projection = new Projection(this.options.projection);
+            if (isDirtyProjection) {
+                this.projection = new Projection(this.options.projection);
+            }
+            // Create new insets
+            if (isDirtyInsets) {
+                this.createInsets();
+            }
             // Fit to natural bounds if center/zoom are not explicitly given
             if (!options.center && !isNumber(options.zoom)) {
                 this.fitToBounds(void 0, void 0, false);
@@ -447,4 +791,135 @@ var MapView = /** @class */ (function () {
     };
     return MapView;
 }());
+// Putting this in the same file due to circular dependency with MapView
+var MapViewInset = /** @class */ (function (_super) {
+    __extends(MapViewInset, _super);
+    function MapViewInset(mapView, options) {
+        var _this = _super.call(this, mapView.chart, options) || this;
+        _this.id = options.id;
+        _this.mapView = mapView;
+        _this.options = merge(defaultInsetsOptions, options);
+        _this.allBounds = [];
+        if (_this.options.geoBounds) {
+            // The path in projected units in the map view's main projection.
+            // This is used for hit testing where the points should render.
+            var path = mapView.projection.path(_this.options.geoBounds);
+            _this.geoBoundsProjectedBox = boundsFromPath(path);
+            _this.geoBoundsProjectedPolygon = path.map(function (segment) { return [
+                segment[1] || 0,
+                segment[2] || 0
+            ]; });
+        }
+        return _this;
+    }
+    // Get the playing field in pixels
+    MapViewInset.prototype.getField = function (padded) {
+        if (padded === void 0) { padded = true; }
+        var hitZone = this.hitZone;
+        if (hitZone) {
+            var padding = padded ? this.padding : [0, 0, 0, 0], polygon = hitZone.coordinates[0], xs = polygon.map(function (xy) { return xy[0]; }), ys = polygon.map(function (xy) { return xy[1]; }), x = Math.min.apply(0, xs) + padding[3], x2 = Math.max.apply(0, xs) - padding[1], y = Math.min.apply(0, ys) + padding[0], y2 = Math.max.apply(0, ys) - padding[2];
+            if (isNumber(x) && isNumber(y)) {
+                return {
+                    x: x,
+                    y: y,
+                    width: x2 - x,
+                    height: y2 - y
+                };
+            }
+        }
+        // Fall back to plot area
+        return _super.prototype.getField.call(this, padded);
+    };
+    // Get the hit zone in pixels
+    MapViewInset.prototype.getHitZone = function () {
+        var _a = this, chart = _a.chart, mapView = _a.mapView, options = _a.options, coordinates = (options.field || {}).coordinates;
+        if (coordinates) {
+            var polygon = coordinates[0];
+            if (options.units === 'percent') {
+                var relativeTo_1 = options.relativeTo === 'mapBoundingBox' &&
+                    mapView.getMapBBox() ||
+                    merge(chart.plotBox, { x: 0, y: 0 });
+                polygon = polygon.map(function (xy) { return [
+                    relativeLength(xy[0] + "%", relativeTo_1.width, relativeTo_1.x),
+                    relativeLength(xy[1] + "%", relativeTo_1.height, relativeTo_1.y)
+                ]; });
+            }
+            return {
+                type: 'Polygon',
+                coordinates: [polygon]
+            };
+        }
+    };
+    MapViewInset.prototype.getProjectedBounds = function () {
+        return MapView.compositeBounds(this.allBounds);
+    };
+    // Determine whether a point on the main projected plane is inside the
+    // geoBounds of the inset.
+    MapViewInset.prototype.isInside = function (point) {
+        var _a = this, geoBoundsProjectedBox = _a.geoBoundsProjectedBox, geoBoundsProjectedPolygon = _a.geoBoundsProjectedPolygon;
+        return Boolean(
+        // First we do a pre-pass to check whether the test point is inside
+        // the rectangular bounding box of the polygon. This is less
+        // expensive and will rule out most cases.
+        geoBoundsProjectedBox &&
+            point.x >= geoBoundsProjectedBox.x1 &&
+            point.x <= geoBoundsProjectedBox.x2 &&
+            point.y >= geoBoundsProjectedBox.y1 &&
+            point.y <= geoBoundsProjectedBox.y2 &&
+            // Next, do the more expensive check whether the point is inside the
+            // polygon itself.
+            geoBoundsProjectedPolygon &&
+            pointInPolygon(point, geoBoundsProjectedPolygon));
+    };
+    // Render the map view inset with the border path
+    MapViewInset.prototype.render = function () {
+        var _a = this, chart = _a.chart, mapView = _a.mapView, options = _a.options, borderPath = options.borderPath || options.field;
+        if (borderPath && mapView.group) {
+            var animate = true;
+            if (!this.border) {
+                this.border = chart.renderer
+                    .path()
+                    .addClass('highcharts-mapview-inset-border')
+                    .add(mapView.group);
+                animate = false;
+            }
+            if (!chart.styledMode) {
+                this.border.attr({
+                    stroke: options.borderColor,
+                    'stroke-width': options.borderWidth
+                });
+            }
+            var crisp_1 = Math.round(this.border.strokeWidth()) % 2 / 2, field_1 = (options.relativeTo === 'mapBoundingBox' &&
+                mapView.getMapBBox()) || mapView.playingField;
+            var d = (borderPath.coordinates || []).reduce(function (d, lineString) {
+                return lineString.reduce(function (d, point, i) {
+                    var x = point[0], y = point[1];
+                    if (options.units === 'percent') {
+                        x = chart.plotLeft + relativeLength(x + "%", field_1.width, field_1.x);
+                        y = chart.plotTop + relativeLength(y + "%", field_1.height, field_1.y);
+                    }
+                    x = Math.floor(x) + crisp_1;
+                    y = Math.floor(y) + crisp_1;
+                    d.push(i === 0 ? ['M', x, y] : ['L', x, y]);
+                    return d;
+                }, d);
+            }, []);
+            // Apply the border path
+            this.border[animate ? 'animate' : 'attr']({ d: d });
+        }
+    };
+    MapViewInset.prototype.destroy = function () {
+        if (this.border) {
+            this.border = this.border.destroy();
+        }
+        this.eventsToUnbind.forEach(function (f) { return f(); });
+    };
+    // No chart-level events for insets
+    MapViewInset.prototype.setUpEvents = function () { };
+    return MapViewInset;
+}(MapView));
+// Initialize the MapView after initialization, but before firstRender
+addEvent(MapChart, 'afterInit', function () {
+    this.mapView = new MapView(this, this.options.mapView);
+});
 export default MapView;