Level Selector

In this guide, we will connect an HTML select element with our venue data to add a simple level selector. This will allow us to list all floors of the map and switch between them.

We will keep our index.html as is and create the necessary select element in TypeScript. This helps us later to populate selector with the floors. We will also lift the mapView and venue variables outside of our init() function to be used globally. Only basic styling will be applied to the level selector.

main.ts

import { getVenue, showVenue, TGetVenueOptions, MapView, Mappedin } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/mappedin.css";

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/api-keys/
const options: TGetVenueOptions = {
  venue: "mappedin-demo-hospital",
  clientId: "5eab30aa91b055001a68e996",
  clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1"
};

let mapView: MapView;
let venue: Mappedin;

const levelSelectElement = document.createElement("select");
document.body.appendChild(levelSelectElement);
levelSelectElement.style.cssText = "position: fixed; top: 1rem; left: 1rem;";

async function init() {
  venue = await getVenue(options);
  mapView = await showVenue(document.getElementById("app")!, venue);
}

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 its elevation property

function onLevelChange(event: Event) {
  const id = (event.target as HTMLSelectElement).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
}

Finally, let's call populateLevelSelect() after showVenue() to initialize it.

async function init() {
  venue = await getVenue(options);
  mapView = await showVenue(document.getElementById("app")!, venue);

  populateLevelSelect();
}

You should now see your venue with a select element in the top left corner. You can choose from this list to adjust the floor and watch the map instantly update. The results can also be seen in the following CodeSandbox.

Sign up for developer updates

For more information