Leaflet Asset Tracking Map

blocklogistics

Intermodal cargo container tracking on free Esri satellite tiles — no API key — with shipping lanes, cold-chain sensor status, and geofence state.

Installation

$pnpm dlx uipkge-ng@latest add leaflet-asset-tracking-map

$npx uipkge-ng@latest add leaflet-asset-tracking-map

$yarn dlx uipkge-ng@latest add leaflet-asset-tracking-map

$bunx uipkge-ng@latest add leaflet-asset-tracking-map

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

Variants

Loading interactive previews…

Schema

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

ContainerAsset

interface ContainerAsset {
  id: string
  containerNo: string
  type: 'Reefer' | 'Dry Cargo' | 'Hazardous'
  location: string
  coords: LngLat
  temp?: string
  humidity?: string
  battery: string
  geofence: 'Inside Zone' | 'In Transit' | 'Exited Perimeter'
  status: 'Nominal' | 'Alert' | 'Secured'
}

Includes

badge button card leaflet-map

Files installed (2)

src/app/components/blocks/leaflet-asset-tracking-map/leaflet-asset-tracking-map.component.ts9.1 kB

// Intermodal cargo container tracking on free Esri satellite tiles — no API key — with
// shipping lanes, cold-chain sensor status, and geofence state. 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 LngLat = [number, number]

export interface ContainerAsset {
  id: string
  containerNo: string
  type: 'Reefer' | 'Dry Cargo' | 'Hazardous'
  location: string
  coords: LngLat
  temp?: string
  humidity?: string
  battery: string
  geofence: 'Inside Zone' | 'In Transit' | 'Exited Perimeter'
  status: 'Nominal' | 'Alert' | 'Secured'
}

export const DEFAULT_ASSETS: ContainerAsset[] = [
  {
    id: 'c-1',
    containerNo: 'MSKU-948102',
    type: 'Reefer',
    location: 'Pasir Panjang Terminal, Berth P5',
    coords: [103.792, 1.276],
    temp: '-18.4°C',
    humidity: '84%',
    battery: '92%',
    geofence: 'Inside Zone',
    status: 'Nominal',
  },
  {
    id: 'c-2',
    containerNo: 'CMAU-310892',
    type: 'Dry Cargo',
    location: 'Singapore Strait, Eastbound Lane',
    coords: [103.945, 1.205],
    battery: '78%',
    geofence: 'In Transit',
    status: 'Nominal',
  },
  {
    id: 'c-3',
    containerNo: 'HLXU-772901',
    type: 'Reefer',
    location: 'Jurong Island Anchorage',
    coords: [103.71, 1.245],
    temp: '+4.2°C',
    humidity: '62%',
    battery: '64%',
    geofence: 'Inside Zone',
    status: 'Alert',
  },
  {
    id: 'c-4',
    containerNo: 'OOLU-550183',
    type: 'Hazardous',
    location: 'Tuas Port, Hazardous Bay T2',
    coords: [103.635, 1.285],
    battery: '95%',
    geofence: 'Inside Zone',
    status: 'Secured',
  },
]

/** Eastbound / westbound shipping lanes through the Singapore Strait. */
const SHIPPING_LANES: LngLat[][] = [
  [
    [103.5, 1.16],
    [103.7, 1.18],
    [103.9, 1.2],
    [104.1, 1.22],
  ],
  [
    [103.5, 1.21],
    [103.7, 1.24],
    [103.9, 1.27],
    [104.1, 1.29],
  ],
]

