Loading...

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.

Outdoor view can be used during development using localhost with ports 3000, 5173, 8000 and 8080.

Enable Outdoor View

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

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.

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.

Was this page helpful?

Next Topic

Multi Language