ViewportController

---

The viewport controller allows you to control the viewport of the map.

You can get the current viewport, move the viewport, and be notified when the viewport changes.

Extended by

• FeltController

Methods

getViewport()

getViewport(): Promise<ViewportState>

Gets the current state of the viewport.

Returns

Promise<ViewportState>

---

setViewport()

setViewport(viewport: SetViewportCenterZoomParams): void

Moves the map to the specified location.

Parameters

Parameter	Type
viewport	SetViewportCenterZoomParams

Returns

void

Example

felt.setViewport({
  center: { latitude: 0, longitude: 0 },
  zoom: 10,
});

---

fitViewportToBounds()

fitViewportToBounds(bounds: ViewportFitBoundsParams): void

Fits the map to the specified bounds.

Parameters

Parameter	Type
bounds	ViewportFitBoundsParams

Returns

void

Example

const west = -122.4194;
const south = 37.7749;
const east = -122.4194;
const north = 37.7749;
felt.fitViewportToBounds({ bounds: [west, south, east, north] });

Events

onViewportMove()

onViewportMove(args: {handler: (viewport: ViewportState) => void; }): VoidFunction

Adds a listener for when the viewport changes.

Parameters

Parameter	Type	Description
args	object	-
args.handler	(viewport: ViewportState) => void	This callback is called with the current viewport state whenever the viewport changes.

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onViewportMove({
  handler: viewport => console.log(viewport.center.latitude),
});

// later on...
unsubscribe();

---

onViewportMoveEnd()

onViewportMoveEnd(args: {handler: (viewport: ViewportState) => void; }): VoidFunction

Adds a listener for when the viewport move ends, which is when the user stops dragging or zooming the map, animations have finished, or inertial dragging ends.

Parameters

Parameter	Type
args	object
args.handler	(viewport: ViewportState) => void

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onViewportMoveEnd({
  handler: viewport => console.log(viewport.center.latitude),
});

// later on...
unsubscribe();

---

onMapIdle()

onMapIdle(args: {handler: () => void; }): VoidFunction

Adds a listener for when the map is idle, which is defined as:

• No transitions are in progress

• The user is not interacting with the map, e.g. by panning or zooming

• All tiles for the current viewport have been loaded

• Any fade transitions (e.g. for labels) have completed

Parameters

Parameter	Type
args	object
args.handler	() => void

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onMapIdle({ handler: () => console.log("map is idle") });

// later on...
unsubscribe();