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

    Interface Paths

    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.

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

    // 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();
    • 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
    • Use interactive: true to make paths clickable.

    This class is accessed using MapView.Paths.

    interface Paths {
        add(
            coordinates: Coordinate[],
            options?: { id?: string } & TAddPathOptions,
        ): Path;
        clearAllHighlightedPathSections(): void;
        clearHighlightedPathSection(path: Path): void;
        highlightPathSection(
            path: Path,
            start: Coordinate,
            end: Coordinate,
            options?: TPathSectionHighlightOptions,
        ): { animation: Promise<unknown> } | undefined;
        remove(path: Path): void;
        removeAll(): Path[];
    }
    Index

    Methods

    add clearAllHighlightedPathSections clearHighlightedPathSection highlightPathSection remove removeAll

    Methods

    • Adds a path (Path) to the map.

      Parameters

      Returns Path

      A Path instance representing the created path.

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

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

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

      Wayfinding Guide

    • Clears the highlighted section of all paths.

      Returns void

    • Clears the highlighted section of a path.

      Parameters

      • path: Path

        The path to clear the highlight from.

      Returns void

    • Removes a specific path (Path) from the map.

      Parameters

      • path: Path

        The path to be removed.

      Returns void

      mapView.Paths.remove(path);

    • Removes all paths (Path) from the map.

      Returns Path[]

      An array of all removed Path instances.

      const removedPaths = mapView.Paths.removeAll();

    Settings

    Member Visibility

    On This Page

    Paths in Mappedin JS
    Methods