avromf
Posts: 15
Joined: Thu Sep 28, 2023 2:36 pm

Setting a Default Zoom Level on a Tiled Web Map

Hi,

I am trying to calculate a default zoom level for when a Tiled Web Map (using OpenStreetMap) is first loaded that will contain all of the set POI (points of interest).
From there, the user can zoom in/out and move the map around.

To that end, I am calculating the center of all of the POIs.
That is working.

For zoom level, it is generally working except that it is not taking into account the current size of the map itself.

Here is the code I have used (in Java):

Code: Select all

	
		int zoomLevel = 1;
		double maxDiff = Math.max(maxLatitude - minLatitude, maxLongitude - minLongitude);
		if (maxDiff > 0)
		{
			zoomLevel = (int) Math.floor(Math.log(360 / maxDiff) / Math.log(2));
		}
Is there an better way to do this that will take into account the size of the map?

Take, for example, the Highcharts demo for this here:
https://www.highcharts.com/docs/maps/tiledwebmap

As of now, it is hardcoded to a zoom level of 13.

firToGeometry will not work because it will not allow for zooming or scrolling beyond those bounds.
andrzej.b
Site Moderator
Posts: 584
Joined: Mon Jul 15, 2024 12:34 pm

Re: Setting a Default Zoom Level on a Tiled Web Map

Hi,

Here’s how you can integrate the zoom level calculation into a basic Highcharts map chart configuration using OpenStreetMap tiles: https://jsfiddle.net/BlackLabel/5psgmkv3/
This example initializes a Highcharts map with an initial zoom level calculated to fit the specified POIs within the map container. Adjust the minLatitude, maxLatitude, minLongitude, and maxLongitude to match your POI data. The map will center on the average latitude and longitude of the POIs and set the zoom level accordingly.

Feel free to reach out if you have any further questions.

Kind regards,
Andrzej
Highcharts Developer

Return to “Highcharts Maps”