Camera Control

MapLayr provides powerful camera control capabilities that allow you to programmatically navigate your map. This guide explains how to move and manipulate the camera view.

Controlling User Interactivity

MapLayr provides properties to customise how users can interact with the map, particularly when using the mouse wheel:

// Configure mouse wheel behaviour
mapView.mouseWheelEventsRequireModifierKey = true;
mapView.mouseWheelZoomsMap = false;

Mouse Wheel Settings

Property	Description
`mouseWheelEventsRequireModifierKey`	When true, requires the shift or control key to be held down for mouse wheel events to affect the map view.
`mouseWheelZoomsMap`	When true, mouse wheel zooms the map; when false, mouse wheel scrolls the map (unless alt or meta/command keys are held).

These properties give you control over how the map responds to user input, allowing you to create a more customised experience that fits your application's needs.

Moving the Camera

The map view provides a moveCamera method that lets you adjust various camera properties. This method takes a single object with the following optional properties:

mapView.moveCamera({
  position: new maplayr.Coordinates(36.69427, -6.41905),
  heading: 45,
  span: 500,
  insets: 20,
  animated: true
});

Camera Properties

Property	Description
`position`	The coordinates that should appear at the centre of the map view
`heading`	The orientation in degrees relative to true north (0° = north, 90° = east)
`span`	The distance in metres shown from top to bottom or left to right (whichever is smaller)
`insets`	Additional space in CSS pixels around the frame after span calculations
`animated`	Whether to animate the transition to the new camera position

All parameters are optional. Any omitted property will remain unchanged from its current value.

Examples

Basic Camera Movement

// Move to specific coordinates
mapView.moveCamera({
  position: new maplayr.Coordinates(36.69427, -6.41905),
  animated: true
});

Changing Orientation

// Rotate the map to face east
mapView.moveCamera({
  heading: 90,
  animated: true
});

Zooming

// Zoom to show a 200-metre area
mapView.moveCamera({
  span: 200,
  animated: true
});

Combined Operations

// Move to a location, rotate, and zoom in one operation
mapView.moveCamera({
  position: new maplayr.Coordinates(36.69878, -6.41632),
  heading: 45,
  span: 300,
  animated: true
});

Best Practices

Use animated: true for smooth transitions that help users maintain context
For immediate changes without animation, set animated: false or omit the property
When displaying annotations, consider moving the camera to ensure they're visible