Outdoor View

Outdoor view is currently an experimental component of the Mappedin SDK. While in this state, some features may not behave as intended and APIs may be changed. Experimental features are being tested together with early adopters to fine-tune them.

The Mappedin SDK’s outdoor view capability allows an application to display a Mappedin map on top of an outdoor tile set. Currently the Mappedin SDK makes use of OpenStreetMap vector images retrieved from a Mappedin hosted tile server. Use of outdoor view requires MultiBufferRendering to be enabled.

Enable Outdoor View

To enable outdoor view, set the TMapViewOptions outdoorView enabled and multiBufferRendering parameters to true as shown in the code snippet below.

Copy
const mapView = await showVenue(document.getElementById("app")!, venue, {
  multiBufferRendering: true,
  outdoorView: {
    enabled: true,
  },
});

The following Codesandbox demonstrates a map with Outdoor View.

Detect When Outdoor View is Loaded

An app can be informed when the outdoor view has loaded the outdoor map tiles by listening for E_SDK_EVENT.OUTDOOR_VIEW_LOADED as shown below.

Copy
mapView.on(E_SDK_EVENT.OUTDOOR_VIEW_LOADED, () => {
  console.log("Outdoor view loaded!");
});

Styling Outdoor View

Outdoor View can be styled to match existing colour schemes or to show and hide outdoor layers. The OutdoorView.setStyle method accepts a style JSON object conforming to the Maplibre Style Spec.