Markers

Mappedin SDK version 6 is currently in an alpha state while Mappedin perfects a new design. Breaking changes may occur, which will be posted in the v6 release notes.

The Mappedin SDK allows adding and removing Markers on a map. Markers are elements containing HTML that the SDK anchors to a Door, Space or Coordinate. They are automatically rotated and repositioned when the camera moves.

Note that the MapView class implements the Markers interface and exposes it as MapView.Markers. Use MapView.Markers to utilize Markers' methods.

Video Walkthrough

Creating Markers

Markers are added to the map by referencing a target that can be a Door, Space or Coordinate. The following code sample adds a marker to a coordinate.

Copy
mapView.Markers.add(coordinate, '<div>This is a Marker!</div>');

Marker anchoring can be customised using the options argument of Markers.add(). Options accepts a TAddMarkerOptions value, which has a member named anchor. Anchor positions are defined in TMarkerAnchor which contains 5 values. The anchor point are as follows, with the default being center.

TMarkerAnchor

• center
• top
• left
• bottom
• right

Removing Markers

Markers can be removed individually by using the Markers.remove(marker) method, passing in the marker to be removed as shown below.

Copy
mapView.Markers.remove(marker);

To remove all markers from a map, call Markers.removeAll().

Copy
mapView.Markers.removeAll();

The CodeSandbox below demonstrates adding and removing markers. Click on a room to add a marker or click on a marker to remove it.

Marker Rank

Ranking can be added to markers to control which marker will be shown when more than one marker occupies the same space. The marker with the highest rank will be shown. If markers do not overlap, ranking will have no effect. Rank values medium, high and always-visible as defined in TCollisionRankingTier.

The code below adds markers where a user clicks on the map. The marker rank is cycled with each click. If the user clicks and adds multiple markers in the same location, the marker with the highest rank is shown and lower ranking markers are hidden.

Copy
const RANKS = ['medium', 'high', 'always-visible'] as const;
let rank = 0 as number;

// Act on the click event and add a marker with a cycling rank. Observe how higher ranking markers are shown when they collide with lower ranking markers.
mapView.on('click', async event => {
	// TCollisionRankingTier contains 3 values. If rank exceeds 2, reset it to 0.

	const markerTemplate = `
	<div>
		<style>
		.marker {
		display: flex;
		align-items: center;
		background-color: #fff;
		max-height: 64px;
		border: 2px solid grey;
		padding: 4px 12px;
		font-weight: bold;
		font-family: sans-serif;
		}

		.marker img {
		max-width: 64px;
		max-height: 32px;
		object-fit: contain;
		margin-right: 12px;
		}
		</style>
		<div class="marker">
		<p>Marker Rank: ${RANKS[rank]}</p>
		</div>
	</div>`;

	// Add a marker with the current rank at the clicked coordinate.
	mapView.Markers.add(event.coordinate, markerTemplate, {
		rank: RANKS[rank],
	});
	rank++;
	if (rank === RANKS.length) {
		rank = 0;
	}
});

Moving Markers

Markers can be repositioned after they have been added to a map. There are two ways of doing this:

• Markers.setPosition() instantly repositions a Marker
• Markers.animateTo() animates a Marker to a new position

The Marker's position can be set to a Coordinate, Space or Door.

The animateTo method takes an options parameter of TAnimationOptions that defines the animation duration and EasingCurve, which can be linear, ease-in, ease-out or ease-in-out.

• Linear: This function implies a constant rate of change. It means the animation proceeds at the same speed from start to end. There's no acceleration or deceleration, giving a very mechanical feel.
• Ease-in: This function causes the animation to start slowly and then speed up as it progresses. Initially, there's gradual acceleration, and as the function moves forward, the rate of change increases.
• Ease-out: Contrary to ease-in, ease-out makes the animation start quickly and then slow down towards the end. It begins with a faster rate of change and gradually decelerates.
• Ease-in-out: This function combines both ease-in and ease-out. The animation starts slowly, speeds up in the middle, and then slows down again towards the end. It offers a balance of acceleration and deceleration.

The following sample and CodeSanbox displays a custom Marker when the map is first clicked. When the map is clicked again, the Marker is animated to the clicked location using the default animation options.

Copy
let marker;
mapView.on('click', async event => {
	if (marker) {
		mapView.Markers.animateTo(marker, event.coordinate);
	} else {
		marker = mapView.Markers.add(event.coordinate, 'Marker', {
			interactive: true,
			anchor: 'right',
		});
		mapView.setFloor(mapData.getByType('floor')[0].id);
	}
});