Once this is saved and uploaded to the database, it will be displayed in a different highcharts map on another page. Here I would like to zoom in on all active countries upon initialization, yet I can't find out how to get the position to center on the point I have calculated. The series comes from the database so I cannot set it directly in the chart options, which by then already exist.

Upon inspecting the chart object in the dev tools on the page itself, I've noticed it contains a lot more properties than both the class definition in Angular as well as the documentation. Luckily I stumbled on a post mentioning this, which got offered the solution to extend the interface, which I did.

So I wrote this interface to get the mapView of the chart:

Code: Select all

```
import { Chart, MapView } from 'highcharts';
export interface MapChart extends Chart {
mapView: MapView;
}
```

As well as a bounds interface, which looks like the bounds property of the Highcharts.Point, because the point misses this property in the class definition as well, and I could not find an already existing class definition:

Code: Select all

```
export interface Bounds {
x1: number,
x2: number,
midX: number,
y1: number,
y2: number,
midY: number
}
```

I have then extended the Highcharts.Point interface, because it was missing the bounds property, as mentioned:

Code: Select all

```
import { Point } from 'highcharts';
import { Bounds } from './bounds';
export interface MapPoint extends Point {
bounds: Bounds;
}
```

Then I setup the chart callback to give me a reference to the Highcharts.chart property, casting it to my MapChart:

Code: Select all

`this.chartCallback = (chart: Highcharts.Chart) => { this.chart = chart as MapChart }`

Finally I added a load event handler to set the zoom and location:

Code: Select all

```
this.chartOptions.chart!.events = { load: () => {
if (!this.chart) { return; }
const padding: number = 100;
// Get all points, which reference an active country and cast them to the enhanced MapPoint interface so we can get their bounds.
let points: MapPoint[] = this.chart.series[0].data.filter((point: Highcharts.Point) => !!point.value)
.map((point: Highcharts.Point) => point as MapPoint);
// Use Math.min/max to find the smallest and largest bounds for x and y value, and set a getter to return the midpoint we want to focus on.
let bounds: Bounds = { x1: points.length ? Math.min(...points.map((point: MapPoint) => point.bounds.x1)) : 0,
x2: points.length ? Math.max(...points.map((point: MapPoint) => point.bounds.x2)) : this.chart.mapView.center[0] * 2,
get midX(): number { return (this.x1 + this.x2) / 2; },
y1: points.length ? Math.min(...points.map((point: MapPoint) => point.bounds.y1)) : 0,
y2: points.length ? Math.max(...points.map((point: MapPoint) => point.bounds.y2)) : this.chart.mapView.center[1] * 2,
get midY(): number { return (this.y1 + this.y2) / 2; } };
// Calculate the zoom level using the previously calculated bounds to zoom into, i.e. their percentage size of the whole map.
// Then use the larger number from x and y values as zoom level so nothing will get cut off. Also add a padding.
let zoomLevel: number = Math.max((bounds.x2 - bounds.x1 + padding) / (this.chart.mapView.center[0] * 2), (bounds.y2 - bounds.y1 + padding) / (this.chart.mapView.center[1] * 2));
// Use the zoom level and center to zoom onto the rectangle.
this.chart.mapZoom(zoomLevel, bounds.midX, bounds.midY, bounds.midX, bounds.midY);
} }
```

While the zoom level works properly, the point to zoom on doesn't. It merely zooms into the center of the whole map, I've tried various values but to no avail. I am not sure what projectionX and projectionY even mean and what I need them to set to if I don't have any projection. I've tried undefined, but this just zoomed into the bottom left corner. The chartX and chartY value don't seem to do anything, although it seems those would be the properties to set.

I am aware this is a deprecated function, but I cannot use the replacement MapView.zoomBy as that one doesn't work with a linear zoom value, i.e. 1 = .5, 2 = .75, 3 = .875, etc. I have no idea what I should set there to zoom in by 83% for example.

I've also tried the MapView.setView method, which does set the position properly but initialized with an already very zoomed in state, even if I set it to 0. I assume it does so as it is working with longitude and latitude, so it automatically zooms in on 360 width and 180 height. Since my map is 8675 high, 180 is of course very zoomed in. It seems this function also works with a non-linear zoom factor, which, if I set it to -1, seems to zoom out twice as far, whereas when I set it to -2, it seems to be four times as much. Again, something I cannot use. Also, if that is the case, I do not understand why the longitude and latitude values to center work with the regular values of my map, i.e. 2621.5 and 4966.5. I would have assumed having to recalculate them to values between -180/+180 and -90/+90.

How can I zoom into a defined rectangle? Which zoom functionality do I have to use, and how?