// Central Singapore as [lng, lat] — a stable reference so the map's center input never re-fires.
const SINGAPORE_CENTER: LngLat = [103.8519, 1.29027]

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

        @for (a of assets; track a.id) {
          <ui-leaflet-marker [lngLat]="a.coords" anchor="bottom">
            <button
              type="button"
              class="group relative flex cursor-pointer flex-col items-center"
              (click)="selectAsset(a)"
            >
              <span [class]="pinClass(a)">
                <svg
                  class="size-4"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  aria-hidden="true"
                >
                  <path
                    d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
                  />
                  <path d="m3.3 7 8.7 5 8.7-5" />
                  <path d="M12 22V12" />
                </svg>
              </span>
              <span
                class="border-border bg-background/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-bold shadow-xs"
              >
                {{ shortNo(a) }}
              </span>
            </button>
          </ui-leaflet-marker>
        }
      </ui-leaflet-map>
    </div>

    <!-- Asset Telemetry & Sensor Card -->
    <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">
            {{ activeAsset().type }}
          </span>
          <span ui-badge [class]="statusClass(activeAsset())">
            {{ activeAsset().status }}
          </span>
        </div>
        <ui-card-title class="mt-2 font-mono text-lg">{{ activeAsset().containerNo }}</ui-card-title>
        <ui-card-description class="text-xs">{{ activeAsset().location }}</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">
          @if (activeAsset().temp) {
            <div>
              <div class="text-muted-foreground text-xs uppercase">Cold Chain Temp</div>
              <div [class]="tempClass(activeAsset())">
                {{ activeAsset().temp }}
              </div>
            </div>
          }
          @if (activeAsset().humidity) {
            <div>
              <div class="text-muted-foreground text-xs uppercase">Humidity</div>
              <div class="text-foreground text-sm font-bold">{{ activeAsset().humidity }}</div>
            </div>
          }
          <div>
            <div class="text-muted-foreground text-xs uppercase">IoT Battery</div>
            <div class="text-foreground text-sm font-bold">{{ activeAsset().battery }}</div>
          </div>
          <div>
            <div class="text-muted-foreground text-xs uppercase">Geofence</div>
            <div class="text-foreground text-sm font-bold">{{ activeAsset().geofence }}</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">Tracked Cargo Units</div>
          @for (a of assets; track a.id) {
            <button type="button" [class]="rowClass(a)" (click)="selectAsset(a)">
              <span class="font-mono">{{ a.containerNo }}</span>
              <span [class]="rowTypeClass(a)">
                {{ a.type }}
              </span>
            </button>
          }
        </div>

        <button ui-button variant="outline" size="sm" class="w-full font-mono text-xs" (click)="centerOnActive()">
          Center on Container
        </button>
      </ui-card-content>
    </ui-card>
  `,
})
export class UiLeafletAssetTrackingMapComponent {
  @Input() assets: ContainerAsset[] = DEFAULT_ASSETS
  @Input('class') className?: string

  @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent

  protected readonly singaporeCenter = SINGAPORE_CENTER
  protected readonly shippingLanes = SHIPPING_LANES

  readonly activeId = signal(DEFAULT_ASSETS[0]?.id ?? '')

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

  activeAsset(): ContainerAsset {
    return this.assets.find((a) => a.id === this.activeId()) ?? this.assets[0]!
  }

  selectAsset(a: ContainerAsset): void {
    this.activeId.set(a.id)
    this.map?.flyTo({ center: a.coords, zoom: 11.5 })
  }

  centerOnActive(): void {
    this.selectAsset(this.activeAsset())
  }

  shortNo(a: ContainerAsset): string {
    return a.containerNo.split('-')[1] ?? a.containerNo
  }

  pinClass(a: ContainerAsset): string {
    return cn(
      'flex size-7 items-center justify-center rounded-md shadow-md ring-2',
      a.status === 'Alert'
        ? 'bg-warning text-white ring-amber-400'
        : 'bg-primary text-primary-foreground ring-primary/25',
    )
  }

  statusClass(a: ContainerAsset): string {
    return a.status === 'Alert'
      ? 'border-warning/20 bg-warning/10 text-warning'
      : 'border-success/20 bg-success/10 text-success'
  }

  tempClass(a: ContainerAsset): string {
    return cn('text-sm font-bold', a.status === 'Alert' ? 'text-warning' : 'text-foreground')
  }

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

  rowTypeClass(a: ContainerAsset): string {
    return cn('font-mono text-xs', a.status === 'Alert' ? 'text-warning font-bold' : 'opacity-70')
  }
}

src/app/components/blocks/leaflet-asset-tracking-map/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/leaflet-asset-tracking-map.json

Change language