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:
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.12/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;});