Leaflet Maritime Vessel Map

blocklogistics

Automatic Identification System (AIS) vessel tracking on free OpenStreetMap/Esri tiles — no API key. Container ships, tankers, shipping lanes, and anchorage status.

Installation

$pnpm dlx uipkge-ng@latest add leaflet-maritime-vessel-map

$npx uipkge-ng@latest add leaflet-maritime-vessel-map

$yarn dlx uipkge-ng@latest add leaflet-maritime-vessel-map

$bunx uipkge-ng@latest add leaflet-maritime-vessel-map

Manifest:https://uipkge.dev/r/angular/leaflet-maritime-vessel-map.jsonInstalls to:src/app/components/blocks/leaflet-maritime-vessel-map/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Vessel

interface Vessel {
  mmsi: string
  name: string
  flag: string
  type: VesselType
  /** [lng, lat] — Mapbox order. */
  coords: [number, number]
  heading: number
  speedKnots: number
  draught: string
  dest: string
  eta: string
  status: VesselStatus
}

PortTerminal

interface PortTerminal {
  name: string
  coords: [number, number]
}

Includes

badge button card leaflet-map

Files installed (2)

src/app/components/blocks/leaflet-maritime-vessel-map/leaflet-maritime-vessel-map.component.ts9.2 kB

// Automatic Identification System (AIS) vessel tracking on free OpenStreetMap/Esri tiles —
// no API key. Container ships, tankers, shipping lanes, and anchorage status.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, ViewChild, signal } from '@angular/core'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import {
  UiLeafletMapComponent,
  UiLeafletMarkerComponent,
  UiLeafletPolylineComponent,
} from '@/ui/leaflet-map/leaflet-map.component'

export type VesselType = 'Container' | 'Crude Tanker' | 'Bulk Carrier' | 'Tug'
export type VesselStatus = 'Underway' | 'Moored' | 'At Anchor'

export interface Vessel {
  mmsi: string
  name: string
  flag: string
  type: VesselType
  /** [lng, lat] — Mapbox order. */
  coords: [number, number]
  heading: number
  speedKnots: number
  draught: string
  dest: string
  eta: string
  status: VesselStatus
}

// Module-level constant: a stable reference keeps the map's center input
// from re-firing setView on every render and cancelling flyTo animations.
export const MAP_CENTER: [number, number] = [4.4, 51.9]

export const DEFAULT_VESSELS: Vessel[] = [
  {
    mmsi: '219018442',
    name: 'EVER GIVEN',
    flag: 'PA',
    type: 'Container',
    coords: [4.04, 51.98],
    heading: 95,
    speedKnots: 13.8,
    draught: '15.7m',
    dest: 'RTM MAASVLAKTE',
    eta: 'OCT 24 14:00',
    status: 'Underway',
  },
  {
    mmsi: '636019812',
    name: 'NORDIC STAR',
    flag: 'LR',
    type: 'Crude Tanker',
    coords: [4.18, 51.94],
    heading: 265,
    speedKnots: 0.3,
    draught: '12.1m',
    dest: 'EUROPOORT ANCH',
    eta: 'OCT 24 08:30',
    status: 'At Anchor',
  },
  {
    mmsi: '356782000',
    name: 'PACIFIC RUBY',
    flag: 'SG',
    type: 'Bulk Carrier',
    coords: [4.33, 51.92],
    heading: 100,
    speedKnots: 10.6,
    draught: '10.4m',
    dest: 'NLRTM ECT',
    eta: 'OCT 29 06:00',
    status: 'Underway',
  },
  {
    mmsi: '508111222',
    name: 'HARBOR VALIANT',
    flag: 'NL',
    type: 'Tug',
    coords: [4.47, 51.9],
    heading: 180,
    speedKnots: 6.4,
    draught: '4.5m',
    dest: 'WAALHAVEN',
    eta: 'OCT 24 12:00',
    status: 'Underway',
  },
]

// Nieuwe Waterweg main channel (North Sea -> Waalhaven) + Maasvlakte approach lane.
export const SHIPPING_LANES: [number, number][][] = [
  [
    [3.94, 52.0],
    [4.08, 51.965],
    [4.22, 51.935],
    [4.36, 51.915],
    [4.55, 51.9],
  ],
  [
    [3.99, 52.03],
    [4.14, 51.99],
    [4.28, 51.945],
    [4.45, 51.905],
  ],
]

export interface PortTerminal {
  name: string
  coords: [number, number]
}

