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 to manipulate the map’s extent.

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

Program: Panning with the Map 's MapNavigator (from samples/common/ui/overlay/PanControl.tsx) 
    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:

Program: Fitting on a layer (from samples/balloons/main.js) 
      map.mapNavigator.fit({
        bounds: citiesLayer.bounds,
        animate: true
      });