highcharts 9.3.1 → 10.0.0

package/es-modules/Series/Map/MapSeries.js

@@ -23,14 +23,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import A from '../../Core/Animation/AnimationUtilities.js';
 var animObject = A.animObject;
-import ColorMapComposition from '../ColorMapComposition.js';
-var colorMapSeriesMixin = ColorMapComposition.colorMapSeriesMixin;
+import ColorMapMixin from '../ColorMapMixin.js';
 import CU from '../CenteredUtilities.js';
 import H from '../../Core/Globals.js';
 var noop = H.noop;
 import LegendSymbol from '../../Core/Legend/LegendSymbol.js';
 import MapChart from '../../Core/Chart/MapChart.js';
-var maps = MapChart.maps, splitPath = MapChart.splitPath;
+var splitPath = MapChart.splitPath;
 import MapPoint from './MapPoint.js';
 import MapView from '../../Maps/MapView.js';
 import Series from '../../Core/Series/Series.js';
@@ -40,7 +39,7 @@ var
 _a = SeriesRegistry.seriesTypes, ColumnSeries = _a.column, ScatterSeries = _a.scatter;
 import SVGRenderer from '../../Core/Renderer/SVG/SVGRenderer.js';
 import U from '../../Core/Utilities.js';
-var extend = U.extend, fireEvent = U.fireEvent, getNestedProperty = U.getNestedProperty, isArray = U.isArray, isNumber = U.isNumber, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
+var extend = U.extend, find = U.find, fireEvent = U.fireEvent, getNestedProperty = U.getNestedProperty, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
 /* *
  *
  *  Class
@@ -68,7 +67,7 @@ var MapSeries = /** @class */ (function (_super) {
         _this.joinBy = void 0;
         _this.options = void 0;
         _this.points = void 0;
-        _this.transformGroup = void 0;
+        _this.processedData = [];
         return _this;
         /* eslint-enable valid-jsdoc */
     }
@@ -135,7 +134,10 @@ var MapSeries = /** @class */ (function (_super) {
                     scaleX: 1,
                     scaleY: 1,
                     opacity: 1
-                });
+                }, this.chart.options.drilldown.animation);
+                if (chart.drilldown) {
+                    chart.drilldown.fadeInGroup(this.dataLabelsGroup);
+                }
             }
         }
     };
