Creating a Level Selector | Web SDK v1 | Mappedin Developer Portal

Version 1 has been deprecated. View the latest version of this guide.

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 id="mapView" />
<script src=""></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: {
perspective: "Website",
things: {
venue: ["slug", "name"],
maps: ["name", "elevation", "shortName"],
venue: "mappedin-demo-mall",
function onLevelChange(event) {
const 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 =;
//identify the currently selected map and ensure level selector matches
const currentIndex = maps.findIndex((map) => === mapview.currentMap);
levelSelectElement.selectedIndex = currentIndex;
Mappedin.initialize(options, div).then((data) => {
mapview = data.mapview;
venue = data.venue;

The Result

Was this page helpful?