Routes

Draw polylines for trails, deliveries, and directions.

Basic Route

ng-map-route renders a line from an array of [lng, lat] coordinates. Customize color, width, opacity, and dash pattern.

import { Component } from '@angular/core';
import { MapComponent, MapRouteComponent } from 'ng-mapcn';

@Component({
  selector: 'app-basic-route',
  standalone: true,
  imports: [MapComponent, MapRouteComponent],
  template: `
    <div class="h-[420px]">
      <ng-map [center]="[-73.97, 40.782]" [zoom]="12">
        <ng-map-route
          [coordinates]="coordinates"
          color="#3b82f6"
          [width]="4"
          [opacity]="0.9"
        />
      </ng-map>
    </div>
  `,
})
export class BasicRouteComponent {
  readonly coordinates: [number, number][] = [
    [-73.9585, 40.8004],
    [-73.9718, 40.7821],
    [-73.9819, 40.7679],
    // ...
  ];
}

Route Planning

Fetch real driving directions from the free OSRM API and render the returned GeoJSON geometry. This example routes from the Louvre to the Eiffel Tower in Paris.

import { HttpClient } from '@angular/common/http';
import { Component, inject, signal } from '@angular/core';
import { MapComponent, MapRouteComponent } from 'ng-mapcn';

@Component({
  selector: 'app-osrm-route',
  standalone: true,
  imports: [MapComponent, MapRouteComponent],
  template: `
    <div class="h-[420px]">
      <ng-map [center]="[2.34, 48.86]" [zoom]="12.5">
        @if (route().length > 0) {
          <ng-map-route [coordinates]="route()" color="#3b82f6" [width]="4" />
        }
      </ng-map>
    </div>
  `,
})
export class OsrmRouteComponent {
  private readonly http = inject(HttpClient);
  readonly route = signal<[number, number][]>([]);

  constructor() {
    const url =
      'https://router.project-osrm.org/route/v1/driving/' +
      '2.3522,48.8566;2.2945,48.8584?overview=full&geometries=geojson';
    this.http.get<any>(url).subscribe((res) => {
      this.route.set(res.routes[0].geometry.coordinates);
    });
  }
}

Progress and Route Marker

Set progress (0 to 1) and add an ng-route-progress child to draw the covered part. An ng-route-marker sits at start, end, progress or a 0 to 1 fraction.

Progress 40%

import { Component, signal } from '@angular/core';
import {
  MapComponent,
  MapRouteComponent,
  MarkerContentComponent,
  RouteMarkerComponent,
  RouteProgressComponent,
} from 'ng-mapcn';

@Component({
  selector: 'app-route-progress',
  standalone: true,
  imports: [
    MapComponent,
    MapRouteComponent,
    RouteProgressComponent,
    RouteMarkerComponent,
    MarkerContentComponent,
  ],
  template: `
    <input
      type="range" min="0" max="1" step="0.01"
      [value]="progress()"
      (input)="progress.set(+$any($event.target).value)"
    />
    <div class="h-[420px]">
      <ng-map [center]="[-73.97, 40.782]" [zoom]="12">
        <ng-map-route
          [coordinates]="coordinates"
          color="#94a3b8"
          [width]="4"
          [progress]="progress()"
        >
          <ng-route-progress color="#22c55e" />
          <ng-route-marker at="start">
            <ng-marker-content>
              <div class="size-3.5 rounded-full border-2 border-white bg-slate-500"></div>
            </ng-marker-content>
          </ng-route-marker>
          <ng-route-marker at="progress">
            <ng-marker-content>
              <div class="size-4 rounded-full border-2 border-white bg-emerald-500 shadow-lg"></div>
            </ng-marker-content>
          </ng-route-marker>
        </ng-map-route>
      </ng-map>
    </div>
  `,
})
export class RouteProgressExampleComponent {
  readonly progress = signal(0.4);
  readonly coordinates: [number, number][] = [
    [-73.9585, 40.8004],
    [-73.9718, 40.7821],
    [-73.9819, 40.7679],
    // ...
  ];
}

Popups Arcs