Map Controls and Bounds

Map with viewport controls, bounds, and zoom configuration

Map controls demo: zoom, camera, bearing, and fitCoordinates

This guide covers the APIs that shape the current viewport and map state after creation.

Setup


const sdk = initializeSDK("<YOUR_API_KEY>", { lang: "es" })
 
const map = sdk.createMap(document.getElementById("map") as HTMLElement, {
  center: { lat: -33.418835, lng: -70.642388 },
  zoom: 17,
  showCompass: true,
  showZoom: true,
  navigationPosition: "top-right",
  onMapReady: () => {
    console.log("Map ready")
  },
  onZoomEnd: (zoomLevel) => {
    console.log("Zoom changed", zoomLevel)
  },
  onRotate: (degrees) => {
    console.log("Map bearing", degrees)
  },
})

Fit several coordinates


map.fitCoordinates(
  [
    { lat: -33.418835, lng: -70.642388 },
    { lat: -33.41925, lng: -70.6418 },
    { lat: -33.4181, lng: -70.6409 },
  ],
  {
    padding: {
      top: 80,
      right: 40,
      bottom: 120,
      left: 40,
    },
    maxZoom: 18,
    onComplete: () => {
      console.log("Fit completed")
    },
  }
)

Update the camera explicitly

Camera demo: zoom, bearing, and pitch controls


map.updateCamera(
  {
    center: { lat: -33.4191, lng: -70.6419 },
    zoom: 18.5,
    pitch: 45,
    bearing: 20,
    duration: 1500,
  },
  () => {
    console.log("Camera animation finished")
  }
)

Set zoom limits


map.setMinZoom(15)
map.setMaxZoom(20)

Restrict the navigable area

Bounds demo: restricted navigation area

Use setMaxBounds when the user should stay inside a known area:


map.setMaxBounds(
  [
    { lat: -33.4201, lng: -70.6441 },
    { lat: -33.4172, lng: -70.6404 },
  ],
  {
    onComplete: () => {
      console.log("Bounds locked")
    },
  }
)

You can later check if a coordinate is inside those bounds:


const isAllowed = map.isInsideBounds({
  lat: -33.4189,
  lng: -70.6422,
})

Switch map label language at runtime

Language switch demo: es to en and back


map.setLang("en")

This updates the language used in map layers without re-creating the map instance.

Clear tile cache after a style update


map.clearTileCache()

This is useful when:

the backend style was updated
tiles look stale or corrupted
you want to force visible tiles to be requested again

Tile cache configuration at creation time


const map = sdk.createMap(container, {
  center: { lat: -33.418835, lng: -70.642388 },
  zoom: 17,
  tileCache: {
    enabled: true,
    maxTiles: 600,
    ttlMs: 60 * 60 * 1000,
    persistToServiceWorker: true,
    preloadAdjacentZooms: false,
  },
})