@@ -167,6 +169,7 @@ var MapSeries = /** @class */ (function (_super) {
     MapSeries.prototype.clearBounds = function () {
         this.points.forEach(function (point) {
             delete point.bounds;
+            delete point.insetIndex;
             delete point.projectedPath;
         });
         delete this.bounds;
@@ -200,29 +203,43 @@ var MapSeries = /** @class */ (function (_super) {
      */
     MapSeries.prototype.drawPoints = function () {
         var _this = this;
-        var _a = this, chart = _a.chart, group = _a.group, svgTransform = _a.svgTransform;
+        var _a = this, chart = _a.chart, group = _a.group, _b = _a.transformGroups, transformGroups = _b === void 0 ? [] : _b;
         var mapView = chart.mapView, renderer = chart.renderer;
-        // Set a group that handles transform during zooming and panning in
-        // order to preserve clipping on series.group
-        if (!this.transformGroup) {
-            this.transformGroup = renderer.g().add(group);
-            this.transformGroup.survive = true;
+        if (!mapView) {
+            return;
+        }
+        // Set groups that handle transform during zooming and panning in order
+        // to preserve clipping on series.group
+        this.transformGroups = transformGroups;
+        if (!transformGroups[0]) {
+            transformGroups[0] = renderer.g().add(group);
         }
+        mapView.insets.forEach(function (inset, i) {
+            if (!transformGroups[i + 1]) {
+                transformGroups.push(renderer.g().add(group));
+            }
+        });
         // Draw the shapes again
         if (this.doFullTranslate()) {
             // Individual point actions.
-            if (chart.hasRendered && !chart.styledMode) {
-                this.points.forEach(function (point) {
-                    // Restore state color on update/redraw (#3529)
-                    if (point.shapeArgs) {
-                        point.shapeArgs.fill = _this.pointAttribs(point, point.state).fill;
-                    }
-                });
-            }
-            // Draw them in transformGroup
-            this.group = this.transformGroup;
+            this.points.forEach(function (point) {
+                var graphic = point.graphic, shapeArgs = point.shapeArgs;
+                // Points should be added in the corresponding transform group
+                point.group = transformGroups[typeof point.insetIndex === 'number' ?
+                    point.insetIndex + 1 :
+                    0];
+                // When the point has been moved between insets after
+                // MapView.update
+                if (graphic && graphic.parentGroup !== point.group) {
+                    graphic.add(point.group);
+                }
+                // Restore state color on update/redraw (#3529)
+                if (shapeArgs && chart.hasRendered && !chart.styledMode) {
+                    shapeArgs.fill = _this.pointAttribs(point, point.state).fill;
+                }
+            });
+            // Draw the points
             ColumnSeries.prototype.drawPoints.apply(this);
-            this.group = group; // Reset
             // Add class names
             this.points.forEach(function (point) {
                 if (point.graphic) {
@@ -232,11 +249,10 @@ var MapSeries = /** @class */ (function (_super) {
                             'highcharts-name-' +
                                 point.name.replace(/ /g, '-').toLowerCase();
                     }
-                    if (point.properties &&
-                        point.properties['hc-key']) {
+                    if (point.properties && point.properties['hc-key']) {
                         className +=
                             ' highcharts-key-' +
-                                point.properties['hc-key'].toLowerCase();
+                                point.properties['hc-key'].toString().toLowerCase();
                     }
                     if (className) {
                         point.graphic.addClass(className);
@@ -249,55 +265,54 @@ var MapSeries = /** @class */ (function (_super) {
             });
         }
         // Apply the SVG transform
-        if (mapView && svgTransform) {
-            var strokeWidth_1 = pick(this.options[(this.pointAttrToOptions &&
-                this.pointAttrToOptions['stroke-width']) || 'borderWidth'], 1 // Styled mode
+        transformGroups.forEach(function (transformGroup, i) {
+            var view = i === 0 ? mapView : mapView.insets[i - 1], svgTransform = view.getSVGTransform(), strokeWidth = pick(_this.options[(_this.pointAttrToOptions &&
+                _this.pointAttrToOptions['stroke-width']) || 'borderWidth'], 1 // Styled mode
             );
-            /* Animate or move to the new zoom level. In order to prevent
-                flickering as the different transform components are set out
-                of sync (#5991), we run a fake animator attribute and set
-                scale and translation synchronously in the same step.
+            /*
+            Animate or move to the new zoom level. In order to prevent
+            flickering as the different transform components are set out of sync
+            (#5991), we run a fake animator attribute and set scale and
+            translation synchronously in the same step.
 
-                A possible improvement to the API would be to handle this in
-                the renderer or animation engine itself, to ensure that when
-                we are animating multiple properties, we make sure that each
-                step for each property is performed in the same step. Also,
-                for symbols and for transform properties, it should induce a
-                single updateTransform and symbolAttr call. */
-            var scale_1 = svgTransform.scaleX;
-            var flipFactor_1 = svgTransform.scaleY > 0 ? 1 : -1;
-            var transformGroup_1 = this.transformGroup;
+            A possible improvement to the API would be to handle this in the
+            renderer or animation engine itself, to ensure that when we are
+            animating multiple properties, we make sure that each step for each
+            property is performed in the same step. Also, for symbols and for
+            transform properties, it should induce a single updateTransform and
+            symbolAttr call.
+            */
+            var scale = svgTransform.scaleX;
+            var flipFactor = svgTransform.scaleY > 0 ? 1 : -1;
             if (renderer.globalAnimation && chart.hasRendered) {
-                var startTranslateX_1 = Number(transformGroup_1.attr('translateX'));
-                var startTranslateY_1 = Number(transformGroup_1.attr('translateY'));
-                var startScale_1 = Number(transformGroup_1.attr('scaleX'));
+                var startTranslateX_1 = Number(transformGroup.attr('translateX'));
+                var startTranslateY_1 = Number(transformGroup.attr('translateY'));
+                var startScale_1 = Number(transformGroup.attr('scaleX'));
                 var step = function (now, fx) {
                     var scaleStep = startScale_1 +
-                        (scale_1 - startScale_1) * fx.pos;
-                    transformGroup_1.attr({
-                        translateX: (startTranslateX_1 +
-                            (svgTransform.translateX - startTranslateX_1) * fx.pos),
-                        translateY: (startTranslateY_1 +
-                            (svgTransform.translateY - startTranslateY_1) * fx.pos),
+                        (scale - startScale_1) * fx.pos;
+                    transformGroup.attr({
+                        translateX: (startTranslateX_1 + (svgTransform.translateX - startTranslateX_1) * fx.pos),
+                        translateY: (startTranslateY_1 + (svgTransform.translateY - startTranslateY_1) * fx.pos),
                         scaleX: scaleStep,
-                        scaleY: scaleStep * flipFactor_1
+                        scaleY: scaleStep * flipFactor
                     });
-                    group.element.setAttribute('stroke-width', strokeWidth_1 / scaleStep);
+                    transformGroup.element.setAttribute('stroke-width', strokeWidth / scaleStep);
                 };
-                transformGroup_1
+                transformGroup
                     .attr({ animator: 0 })
                     .animate({ animator: 1 }, { step: step });
                 // When dragging or first rendering, animation is off
             }
             else {
-                transformGroup_1.attr(svgTransform);
+                transformGroup.attr(svgTransform);
                 // Set the stroke-width directly on the group element so the
                 // children inherit it. We need to use setAttribute directly,
                 // because the stroke-widthSetter method expects a stroke color
                 // also to be set.
-                group.element.setAttribute('stroke-width', strokeWidth_1 / scale_1);
+                transformGroup.element.setAttribute('stroke-width', strokeWidth / scale);
             }
-        }
+        });
         this.drawMapDataLabels();
     };
     /**
@@ -305,9 +320,8 @@ var MapSeries = /** @class */ (function (_super) {
      *
      */
     MapSeries.prototype.getProjectedBounds = function () {
-        if (!this.bounds) {
-            var MAX_VALUE_1 = Number.MAX_VALUE, projection_1 = this.chart.mapView &&
-                this.chart.mapView.projection, allBounds_1 = [];
+        if (!this.bounds && this.chart.mapView) {
+            var MAX_VALUE = Number.MAX_VALUE, _a = this.chart.mapView, insets_1 = _a.insets, projection_1 = _a.projection, allBounds_1 = [];
             // Find the bounding box of each point
             (this.points || []).forEach(function (point) {
                 if (point.path || point.geometry) {
@@ -323,37 +337,32 @@ var MapSeries = /** @class */ (function (_super) {
                     }
                     // The first time a map point is used, analyze its box
                     if (!point.bounds) {
-                        var path = MapPoint.getProjectedPath(point, projection_1), properties = point.properties;
-                        var x2_1 = -MAX_VALUE_1, x1_1 = MAX_VALUE_1, y2_1 = -MAX_VALUE_1, y1_1 = MAX_VALUE_1, validBounds_1;
-                        path.forEach(function (seg) {
-                            var x = seg[seg.length - 2];
-                            var y = seg[seg.length - 1];
-                            if (typeof x === 'number' &&
-                                typeof y === 'number') {
-                                x1_1 = Math.min(x1_1, x);
-                                x2_1 = Math.max(x2_1, x);
-                                y1_1 = Math.min(y1_1, y);
-                                y2_1 = Math.max(y2_1, y);
-                                validBounds_1 = true;
-                            }
-                        });
-                        if (validBounds_1) {
-                            // Cache point bounding box for use to position data
-                            // labels, bubbles etc
-                            var propMiddleX = properties && properties['hc-middle-x'], midX = (x1_1 + (x2_1 - x1_1) * pick(point.middleX, isNumber(propMiddleX) ? propMiddleX : 0.5)), propMiddleY = properties && properties['hc-middle-y'];
-                            var middleYFraction = pick(point.middleY, isNumber(propMiddleY) ? propMiddleY : 0.5);
-                            // No geographic geometry, only path given => flip
-                            if (!point.geometry) {
-                                middleYFraction = 1 - middleYFraction;
-                            }
-                            var midY = y2_1 - (y2_1 - y1_1) * middleYFraction;
-                            point.bounds = { midX: midX, midY: midY, x1: x1_1, y1: y1_1, x2: x2_1, y2: y2_1 };
+                        var bounds = point.getProjectedBounds(projection_1);
+                        if (bounds) {
                             point.labelrank = pick(point.labelrank, 
                             // Bigger shape, higher rank
-                            (x2_1 - x1_1) * (y2_1 - y1_1));
+                            ((bounds.x2 - bounds.x1) *
+                                (bounds.y2 - bounds.y1)));
+                            var midX_1 = bounds.midX, midY_1 = bounds.midY;
+                            if (insets_1 && isNumber(midX_1) && isNumber(midY_1)) {
+                                var inset = find(insets_1, function (inset) { return inset.isInside({
+                                    x: midX_1, y: midY_1
+                                }); });
+                                if (inset) {
+                                    // Project again, but with the inset
+                                    // projection
+                                    delete point.projectedPath;
+                                    bounds = point.getProjectedBounds(inset.projection);
+                                    if (bounds) {
+                                        inset.allBounds.push(bounds);
+                                    }
+                                    point.insetIndex = insets_1.indexOf(inset);
+                                }
+                            }
+                            point.bounds = bounds;
                         }
                     }
-                    if (point.bounds) {
+                    if (point.bounds && point.insetIndex === void 0) {
                         allBounds_1.push(point.bounds);
                     }
                 }
@@ -400,37 +409,70 @@ var MapSeries = /** @class */ (function (_super) {
         return attr;
     };
     /**
-     * Extend setData to join in mapData. If the allAreas option is true, all
-     * areas from the mapData are used, and those that don't correspond to a
-     * data value are given null values.
+     * Extend setData to call processData and generatePoints immediately.
      * @private
      */
-    MapSeries.prototype.setData = function (data, redraw, animation, updatePoints) {
-        var options = this.options, chartOptions = this.chart.options.chart, globalMapData = chartOptions && chartOptions.map, mapData = options.mapData, joinBy = this.joinBy, pointArrayMap = options.keys || this.pointArrayMap, dataUsed = [], mapMap = {}, mapPoint, mapTransforms = this.chart.mapTransforms, props, i;
-        // Collect mapData from chart options if not defined on series
-        if (!mapData && globalMapData) {
-            mapData = typeof globalMapData === 'string' ?
-                maps[globalMapData] :
-                globalMapData;
+    MapSeries.prototype.setData = function () {
+        _super.prototype.setData.apply(this, arguments);
+        this.processData();
+        this.generatePoints();
+    };
+    /**
+     * Extend processData to join in mapData. If the allAreas option is true,
+     * all areas from the mapData are used, and those that don't correspond to a
+     * data value are given null values. The results are stored in
+     * `processedData` in order to avoid mutating `data`.
+     * @private
+     */
+    MapSeries.prototype.processData = function () {
+        var options = this.options, data = options.data, chartOptions = this.chart.options.chart, joinBy = this.joinBy, pointArrayMap = options.keys || this.pointArrayMap, dataUsed = [], mapMap = {};
+        var mapView = this.chart.mapView, mapDataObject = mapView && (
+        // Get map either from series or global
+        isObject(options.mapData, true) ?
+            mapView.getGeoMap(options.mapData) : mapView.geoMap), mapTransforms = this.chart.mapTransforms, mapPoint, props, i;
+        // Pick up transform definitions for chart
+        this.chart.mapTransforms = mapTransforms =
+            chartOptions.mapTransforms ||
+                mapDataObject && mapDataObject['hc-transform'] ||
+                mapTransforms;
+        // Cache cos/sin of transform rotation angle
+        if (mapTransforms) {
+            objectEach(mapTransforms, function (transform) {
+                if (transform.rotation) {
+                    transform.cosAngle = Math.cos(transform.rotation);
+                    transform.sinAngle = Math.sin(transform.rotation);
+                }
+            });
+        }
+        var mapData;
+        if (isArray(options.mapData)) {
+            mapData = options.mapData;
+        }
+        else if (mapDataObject && mapDataObject.type === 'FeatureCollection') {
+            this.mapTitle = mapDataObject.title;
+            mapData = H.geojson(mapDataObject, this.type, this);
         }
-        // Pick up numeric values, add index
-        // Convert Array point definitions to objects using pointArrayMap
+        // Reset processedData
+        this.processedData = [];
+        var processedData = this.processedData;
+        // Pick up numeric values, add index. Convert Array point definitions to
+        // objects using pointArrayMap.
         if (data) {
             data.forEach(function (val, i) {
                 var ix = 0;
                 if (isNumber(val)) {
-                    data[i] = {
+                    processedData[i] = {
                         value: val
                     };
                 }
                 else if (isArray(val)) {
-                    data[i] = {};
+                    processedData[i] = {};
                     // Automatically copy first item to hc-key if there is
                     // an extra leading string
                     if (!options.keys &&
                         val.length > pointArrayMap.length &&
                         typeof val[0] === 'string') {
-                        data[i]['hc-key'] = val[0];
+                        processedData[i]['hc-key'] = val[0];
                         ++ix;
                     }
                     // Run through pointArrayMap and what's left of the
@@ -439,40 +481,24 @@ var MapSeries = /** @class */ (function (_super) {
                         if (pointArrayMap[j] &&
                             typeof val[ix] !== 'undefined') {
                             if (pointArrayMap[j].indexOf('.') > 0) {
-                                MapPoint.prototype.setNestedProperty(data[i], val[ix], pointArrayMap[j]);
+                                MapPoint.prototype.setNestedProperty(processedData[i], val[ix], pointArrayMap[j]);
                             }
                             else {
-                                data[i][pointArrayMap[j]] =
+                                processedData[i][pointArrayMap[j]] =
                                     val[ix];
                             }
                         }
                     }
                 }
-                if (joinBy && joinBy[0] === '_i') {
-                    data[i]._i = i;
+                else {
+                    processedData[i] = data[i];
                 }
-            });
-        }
-        // this.getBox(data as any);
-        // Pick up transform definitions for chart
-        this.chart.mapTransforms = mapTransforms =
-            chartOptions.mapTransforms ||
-                mapData && mapData['hc-transform'] ||
-                mapTransforms;
-        // Cache cos/sin of transform rotation angle
-        if (mapTransforms) {
-            objectEach(mapTransforms, function (transform) {
-                if (transform.rotation) {
-                    transform.cosAngle = Math.cos(transform.rotation);
-                    transform.sinAngle = Math.sin(transform.rotation);
+                if (joinBy && joinBy[0] === '_i') {
+                    processedData[i]._i = i;
                 }
             });
         }
         if (mapData) {
-            if (mapData.type === 'FeatureCollection') {
-                this.mapTitle = mapData.title;
-                mapData = H.geojson(mapData, this.type, this);
-            }
             this.mapData = mapData;
             this.mapMap = {};
             for (i = 0; i < mapData.length; i++) {
@@ -487,9 +513,9 @@ var MapSeries = /** @class */ (function (_super) {
             }
             this.mapMap = mapMap;
             // Registered the point codes that actually hold data
-            if (data && joinBy[1]) {
+            if (joinBy[1]) {
                 var joinKey_1 = joinBy[1];
-                data.forEach(function (pointOptions) {
+                processedData.forEach(function (pointOptions) {
                     var mapKey = getNestedProperty(joinKey_1, pointOptions);
                     if (mapMap[mapKey]) {
                         dataUsed.push(mapMap[mapKey]);
@@ -497,37 +523,35 @@ var MapSeries = /** @class */ (function (_super) {
                 });
             }
             if (options.allAreas) {
-                // this.getBox(mapData);
-                data = data || [];
-                // Registered the point codes that actually hold data
+                // Register the point codes that actually hold data
                 if (joinBy[1]) {
                     var joinKey_2 = joinBy[1];
-                    data.forEach(function (pointOptions) {
+                    processedData.forEach(function (pointOptions) {
                         dataUsed.push(getNestedProperty(joinKey_2, pointOptions));
                     });
                 }
                 // Add those map points that don't correspond to data, which
-                // will be drawn as null points
-                dataUsed = ('|' + dataUsed.map(function (point) {
-                    return point && point[joinBy[0]];
-                }).join('|') + '|'); // Faster than array.indexOf
+                // will be drawn as null points. Searching a string is faster
+                // than Array.indexOf
+                var dataUsedString_1 = ('|' +
+                    dataUsed
+                        .map(function (point) {
+                        return point && point[joinBy[0]];
+                    })
+                        .join('|') +
+                    '|');
                 mapData.forEach(function (mapPoint) {
                     if (!joinBy[0] ||
-                        dataUsed.indexOf('|' + mapPoint[joinBy[0]] + '|') === -1) {
-                        data.push(merge(mapPoint, { value: null }));
-                        // #5050 - adding all areas causes the update
-                        // optimization of setData to kick in, even though
-                        // the point order has changed
-                        updatePoints = false;
+                        dataUsedString_1.indexOf('|' + mapPoint[joinBy[0]] + '|') === -1) {
+                        processedData.push(merge(mapPoint, { value: null }));
                     }
                 });
-            } /* else {
-                this.getBox(dataUsed); // Issue #4784
-            } */
+            }
         }
-        Series.prototype.setData.call(this, data, redraw, animation, updatePoints);
-        this.processData();
-        this.generatePoints();
+        // The processedXData array is used by general chart logic for checking
+        // data length in various scanarios
+        this.processedXData = new Array(processedData.length);
+        return void 0;
     };
     /**
      * Extend setOptions by picking up the joinBy option and applying it to a
@@ -559,42 +583,30 @@ var MapSeries = /** @class */ (function (_super) {
             delete this.bounds;
             this.getProjectedBounds();
         }
-        // Calculate the SVG transform
-        var svgTransform;
         if (mapView) {
-            var scale = mapView.getScale();
-            var _a = mapView.projection.forward(mapView.center), x = _a[0], y = _a[1];
-            // When dealing with unprojected coordinates, y axis is flipped.
-            var flipFactor = mapView.projection.hasCoordinates ? -1 : 1;
-            var translateX = this.chart.plotWidth / 2 - x * scale;
-            var translateY = this.chart.plotHeight / 2 - y * scale * flipFactor;
-            svgTransform = {
-                scaleX: scale,
-                scaleY: scale * flipFactor,
-                translateX: translateX,
-                translateY: translateY
-            };
-            this.svgTransform = svgTransform;
+            var mainSvgTransform_1 = mapView.getSVGTransform();
+            series.points.forEach(function (point) {
+                var svgTransform = (isNumber(point.insetIndex) &&
+                    mapView.insets[point.insetIndex].getSVGTransform()) || mainSvgTransform_1;
+                // Record the middle point (loosely based on centroid),
+                // determined by the middleX and middleY options.
+                if (svgTransform &&
+                    point.bounds &&
+                    isNumber(point.bounds.midX) &&
+                    isNumber(point.bounds.midY)) {
+                    point.plotX = point.bounds.midX * svgTransform.scaleX +
+                        svgTransform.translateX;
+                    point.plotY = point.bounds.midY * svgTransform.scaleY +
+                        svgTransform.translateY;
+                }
+                if (doFullTranslate) {
+                    point.shapeType = 'path';
+                    point.shapeArgs = {
+                        d: MapPoint.getProjectedPath(point, projection)
+                    };
+                }
+            });
         }
-        series.points.forEach(function (point) {
-            // Record the middle point (loosely based on centroid),
-            // determined by the middleX and middleY options.
-            if (svgTransform &&
-                point.bounds &&
-                isNumber(point.bounds.midX) &&
-                isNumber(point.bounds.midY)) {
-                point.plotX = point.bounds.midX * svgTransform.scaleX +
-                    svgTransform.translateX;
-                point.plotY = point.bounds.midY * svgTransform.scaleY +
-                    svgTransform.translateY;
-            }
-            if (doFullTranslate) {
-                point.shapeType = 'path';
-                point.shapeArgs = {
-                    d: MapPoint.getProjectedPath(point, projection)
-                };
-            }
-        });
         fireEvent(series, 'afterTranslate');
     };
     /**
@@ -610,6 +622,16 @@ var MapSeries = /** @class */ (function (_super) {
      * @optionparent plotOptions.map
      */
     MapSeries.defaultOptions = merge(ScatterSeries.defaultOptions, {
+        /**
+         * Whether the MapView takes this series into account when computing the
+         * default zoom and center of the map.
+         *
+         * @sample maps/series/affectsmapview/
+         *         US map with world map backdrop
+         *
+         * @since 10.0.0
+         */
+        affectsMapView: true,
         animation: false,
         dataLabels: {
             crop: false,
@@ -842,8 +864,9 @@ var MapSeries = /** @class */ (function (_super) {
 }(ScatterSeries));
 extend(MapSeries.prototype, {
     type: 'map',
-    axisTypes: ['colorAxis'],
-    colorKey: 'value',
+    axisTypes: ColorMapMixin.SeriesMixin.axisTypes,
+    colorAttribs: ColorMapMixin.SeriesMixin.colorAttribs,
+    colorKey: ColorMapMixin.SeriesMixin.colorKey,
     // When tooltip is not shared, this series (and derivatives) requires
     // direct touch/hover. KD-tree does not apply.
     directTouch: true,
@@ -856,19 +879,18 @@ extend(MapSeries.prototype, {
     forceDL: true,
     getCenter: CU.getCenter,
     getExtremesFromAll: true,
-    getSymbol: noop,
+    getSymbol: ColorMapMixin.SeriesMixin.getSymbol,
     isCartesian: false,
-    parallelArrays: colorMapSeriesMixin.parallelArrays,
-    pointArrayMap: colorMapSeriesMixin.pointArrayMap,
+    parallelArrays: ColorMapMixin.SeriesMixin.parallelArrays,
+    pointArrayMap: ColorMapMixin.SeriesMixin.pointArrayMap,
     pointClass: MapPoint,
     // X axis and Y axis must have same translation slope
     preserveAspectRatio: true,
     searchPoint: noop,
-    trackerGroups: colorMapSeriesMixin.trackerGroups,
+    trackerGroups: ColorMapMixin.SeriesMixin.trackerGroups,
     // Get axis extremes from paths, not values
     useMapGeometry: true
 });
-ColorMapComposition.compose(MapSeries, MapPoint);
 SeriesRegistry.registerSeriesType('map', MapSeries);
 /* *
  *
@@ -882,13 +904,17 @@ export default MapSeries;
  *
  * */
 /**
- * A map data object containing a `geometry` or `path` definition and optionally
- * additional properties to join in the `data` as per the `joinBy` option.
+ * An array of objects containing a `geometry` or `path` definition and
+ * optionally additional properties to join in the `data` as per the `joinBy`
+ * option. GeoJSON and TopoJSON structures can also be passed directly into
+ * `mapData`.
  *
  * @sample maps/demo/category-map/
  *         Map data and joinBy
+ * @sample maps/series/mapdata-multiple/
+ *         Multiple map sources
  *
- * @type      {Array<Highcharts.SeriesMapDataOptions>|*}
+ * @type      {Array<Highcharts.SeriesMapDataOptions>|Highcharts.GeoJSON|Highcharts.TopoJSON}
  * @product   highmaps
  * @apioption series.mapData
  */