Mappedin Logo

Developer

Mappedin Documentation

Web SDK: Creating a Level Selector

Web SDK: Creating a Level Selector

If you're working with a venue that has multiple maps, such as a venue with multiple floors, you may want to create a dropdown to allow the user to select a level.

The following example reads the list of maps from the venue, adds each as an option to a <select> element, and updates the <select> to the initial map when the map loads. Note the configuration of the things object in options; you must request the elevation data associated with the maps in order to sort the levels correctly.

Further Reading:

Quickstart - 15m: Configuration Options

Example Code

<div class="container">
<div id="sidebar">
<h2>Selected Level:</h2>
<select id="level-selector"></select>
</div>
<div id="mapView" />
</div>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.1/mappedin.js"></script>
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: minmax(200px, 25%) 1fr;
height: 100vh;
}
#sidebar {
max-height: 100%;
margin: 0;
padding: 0 12px;
overflow-y: scroll;
border-right: 1px dashed grey;
}
const div = document.getElementById("mapView");
let mapview, venue;
const options = {
mapview: {
antialias: "AUTO",
mode: Mappedin.modes.TEST,
onDataLoaded: populateLevelSelect,
},
venue: {
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
perspective: "Website",
things: {
venue: ["slug", "name"],
maps: ["name", "elevation", "shortName"],
},
venue: "mappedin-demo-mall",
},
};
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);
const levelSelectElement = document.getElementById("level-selector");
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);
});
//identify the currently selected map and ensure level selector matches
const currentIndex = maps.findIndex((map) => map.id === mapview.currentMap);
levelSelectElement.selectedIndex = currentIndex;
}
Mappedin.initialize(options, div).then((data) => {
mapview = data.mapview;
venue = data.venue;
});

The Result

Search Our Docs

Sign Up

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