Skip to main content
Version: 5.0

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.

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.

Content Security Policy Requirements​

When using the default configuration of Outdoor View, the Worker Source Blob Content Security Policy (CSP) directive is required.

worker-src blob: ;

Failing to add this directive can prevent the outdoor map layer from being shown. When this happens, the following error will be reported in the browser console:

Refused to create a worker from 'blob:https://YOUR.URL' because it violates the following Content Security Policy directive: "default-src https: ws: data: 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

Detecting If Worker Source Blob is Blocked by CSP​

To avoid increasing the download size of an app, it is recommended to detect if the blob is blocked by CSP before setting the MapLibre worker URL. This can be done by attempting to create a worker from a blob as shown below.

try {
    const worker = new Worker(URL.createObjectURL(new Blob([''])));
    worker.terminate();
} catch {
    console.error('CSP detected: Worker creation blocked.');
}

Alternative to Blocked Worker Source Blob: Setting the MapLibre Worker URL​

A site may be restricted from enabling the worker-src directive due to security policy. This can be worked around by setting the MapLibre worker URL and specifying the maplibre-worker.csp.js file from the Mappedin SDK. The following steps explain how to do this.

  1. From the project directory, navigate to the node_modules/@mappedin/mappedin-js/lib/esm/renderer/.
  2. Copy the maplibre-worker.csp.js file to the public directory of your project.
  3. In the application, set the MapLibre worker URL to the copied maplibre-worker.csp.js file as shown below.
setMaplibreWorkerURL('maplibre-worker.csp.js');

This will add approximately 375 KB of additional data the app user will need to download.