Mappedin JS - v6.14.0
    Preparing search index...

    Interface Markers

    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.

    • 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.

    // 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 });
    • Dynamic resizing is enabled by default - use dynamicResize: false for static content.
    • Use zIndex and rank: 'always-visible' to keep important markers on top.

    This class is accessed using MapView.Markers.

    interface Markers {
        add(
            target: IAnchorable,
            html: string,
            options?: TAddMarkerOptions,
        ): Marker;
        animateTo(
            marker: Marker,
            target: IAnchorable,
            options?: TAnimationOptions,
        ): Promise<void>;
        getAll(): Marker[];
        remove(marker: Marker): void;
        removeAll(): Marker[];
        setPosition(marker: Marker, target: IAnchorable): void;
    }
    Index

    Methods

    add animateTo getAll remove removeAll setPosition

    Methods

    • Adds a marker to the map.

      Parameters

      Returns Marker

      The created Marker, or undefined if creation failed.

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

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

      Markers Guide

    • Update the position of a marker with an animation.

      Parameters

      Returns Promise<void>

      A promise that resolves when the animation is complete.

      const marker = mapView.Markers.add(coordinate, '<div>Marker Content</div>');
      mapView.Markers.animateTo(marker, newCoordinate, { duration: 1000 });

    • Removes a marker from the map.

      Parameters

      Returns void

      mapView.Markers.remove(marker);

    • Remove all the markers from the map.

      Returns Marker[]

      mapView.Markers.removeAll();

    • Update the position of a marker.

      Parameters

      Returns void

      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