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 Typescript 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.ts

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

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("app")!,
    venue
  );
  mapView.addInteractivePolygonsForAllLocations();
}

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.ts

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

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("app"), venue)
  mapView.addInteractivePolygonsForAllLocations();
  populateLevelSelect();
}

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.

Result

Sign up for developer updates

For more information