export const PORTS: PortTerminal[] = [
  { name: 'MAASVLAKTE', coords: [3.98, 51.99] },
  { name: 'EUROPOORT', coords: [4.09, 51.95] },
  { name: 'WAALHAVEN', coords: [4.42, 51.885] },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-leaflet-maritime-vessel-map, [ui-leaflet-maritime-vessel-map]',
  standalone: true,
  imports: [
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiLeafletMapComponent,
    UiLeafletMarkerComponent,
    UiLeafletPolylineComponent,
  ],
  host: {
    'data-slot': 'leaflet-maritime-vessel-map',
    '[class]': 'hostClass',
  },
  template: `
    <div class="border-border bg-card relative h-[480px] overflow-hidden rounded-xl border">
      <ui-leaflet-map variant="dark" [center]="mapCenter" [zoom]="11" class="h-full w-full">
        <!-- Shipping lanes -->
        @for (lane of shippingLanes; track $index) {
          <ui-leaflet-polyline
            [lngLatPath]="lane"
            color="#22d3ee"
            [weight]="2"
            [opacity]="0.45"
            dashArray="6 6"
            lineCap="round"
          />
        }

        <!-- Port terminals -->
        @for (p of ports; track p.name) {
          <ui-leaflet-marker [lngLat]="p.coords" anchor="center">
            <div class="flex flex-col items-center">
              <span class="size-2.5 rotate-45 rounded-[2px] border border-cyan-400/70 bg-cyan-500/40"></span>
              <span
                class="border-border bg-card/80 text-muted-foreground mt-1 rounded border px-1 py-0.5 font-mono text-xs tracking-wider whitespace-nowrap"
              >
                {{ p.name }}
              </span>
            </div>
          </ui-leaflet-marker>
        }

        <!-- AIS vessels -->
        @for (v of vessels; track v.mmsi) {
          <ui-leaflet-marker [lngLat]="v.coords" anchor="center">
            <div class="group relative flex cursor-pointer flex-col items-center" (click)="selectVessel(v)">
              <div [class]="vesselPinClass(v)" [style.transform]="'rotate(' + v.heading + 'deg)'">▲</div>
              <span [class]="vesselNameClass(v)">
                {{ v.name }}
              </span>
            </div>
          </ui-leaflet-marker>
        }
      </ui-leaflet-map>
    </div>

    <!-- AIS Telemetry Drawer -->
    <ui-card class="flex flex-col justify-between">
      <ui-card-header>
        <div class="flex items-center justify-between">
          <span ui-badge variant="outline" class="font-mono text-xs">{{ activeVessel().type }}</span>
          <span ui-badge class="border-cyan-500/20 bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">{{
            activeVessel().status
          }}</span>
        </div>
        <ui-card-title class="mt-2 font-mono text-lg">{{ activeVessel().name }}</ui-card-title>
        <ui-card-description class="font-mono text-xs"
          >MMSI: {{ activeVessel().mmsi }} • Flag: {{ activeVessel().flag }}</ui-card-description
        >
      </ui-card-header>
      <ui-card-content class="space-y-4">
        <div class="border-border bg-muted/40 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs">
          <div>
            <div class="text-muted-foreground text-xs uppercase">Speed Over Ground</div>
            <div class="text-foreground text-sm font-bold">{{ activeVessel().speedKnots }} kts</div>
          </div>
          <div>
            <div class="text-muted-foreground text-xs uppercase">Heading</div>
            <div class="text-foreground text-sm font-bold">{{ activeVessel().heading }}°</div>
          </div>
          <div class="mt-2">
            <div class="text-muted-foreground text-xs uppercase">Max Draught</div>
            <div class="text-foreground text-sm font-bold">{{ activeVessel().draught }}</div>
          </div>
          <div class="mt-2">
            <div class="text-muted-foreground text-xs uppercase">Destination</div>
            <div class="text-foreground truncate text-xs font-bold">{{ activeVessel().dest }}</div>
          </div>
        </div>

        <div class="border-border space-y-1 border-t pt-3">
          <div class="text-muted-foreground mb-1 font-mono text-xs tracking-wider uppercase">
            Rotterdam Approach Traffic
          </div>
          @for (v of vessels; track v.mmsi) {
            <button type="button" [class]="rowClass(v)" (click)="selectVessel(v)">
              <span class="font-mono">{{ v.name }}</span>
              <span class="font-mono text-xs opacity-75">{{ v.speedKnots }} kts</span>
            </button>
          }
        </div>

        <button ui-button variant="outline" size="sm" class="w-full font-mono text-xs" (click)="recenter()">
          Center on Vessel
        </button>
      </ui-card-content>
    </ui-card>
  `,
})
export class UiLeafletMaritimeVesselMapComponent {
  @Input() vessels: Vessel[] = DEFAULT_VESSELS
  @Input('class') className?: string

  @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent

  protected readonly mapCenter = MAP_CENTER
  protected readonly shippingLanes = SHIPPING_LANES
  protected readonly ports = PORTS

  readonly activeMmsi = signal(DEFAULT_VESSELS[0]?.mmsi ?? '')

  get hostClass(): string {
    return cn('grid gap-4 lg:grid-cols-[1fr_320px]', this.className)
  }

  activeVessel(): Vessel {
    return this.vessels.find((v) => v.mmsi === this.activeMmsi()) ?? this.vessels[0]!
  }

  selectVessel(v: Vessel): void {
    this.activeMmsi.set(v.mmsi)
    this.map?.flyTo?.({ center: v.coords, zoom: 11.5, duration: 800 })
  }

  recenter(): void {
    this.selectVessel(this.activeVessel())
  }

  vesselPinClass(v: Vessel): string {
    return cn(
      'flex size-7 items-center justify-center rounded-full font-bold text-cyan-400',
      this.activeMmsi() === v.mmsi ? 'bg-cyan-500/20 ring-2 ring-cyan-400' : 'bg-background/80',
    )
  }

  vesselNameClass(v: Vessel): string {
    return cn(
      'border-border bg-card/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-semibold tracking-wider whitespace-nowrap shadow-xs',
      this.activeMmsi() === v.mmsi ? 'border-cyan-400/50 text-cyan-400' : 'text-foreground',
    )
  }

  rowClass(v: Vessel): string {
    return cn(
      'flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors',
      this.activeMmsi() === v.mmsi
        ? 'bg-accent text-accent-foreground font-semibold'
        : 'hover:bg-muted text-muted-foreground',
    )
  }
}

src/app/components/blocks/leaflet-maritime-vessel-map/index.ts0.2 kB

Raw manifest:https://uipkge.dev/r/angular/leaflet-maritime-vessel-map.json

Change language