You have created your map, but the viewport seems... off. In simple terms, the map is not showing the area you want to, as you wish to focus in a different area entirely, opt for a different zoom level, or both. In the following steps, we will guide you through the different options for setting and adjusting the initial viewport.
TIP: In a hurry? You might want to create a single-slide story to speed things up. You can learn more about this here.
- 1
-
The Auto option, which is the default setting, automatically sets the viewport to include every visible object, either marker or point.
-
TIP: Pitch is the amount of vertical rotation to apply to the map when it first loads, with zero creating a totally flat map. Increasing the value to anything larger than that that can create the illusion of a 3D perspective. Bearing is the direction the map would face upon initial load. Set to zero, the map will face north, while set to 180 it will face south, and so on.
- 2
-
If you wish to set a custom longitude, latitude and zoom, opt for the Centroid option.
-
TIP: A handy way to use this setting is by finding a point and using it as an "anchor". Do you want to set the map to focus on South Africa, for example? Find the coordinates of a city in South Africa, preferably located in the center of the region you wish to display, using sites like latlong.net, and enter them in the Latitude and Longitude boxes.
-
The Ζoom setting enables you to control the initial zoom level of your map, allowing further customization of the initial viewport.
-
Moreover, by choosing the Custom setting of the Resize by aspect ratio options, you can set a custom width and height that the aspect ratio will be based on.
- 3
-
Through the Bounds setting, you can specify a set of coordinates, creating a custom bounding box for the initial viewport.
-
There are different ways to get the exact bounds:
-
Getting the bounds of the map's current view through the browser's console on a 3D Map template.
-
Pan and zoom the map's current view to your desired view.
-
Bring your cursor to the map's white padding. When you're there the cursor will turn into a pointer, right-click and choose Inspect. The browser's console will open.
-
On the browser's console, move from the Elements tab to the Console tab. Type
map.getBounds(). The map's bounds object will be fetched. -
Expand the bounds object to see the latitude and longitude of the map's current view. Use the latitude and longitude values as input in the Initial Viewport > Bounds.
-
-
Drawing your desired map bounds in a tool like geojson.io
-
Go to geojson.io and pan to your map area.
- Draw your desired map bounds using the rectangle tool.
-
Once done, use the generated latitudes and longitudes for the bounding box and use them as input in the Initial Viewport > Bounds
-
-
- 4
-
If you want the whole world to display in the initial viewport regardless of points/markers or other settings, choose World.
- 5
-
Through the Viewport limits settings, you can set a maximum and minimum zoom level.
- 6
-
Moreover, you can restrict the viewport within a specific bounding box by enabling the Limit viewport bounds settings, and specifying the coordinates of the four "corners" of the box.