The outdoor map shown around the Mappedin indoor map can be manipulated to show or hide additional information. It can be used to add GeoJSON based geometry, images, deck.gl layers and more.

The outdoor map is accessed using MapView.Outdoor, which returns a maplibregl.Map object. MapLibre GL JS is a TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser. The Mappedin SDK makes use of it to display the outdoor map.

By providing access to the MapLibre map used to draw the outdoor map, the Mappedin SDK enables developers to draw on and manipulate the outdoor map. Developers can use most capabilities of MapLibre GL JS. The key exception is Interactivity, which is not available; direct Camera control is discouraged because Mappedin JS owns the outdoor camera (see below).

User touch and click events are handled by Mappedin JS and are not propagated to the outdoor map layer. Camera movement is also driven by Mappedin JS; moving the MapLibre camera directly is not supported and may be overridden.

IMPORTANT: Moving the camera via Outdoor.map (for example Outdoor.map.flyTo / easeTo / jumpTo / setZoom) is not supported — Mappedin JS controls the outdoor camera and may override these calls. Use MapView.Camera (for example Camera.animateTo, Camera.set, or Camera.focusOn) instead.

Refer to the Outdoor Map Guide for more information and interactive examples.

Accessors

  • get enabled(): boolean

    Whether the outdoorView is enabled.

    Returns boolean

  • get map(): undefined | Map$1

    Returns the underlying MapLibre GL map for advanced, non-camera usage, such as adding custom layers, sources, GeoJSON, or deck.gl overlays.

    IMPORTANT: Moving the camera through this object is not supported. Camera control (center, zoom, bearing, pitch, elevation) is owned by Mappedin JS, so MapLibre camera methods such as flyTo, easeTo, jumpTo, panTo, zoomTo, setZoom, setCenter, setBearing, or setPitch may be overridden. Use the Camera API instead — it is the supported, fully-featured path (animation promises, collision-aware framing).

    To move the camera, use the Camera API instead:

    Returns undefined | Map$1

    The MapLibre GL Map instance, or undefined if the outdoor view is disabled.

    Limitations:

    • Camera methods are not supported (see above) — use MapView.Camera to move the camera.
    • Maplibre interaction events are not supported, use Mappedin JS interaction events.
    • Maplibre markers and labels may overlap as they are not integrated with the Mappedin JS collision engine.
    mapView.Camera.animateTo({ center: coordinate, zoomLevel: 19 }, { duration: 600 });
    
  • get visible(): boolean

    Whether the outdoorView is visible.

    Returns boolean

Methods

  • Hide the outdoor map.

    Parameters

    • OptionalexcludedStyleLayerIds: string[]

      {string[]}

    Returns void

  • Set outdoor view opacity.

    Parameters

    • targetOpacity: number | "initial"

      {number | 'initial'}

    • OptionalexcludedStyleLayerIds: string[]

      {string[]}

    Returns void

  • Set the style of the outdoor map. Use one of Mappedin's predefined styles or link to a custom style.

    Parameters

    • style: any

      {any}

    Returns void

  • Show the outdoor map.

    Returns void