Listing Locations

Sometimes it's preferable to view the locations in a venue as a listing instead of displaying a 3D rendered map. This is a great opportunity to use the Mappedin SDK without rendering the map.

Creating a simple directory listing using the Mappedin Web SDK v4 can be done in under 30 lines of Javascript and a few lines of HTML and styles. Before creating an <li> element for each (line 19) location, we filter them by location type tenant to exclude amenities such as restrooms. Then the locations are sort them alphabetically(-ish).

main.ts

import { getVenue } from "@mappedin/mappedin-js";
// Not importing Mappedin CSS because we are not rendering the map so it's not needed

let venue;

async function init() {
  venue = await getVenue({
    venue: "mappedin-demo-mall",
    clientId: "<MAPPEDIN_CLIENT_ID>",
    clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
  });

  const directoryListElement = document.getElementById('directory');

  const alphabeticalLocations = [...venue.locations
    .filter(location => location.type === 'tenant')]
    .sort((a, b) => a.name < b.name ? -1 : 1)

  alphabeticalLocations.forEach(location => {
    const item = document.createElement('li')
    item.textContent = `${location.name}`
    directoryListElement.appendChild(item)
  })

}

init();

The HTML looks slightly different as we are creating a location listing of the venue without rendering the map.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mappedin Web SDK v4 Listing Locations</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="directory"></div>
    <script src="/src/main.ts"></script>
  </body>
</html>

The following styles help us display the directory listing in a simple yet elegant 3 column layout.

style.css

#directory {
  columns: 3;
  margin: 0;
  padding: 1rem;
  list-style-type: none;
}
#directory li {
  margin: 0.5rem 0;
  display: inline-block;
  width: 100%;
}

Result

Mappedin's CMS allows creating complex data structures involving categories. Locations may belong to multiple categories, and categories have a parents field that support defining one or more parent categories. For guides on creating directory listings of more advanced directory structures, you can have a look at the Web SDK v1 guide on displaying locations, where the locations are organized by category.

Recap of the guides so far

So far, the guides have walked through how to

load and display a map
add interactivity to locations on the map
add a level selector
labeling locations on the map with two different label styles
creating a directory listing of a venue

With these features implemented, the user is able to discover locations on the map. Next guides, will show how to give directions to the user to make sure they find their way to the locations they are interested in.

Result

Recap of the guides so far

Sign up for developer updates

For more information