You can change the geographic area shown on the map through mouse or touch interaction with the map, but you can also change
it programmatically using the MapNavigator
of the Map
.
The human input controllers for mouse and touch interaction also use the
|
MapNavigator
offers four operations.
You can animate each operation.
Panning or centering a map
Use the MapNavigator.pan
function to:
-
Center the map on a certain model or world location
-
Move the map in a certain direction by a specific number of pixels or world units
This example shows how to translate or move the map by a certain number of pixels in an animated way:a
map.mapNavigator.pan({ targetLocation: createPoint(null, [ map.viewSize[0] * xRatio, map.viewSize[1] * yRatio ]), animate: { duration: 250 } });
Zooming a map or setting a scale
Use the MapNavigator.zoom
function to:
-
Zoom in or zoom out by a certain factor
-
Set the scale of the map to a specific scale
Rotating a map
Use the MapNavigator.rotate
function to:
-
Rotate the map to a specific orientation angle. in some projections, this is a heading or azimuth.
-
Rotate the map by a delta angle relative to the current rotation.
-
Adapt the camera pitch in 3D.
Fitting a view to a layer or area
Use the MapNavigator.fit()
function to make sure the visible map area covers a certain area.
You can pass an extent as a Bounds
shape in any model or map reference.
For example, this example fits on all the data in a layer:
samples/balloons/main.js
)
map.mapNavigator.fit({ bounds: citiesLayer.bounds, animate: true });