Outdoor Map

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

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.map, 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 with key exceptions being Interactivity and Camera, which are not available.

User touch and click events are handled by the Mappedin SDK and are not propagated to the outdoor map layer. Camera movement is also handled by the Mappedin SDK and cannot be manipulated using MapLibre controls.

The remainder of this guide demonstrates a few examples of what is could be achieved with the outdoor map. Please refer to the MapLibre GL JS documentation and MapLibre GL JS Examples for comprehensive instructions and demonstrations of what is possible with MapLibre.

Styles

Styles can be applied to the outdoor map to change its colours. Mappedin provides five pre-built styles to choose from.

• Default: https://tiles-cdn.mappedin.com/styles/mappedin/style.json
• Honeycrisp: https://tiles-cdn.mappedin.com/styles/honeycrisp/style.json
• Fresh Mint: https://tiles-cdn.mappedin.com/styles/freshmint/style.json
• Night Blue: https://tiles-cdn.mappedin.com/styles/midnightblue/style.json
• Starlight: https://tiles-cdn.mappedin.com/styles/starlight/style.json

To change the style used by the Outdoor map, pass the URL of the style in the outdoorView object of TShow3DMapOptions as shown below.

Copy
const mapView = await show3dMap(document.getElementById('mappedin-map') as HTMLDivElement, mapData, {
    outdoorView: {
      style: 'https://tiles-cdn.mappedin.com/styles/freshmint/style.json',
    },
  });

The outdoor style can also be changed at runtime using mapView.Outdoor.setStyle().

Copy
mapView.Outdoor.setStyle('https://tiles-cdn.mappedin.com/styles/freshmint/style.json');

Changing the outdoor style does not change the indoor style. Indoor styles are tied to a View specified when loading the map. Refer to the Views guide for more information.

The CodeSandbox below demonstrates changing the Outdoor style while optionally changing the indoor style by changing the view.

Drawing GeoJSON Geometry on the Outdoor Map

MapView.Outdoor.map allows drawing GeoJSON based geometry on top of the outdoor map using MapLibre. The following example demonstrates drawing a LineString on the outdoor map that represents an area under construction that should be avoided. Labels are drawn using the Mappedin SDK.

Using deck.gl

In addition to using MapLibre methods, deck.gl can also be used to draw on the outdoor map using deck.MapboxOverlay. The next example shows how to take positional information in GeoJSON format that represents the off site positions of shopping carts and displays them on the map using a deck.gl ScatterplotLayer.

Drawing an Image on the Outdoor Map

Images can be drawn on top of the outdoor map. They are positioned using latitude and longitude coordinates that begin on the top left position and continue clockwise. The example below draws an image of a black parking symbol. The green parking symbol uses an image on a Marker created with the Mappedin SDK.

Right click on the map and move to rotate it to observe how the image added to the outdoor map remains static while the image added to a Marker rotates with the map to always use the same perspective. The Marker also remains a constant size when the map is zoomed in and out while the image gets smaller and larger.