Spaces

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin Web SDK with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

A Space represents are area enclosed by walls, such as a hall or room. Spaces can be Interactive and have Labels and Markers added to them. Spaces can also have their color and hover color set.

The example below loops through all spaces and sets the color and hover color to a random color and makes them interactive. Hover over a space to see its color shown in the top left color field. Right clicking on any space will reset the spaces colors to default. Left clicking will randomly set new colors.

mapData.getByType('space').forEach((space) => {
	// Generate a random color
	const hexColor =
		'#' +
		Math.floor(Math.random() * 16777215)
			.toString(16)
			.padStart(6, '0');
	// Apply it to each space
	mapView.updateState(space, {
		color: hexColor, // Set all space colors to teal
		interactive: true, // Make interactive (clickable and hoverable)
		hoverColor: hexColor, // Set the same value as hover color
	});
});