Multibuilding rendering

Mappedin JS
1

Hi,

We are using Pro Maps and now we are encountering this issue,

I’m trying to render a multi-building map using the key, secret, and mapId. Since we have two mapIds (as we are working with multiple buildings), I’m unsure how to include both.

Currently, I’m using the following options:

const options = {
key: ‘’,
secret: ‘’,
mapId: ‘’,
};
const mapData = await global.getMapData(options);
const mapView = await global.show3dMap(document.getElementById(‘myMap’), mapData, {
initialFloor: ‘’,
bearing: -32,
pitch: 0,
minZoomLevel: 16,
zoomLevel: 18,
});

However, it’s not working when I try to add either mapId. How can I properly configure this to support multiple buildings?

2

There are two ways to approach this. If the buildings are in the same vicinity, you can use the new multi building feature to add multiple buildings to the same map. This results in one Map ID that you load, which contains multiple FloorStacks. Each building has its own FloorStack, which contains an array of Floors (floor maps) for that building.

You can read how to display that in this guide: Building & Floor Selection

That is my recommended approach.

If the buildings are far apart, there are two approaches you could take. The first is to have a control on the page holding that map that loads recreates the MapView with the appropriate ID. Alternatively, you could use the Mappedin MapLibre Overlay, in which you’d use MapLibre to display the outdoor map and embed instances of Mappedin JS into a layer in it.

3

Hi Manikandan

Might I recommend moving the Mappedin functions from your global scope to a Mappedin variable instead. Having the functions directly in global namespace can easily lead to difficult to diagnose issues due to conflicts or unexpected side effects.