Skip to main content
Version: 4.0

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 Mappedin JS 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).

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.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Mappedin JS 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.

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

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.