Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Listing locations

Web SDK v4: 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 18) location, we filter them by location type tenant and sort them alphabetically(-ish).

main.js
import {
getVenue,
} from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js"
let venue;
async function init() {
venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
});
const directoryListElement = document.getElementById('mappedin-map');
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)
})
}
document.addEventListener("DOMContentLoaded", init)

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.

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy