Skip to main content
Version: 5.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 v5 can be done in under 30 lines of Javascript/Typescript and a few lines of HTML and styles. Before creating an <li> element for each location, we filter them by location type tenant to exclude amenities such as restrooms. Then the locations are sort them alphabetically(-ish).

import { getVenue, TGetVenueOptions } from '@mappedin/mappedin-js';
import '@mappedin/mappedin-js/lib/mappedin.css';

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

async function init() {
	const venue = await getVenue(options);

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

	//Alphabetically sort all locations in the venue and store the result in an array.
	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 v5 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%;
}

Organizing Locations by Category​

Mappedin's CMS allows creating complex data structures involving categories. In the next example, we will display the location names organized based on their assigned categories in order to better organize the location listings.

We will first create a function to generate the HTML elements to display the data.

function categoryBuilder(header: string, locations: string[]) {
	const directoryListElement = document.getElementById('directory')!;
	const categoryElement = document.createElement('div');
	categoryElement.className = 'categoryGroup';

	const heading = document.createElement('h3');
	heading.textContent = header;
	categoryElement.append(heading);

	const storeList = document.createElement('ul');
	categoryElement.appendChild(storeList);

	locations.forEach((location) => {
		const item = document.createElement('li');
		item.textContent = location;
		storeList.appendChild(item);
	});
	directoryListElement.appendChild(categoryElement);
}

We will need to sort the categories and their respective locations alphabetically before passing it through the previous function.

async function init() {
	const venue = await getVenue(options);
	const sortedCategories = [...venue.categories.sort((a, b) => (a.name! > b.name! ? 1 : 0))];

	sortedCategories.forEach((category) => {
		const sortedLocations = [
			...category.locations.reduce((acc: string[], location: MappedinLocation) => {
				acc.push(location.name);
				return acc;
			}, []),
		].sort();
		categoryBuilder(category.name ?? '', sortedLocations);
	});
}

The following CSS is required to prevent the category groups from overflowing between two columns, as well as to stylize the heading.

h3 {
	color: grey;
	margin: 0;
}
.categoryGroup {
	page-break-inside: avoid;
	break-inside: avoid-column;
}

This example has locations listed under multiple different categories, which depends on the number of categories assinged to a location. Within the Mappedin CMS, categories can be structured with a parent and child relationship for a more refined organization of the data. Knowing this, listing locations can be limited to only one category or mulitple categories based on filters set, which can be easily implemented using the SDK.

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.

Additional Reading​