Class Markers

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

This class is accessed using MapView.Markers.

Refer to the Markers Guide for more information and interactive examples.

Index

Methods

add animateTo remove removeAll setPosition

Methods

add

add(
    target: IAnchorable,
    html: string,
    options?: TAddMarkerOptions,
): default.Marker
Adds a marker to the map.
Parameters
- target: IAnchorable
  The target object (Space, Door, or Coordinate) for the marker.
- html: string
  The HTML content for the Marker.
- Optionaloptions: TAddMarkerOptions
  Optional additional options for the Marker.
Returns default.Marker
The created Marker, or undefined if creation failed.
Example
```
// Add an interactive Marker to the map with custom HTML content.
mapView.Markers.add(coordinate, '<div>Marker Content</div>', { interactive: true });
```

animateTo

animateTo(
    marker: default.Marker,
    target: IAnchorable,
    options?: TAnimationOptions,
): Promise<void>
Update the position of a marker with an animation.
Parameters
- marker: default.Marker
  The Marker which should be updated.
- target: IAnchorable
  The new target object (Space, Door, or Coordinate) for the marker.
- Optionaloptions: TAnimationOptions
  Optional additional options for the animation.
Returns Promise<void>
A promise that resolves when the animation is complete.
Example
```
const marker = mapView.Markers.add(coordinate, '<div>Marker Content</div>');
mapView.Markers.animateTo(marker, newCoordinate, { duration: 1000 });
```

remove

remove(marker: default.Marker): void
Removes a marker from the map.
Parameters
- marker: default.Marker
  {Marker} The Marker which should be removed.
Returns void
Example
```
mapView.Markers.remove(marker);
```

removeAll

removeAll(): default.Marker[]
Remove all the markers from the map.

Returns default.Marker[]
Example
```
mapView.Markers.removeAll();
```

setPosition

setPosition(marker: default.Marker, target: IAnchorable): void
Update the position of a marker.
Parameters
- marker: default.Marker
  The Marker which should be removed.
- target: IAnchorable
  The new target object (Space, Door, or Coordinate) for the marker.
Returns void
Example
```
const marker = mapView.Markers.add(coordinate, '<div>Marker Content</div>');
mapView.Markers.setPosition(marker, newCoordinate);
```

Class Markers

Index

Methods

Methods

add

Parameters

Returns default.Marker

Example

animateTo

Parameters

Returns Promise<void>

Example

remove

Parameters

Returns void

Example

removeAll

Returns default.Marker[]

Example

setPosition

Parameters

Returns void

Example

Settings

On This Page