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>

Example

// Get current viewport state
const viewport = await felt.getViewport();
console.log({
  center: viewport.center,
  zoom: viewport.zoom,
});

---

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,
});

---

getViewportConstraints()

getViewportConstraints(): Promise<null | ViewportConstraints>

Gets the current state of the viewport constraints.

Returns

Promise<null | ViewportConstraints>

Example

// Get current viewport constraints
const constraints = await felt.getViewportConstraints();
if (constraints) {
  console.log({
    bounds: constraints.bounds,
    minZoom: constraints.minZoom,
    maxZoom: constraints.maxZoom
  });
} else {
  console.log("No viewport constraints set");
}

---

setViewportConstraints()

setViewportConstraints(constraints: null | Partial<ViewportConstraints>): void

Constrains the map viewport so it stays inside certain bounds and/or certain zoom levels.

Parameters

Parameter	Type
constraints	null | Partial<ViewportConstraints>

Returns

void

Examples

felt.setViewportConstraints({
  bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
  minZoom: 1,
  maxZoom: 23,
});

every constraint is optional

felt.setViewportConstraints({
  bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
});

if a constraint is null, it will be removed but keeping the others

felt.setViewportConstraints({ bounds: null });

if method receives null, it will remove the constraints

felt.setViewportConstraints(null);

---

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	{ handler: (viewport: ViewportState) => void; }	-
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	{ handler: (viewport: ViewportState) => void; }
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	{ handler: () => void; }
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();