Interactivity

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 JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

This guide explains how to enhance a map's interactivity by making components clickable. Interactivity can greatly improve the user experience and user engagement with a map.

Video Walkthrough

Interactive Spaces

Spaces can be set to interactive to allow a user to click on them. When interactivity is enabled for a space, it enables a hover effect that highlights the space when the cursor is moved over the space.

The following code enables interactivity for all spaces:

// Set each space to be interactive.
mapData.getByType('space').forEach((space) => {
	mapView.updateState(space, {
		interactive: true,
	});
});

Hover Interactivity

When interactivity is enabled for a space, it enables a hover effect that highlights the space when the cursor is moved over the space. The highlight color can also be customised to match the style of the map.

The following code sample enables interactivity for all spaces on the map and sets the hover color to red.

// Set each space to be interactive and its hover color to red.
mapData.getByType('space').forEach((space) => {
	mapView.updateState(space, {
		interactive: true,
		hoverColor: 'red',
	});
});

This CodeSandbox demonstrates interactive spaces with hover enabled.

Interactive Labels

Labels added to the map can be set to interactive to allow users to click on them and have the click event captured by an app. The code sample below adds a label to each space with a name and sets the label's interactivity to true.

// Add a label on each space with a name and make the labels interactive.
mapData.getByType('space').forEach((space) => {
	if (space.name) {
		mapView.Labels.add(space, space.name, {
			interactive: true,
		});
	}
});

After enabling interactivity, click events on the label can be captured using Mapview.on('click'). The TEvents object passed into the on method contains an array of labels that were clicked.

The following code sample captures the click event and checks if the user clicked on a label. If they did, it logs the id of the label that was clicked and removes it from the map.

// Act on the click event to log the id of the label that was clicked and then remove it.
mapView.on('click', async (e) => {
	if (e.labels.length > 0) {
		console.log('Clicked on label: ' + e.labels[0].id);
		mapView.Labels.remove(e.labels[0]);
	}
});

Interactive Markers

Markers are another component that can be set to interactive, allowing them to be clickable and have an app act on the click event. The code sample below adds a marker to each space with a name and sets the marker's interactivity to true.

// Add a marker on each space with a name and make the markers interactive.
mapData.getByType('space').forEach((space) => {
	if (space.name) {
		mapView.Markers.add(space, `<div>${space.name}</div>`, {
			interactive: true,
		});
	}
});

After enabling interactivity, click events on the marker can be captured using Mapview.on('click'). The TEvents object passed into the on method contains an array of markers that were clicked.

The following code sample captures the click event and checks if the user clicked on a marker. If they did, it logs the id of the marker that was clicked and removes it from the map.

// Act on the click event to log the id of the marker that was clicked and then remove it.
mapView.on('click', async (e) => {
	if (e.markers.length > 0) {
		console.log('Clicked on marker: ' + e.markers[0].id);
		mapView.Markers.remove(e.markers[0]);
	}
});

Handling Click Events

The Mappedin SDK enables capturing and responding to click events through its event handling system. TEvents provides information on what the user clicked on. It allows developers to obtain information about user interactions with various elements on the map, such as:

1. coordinate - A Coordinate object that contains the latitude and longitude of the point where the user clicked.
2. floors - An array of Floor objects. If the map contains multiple floors, floors under the click point are included.
3. labels - An array of Label objects that were clicked.
4. markers - An array of Marker objects that were clicked.
5. models - An array of Model objects that were clicked.
6. objects - An array of MapObject objects that were clicked.
7. spaces - An array of Space objects that were clicked.

Use Mapview.on('click') to capture click events as shown below.

mapView.on('click', async (e) => {
	// The user clicked!
});

After enabling interactivity, click events on the space can be captured using Mapview.on('click'). The TEvents object passed into the on method contains an array of spaces that were clicked.

The following code sample captures the click event and checks if the user clicked on a space. If they did, it creates a label with the space name. If the click was not on a space, it creates a label with the latitude and longitude the user clicked on.

// Act on the click event to create a label with the space name that was clicked.
// If the space has no name, use the coordinate.
mapView.on('click', async (e) => {
	if (e.spaces[0].name) {
		mapView.Labels.add(e.coordinate, e.spaces[0].name);
	} else {
		mapView.Labels.add(e.coordinate, 'Clicked: Lat: ' + e.coordinate.latitude + ' Lon: ' + e.coordinate.longitude);
	}
});

The next CodeSanbox uses interactive markers and the click event. When a marker is clicked, it is removed.