Skip to main content
Version: 5.0

Markers

The Mappedin Web SDK allows you to add Markers to the map. These are elements containing arbitrary HTML that the SDK will anchor to a MappedinNode or a MappedinCoordinate on the map and automatically handle rotation and repositioning when the camera moves.

In the release of Mappedin Web SDK v5.7.0 the Marker API has changed. createMarker() and removeAllMarkers() has been deprecated and there is a new Markers Layer.

Creating Markers​

To create a new Marker, use the Markers.add() method. You may provide any valid HTML as the content.

Markers must be attached to a MappedinNode or MappedinCoordinate on the map. You can place a Marker at the entrance node of a clicked polygon by creating the Marker inside the callback function of the click event.

mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
	if (polygons.length > 0) {
		const location = mapView.getPrimaryLocationForPolygon(polygons[0]);
		if (!location) return;

		const { name } = location;

		const markerTemplate = `
      <div class="marker">
        <p>${name}</p>
      </div>`;

		mapView.Markers.add(polygons[0].entrances[0], markerTemplate);
	}
});

Alternatively, pass a MappedinCoordinate to draw a Marker at a specified latitude/longitude.

const coordinate = mapView.currentMap.createCoordinate(
	43.51905183293411, // latitude
	-80.53701846381122, // longitude
);

const markerTemplate = `
  <div class="marker">
    <p>Marker</p>
  </div>`;

mapView.Markers.add(coordinate, markerTemplate);

Individual Marker anchoring and rank can be tweaked via the options argument of Markers.add()

mapView.Markers.add(coordinate, markerTemplate, {
	anchor: MARKER_ANCHOR.CENTER,
	rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});

The anchor option sets the default position of the marker. The available positions are defined in the MARKER_ANCHOR enum which contains 5 values. The default position is CENTER.

enum MARKER_ANCHOR {
	CENTER = 0,
	TOP = 1,
	LEFT = 2,
	BOTTOM = 3,
	RIGHT = 4,
}

The rank option enables you to set the priority or rank of the markers. The ranks are defined in the enum COLLISION_RANKING_TIERS. The default rank is HIGH.

Removing Markers​

Markers can be removed from the map by passing the Marker ID returned from Markers.add() to the Markers.remove() method.

The following code snippet demonstrates removing the old marker before creating a new one on polygon click.

let marker;

mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
	if (marker) {
		mapView.Markers.remove(marker);
	}

	if (polygons.length > 0) {
		const location = mapView.getPrimaryLocationForPolygon(polygons[0]);
		if (!location) return;

		const { name } = location;

		const markerTemplate = `
      <div class="marker">
        <p>${name}</p>
      </div>`;

		marker = mapView.Markers.add(polygons[0].entrances[0], markerTemplate);
	}
});

Use Markers.removeAll() to remove all existing Markers from the map.

mapView.Markers.removeAll();

Moving Markers​

To update the position of a Marker, retain the Marker ID from Markers.add() and pass it to the Markers.setPosition() method. The new position must be a MappedinNode or MappedinCoordinate

const startingLocation = venue.locations.find((l) => l.name === 'Target')!;
const endLocation = venue.locations.find((l) => l.name === 'Apple')!;

const markerTemplate = `
  <div class="marker">
    <p>${name}</p>
  </div>`;

const marker = mapView.Markers.add(startingLocation.polygons[0].entrances[0], markerTemplate);

mapView.Markers.setPosition(marker, endLocation.polygons[0].entrances[0]);

Use Markers.animate() to animate this position change. This method takes the same parameters with the additional TAnimationOptions.

const startingLocation = venue.locations.find((l) => l.name === 'Target')!;
const endLocation = venue.locations.find((l) => l.name === 'Apple')!;

const markerTemplate = `
  <div class="marker">
    <p>Marker</p>
  </div>`;

const marker = mapView.Markers.add(startingLocation.polygons[0].entrances[0], markerTemplate);

mapView.Markers.animate(marker, endLocation.polygons[0].entrances[0], {
	duration: 5000,
	easing: CAMERA_EASING_MODE.LINEAR,
});

The duration is the animation time in milliseconds. The easing options are defined in the enum CAMERA_EASING_MODE.

The following sample displays a custom Marker at a default coordinate. When the map is clicked, the Marker is animated to the clicked location.

Additional Reading​