Class Paths

Paths in Mappedin JS

Paths allow you to draw custom routes on the map, from simple straight lines between coordinates to complex navigation paths that avoid obstacles. While Navigation provides complete turn-by-turn directions, Paths give you fine-grained control over route visualization.

Features

  • Draw paths between any coordinates
  • Customizable styling (color, width, animation, etc.)
  • Integration with navigation directions
  • Animated path drawing and pulse effects
  • Support for dashed lines and arrows

Best Practice: Use MapData.getDirections() to generate navigation-aware paths that avoid walls and follow walkable routes, rather than drawing straight lines between coordinates.

Example Usage

// Draw a simple straight path
const path = mapView.Paths.add([coord1, coord2], { color: '#ff0000' });

// Draw a navigation path using directions
const directions = await mapView.getDirections(space1, space2);
if (directions) {
  const path = mapView.Paths.add(directions.path, {
    color: '#4b90e2',
    showPulse: true,
    animateDrawing: true
  });
}

// Remove a path
mapView.Paths.remove(path);

// Remove all paths
mapView.Paths.removeAll();

Path Styling Options

  • color: Path color (default: '#4b90e2')
  • width: Path width. Can be a number or an Interpolation.
  • showPulse: Animated pulse indicating direction
  • animateDrawing: Animate path drawing
  • displayArrowsOnPath: Show direction arrows
  • dashed: Use dashed line style

Advanced

  • Use interactive: true to make paths clickable.

More Information

This class is accessed using MapView.Paths.

Methods

add clearAllHighlightedPathSections clearHighlightedPathSection highlightPathSection remove removeAll

Methods

add

  • add(
        coordinates: Coordinate[],
        options?: { id?: string } & TAddPathOptions,
    ): Path

    Adds a path (Path) to the map.

    Parameters

    Returns Path

    A Path instance representing the created path.

    Example: Draw a simple red path

    const path = mapView.Paths.add([coord1, coord2], { color: '#ff0000' });

    Example: Draw a navigation path with animation

    const directions = await mapView.getDirections(space1, space2);
    if (directions) {
      const path = mapView.Paths.add(directions.path, {
        color: '#4b90e2',
        showPulse: true,
        animateDrawing: true,
        displayArrowsOnPath: true
      });
    }

    Example: Draw a dashed path with custom width

    const path = mapView.Paths.add(coordinates, {
      color: '#00ff00',
      dashed: true,
      width: 1,
    });

    See

    Wayfinding Guide

clearAllHighlightedPathSections

  • clearAllHighlightedPathSections(): void

    Clears the highlighted section of all paths.

    Returns void

clearHighlightedPathSection

  • clearHighlightedPathSection(path: Path): void

    Clears the highlighted section of a path.

    Parameters

    • path: Path

      The path to clear the highlight from.

    Returns void

highlightPathSection

remove

  • remove(path: Path): void

    Removes a specific path (Path) from the map.

    Parameters

    • path: Path

      The path to be removed.

    Returns void

    Example

    mapView.Paths.remove(path);

removeAll

  • removeAll(): Path[]

    Removes all paths (Path) from the map.

    Returns Path[]

    An array of all removed Path instances.

    Example

    const removedPaths = mapView.Paths.removeAll();

Settings

Member Visibility

On This Page

Paths in Mappedin JS
Methods