Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Level selector

Web SDK v4: Level selector

In this guide, we will expand on the adding interactivity guide to add a level selctor to the map so that we can view all the floors of a map. Keep the files from the previous guide and continue by editing the main.js.

We will keep the index.html as is and create the necessary select element in Javascript as that helps us later to add the floors to the selector. We will also lift the mapView and venue variables outside of our init function. In this example, we will apply just the basic styling to this level selector.

main.js
import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js";
let mapView, venue
const levelSelectElement = document.createElement("select")
document.body.appendChild(levelSelectElement)
levelSelectElement.style.cssText = "position: fixed; top: 1rem; left: 1rem;"
async function init() {
venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
});
mapView = await showVenue(
document.getElementById("mappedin-map"),
venue
);
mapView.addInteractivePolygonsForAllLocations();
}
document.addEventListener("DOMContentLoaded", init);

Once the map is loaded, we need to make sure that the level selector is populated with the available floors. For that, we will write a short function that initializes the level selector values. Additionally, we need to make sure that changing the level selector value changes the map. onLevelChange -handler will do just that and we attach it to our level selector in the populateLevelSelect -function.

After that, populateLevelSelect sorts the map based on their elevation property

function onLevelChange(event) {
const id = event.target.value
mapView.setMap(id)
}
function populateLevelSelect() {
levelSelectElement.onchange = onLevelChange
// Sort maps by elevation
const maps = venue.maps.sort((a, b) => b.elevation - a.elevation)
// Add each map as an option to the level select
maps.forEach(map => {
const option = document.createElement("option")
option.text = map.name
option.value = map.id
levelSelectElement.add(option)
})
// Set the initial value of the level selector to the current map
levelSelectElement.value = mapView.currentMap.id
}

Result

main.js
import {
getVenue,
showVenue,
} from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js"
let mapView, venue
const levelSelectElement = document.createElement("select")
document.body.appendChild(levelSelectElement)
levelSelectElement.style.cssText = "position: fixed; top: 1rem; left: 1rem;"
function onLevelChange(event) {
const id = event.target.value
mapView.setMap(id)
}
function populateLevelSelect() {
// Sort maps by elevation
const maps = venue.maps.sort((a, b) => b.elevation - a.elevation)
levelSelectElement.onchange = onLevelChange
// Add each map as an option to the level select
maps.forEach(map => {
const option = document.createElement("option")
option.text = map.shortName
option.value = map.id
levelSelectElement.add(option)
})
// Set the initial value of the level selector to the current map
levelSelectElement.value = mapView.currentMap.id
}
async function init() {
venue = await getVenue({
venue: "mappedin-demo-hospital",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
})
mapView = await showVenue(document.getElementById("mappedin-map"), venue)
mapView.addInteractivePolygonsForAllLocations()
populateLevelSelect()
}
document.addEventListener("DOMContentLoaded", init)

However, the maps look somewhat empty and it's hard to know what is there because nothing is labeled. The next guides will show two ways of displaying labels on the map.

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy