Documentation

Setting initial zoom and position of a Map chart

The Map will always start off fully zoomed out and centered. However, in some cases, you might want to start the map pre-zoomed to some place. This tutorial aims to explain how to do just that.

The task

We want a world map. However, we want it to start pre-zoomed to Europe.

Finding zoom level and point

Before we can instruct the map to zoom and position itself to some point, we need to find out what the point is.

The easiest way to do so, is to extract it from a live map:

  1. Open your map.
  2. Zoom and position it exactly how you want it.
  3. Open browser's console (F12 in most browsers). You may also need to select "Console" tab.
  4. Extract current zoom level by accessing map's zoomLevel attribute.
  5. Extract current center coordinates via map's zoomGeoPoint attribute.
Finding current zoom level and position of the map

The chart.zoomLevel and chart.zoomGeoPoint are commands we have typed into browser's console. The rest of the information is map's response. We're going to use that in the next step.

Setting initial zoom

Now that we know our target zoom level and position, we need to instruct the map to start at that position.

The map has two handy properties for that: homeZoomLevel and homeGeoPoint. The former controls zoom level that map is supposed to start in. The latter sets the geographical point (latitude and longitude) that the map should center on initially.

All we need to do is to set those properties to the values we already found in the previous step: (for simplicity we have rounded up the values, so they do not seem so long)

chart.homeZoomLevel = 5;
chart.homeGeoPoint = {
  latitude: 52,
  longitude: 11
};

chart.homeZoomLevel = 5;
chart.homeGeoPoint = {
  latitude: 52,
  longitude: 11
};

{
  // ...
  "homeZoomLevel": 5,
  "homeGeoPoint": {
    "latitude": 52,
    "longitude": 11
  }
}

And we're done:

See the Pen amCharts 4: Pre-zooming the map by amCharts (@amcharts) on CodePen.24419

Pre-zooming to a country

If you'd rather like to pre-zoom to a specific country, only knowing its ID, take a look at "Pre-zooming Map to a Country".

Related tutorials