Class Markers

Markers in Mappedin JS

Markers are interactive HTML elements anchored to a Door, Space, Coordinate, or Node on the map. They automatically rotate and reposition as the camera moves, making them ideal for highlighting points of interest, custom icons, or interactive UI overlays.

Features

  • Fully customizable HTML content
  • Automatic collision management and visibility ranking
  • Support for interactivity (click, hover, etc.)
  • Dynamic resizing and animation

Best Practice: Use the rank option to control marker visibility priority. Use interactive: true to enable SDK-level click/hover events, or 'pointer-events-auto' for native browser pointer events.

Example Usage

// Add a simple marker
mapView.Markers.add(coordinate, '<div>Marker Content</div>', { interactive: true });

// Add a marker with custom placement and high priority
mapView.Markers.add(space, '<div>Shop</div>', { placement: 'top', rank: 'always-visible' });

// Remove a marker
mapView.Markers.remove(marker);

// Remove all markers
mapView.Markers.removeAll();

// Move a marker to a new coordinate
mapView.Markers.setPosition(marker, newCoordinate);

// Animate a marker to a new coordinate
mapView.Markers.animateTo(marker, newCoordinate, { duration: 1000 });

Advanced

  • Dynamic resizing is enabled by default - use dynamicResize: false for static content.
  • Use zIndex and rank: 'always-visible' to keep important markers on top.

More Information

This class is accessed using MapView.Markers.

Methods

add animateTo getAll 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 with custom HTML

    mapView.Markers.add(coordinate, '<div>Marker Content</div>', { interactive: true });

    Example: Add a marker with high priority and custom placement

    mapView.Markers.add(space, '<div>Shop</div>', { placement: 'top', rank: 'always-visible' });

    See

    Markers Guide

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 });

getAll

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

Markers in Mappedin JS
Methods