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.

Methods

add animateTo remove removeAll setPosition

Methods

add

  • add(target: IAnchorable, html: string, options?: TAddMarkerOptions): Marker

  • Adds a marker to the map.

    Parameters

    Returns 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: Marker,
        target: IAnchorable,
        options?: TAnimationOptions,
    ): Promise<void>

  • Update the position of a marker with an animation.

    Parameters

    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: Marker): void

  • Removes a marker from the map.

    Parameters

    Returns void

    Example

    mapView.Markers.remove(marker);

removeAll

  • removeAll(): Marker[]

  • Remove all the markers from the map.

    Returns Marker[]

    Example

    mapView.Markers.removeAll();

setPosition

  • setPosition(marker: Marker, target: IAnchorable): void

  • Update the position of a marker.

    Parameters

    Returns void

    Example

    const marker = mapView.Markers.add(coordinate, '<div>Marker Content</div>');
    mapView.Markers.setPosition(marker, newCoordinate);

Settings

Member Visibility

On This Page

Methods
MMNEPVFCICPMFPCPTTAAATR