{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "delivery-tracking-map", "title": "Delivery Tracking Map", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/delivery-tracking-map/delivery-tracking-map.component.ts", "content": "// Live order delivery route on a Mapbox map: courier location, dropoff destination and\n// the merchant origin with a real-time ETA countdown side panel. Port of the React block\n// 1:1; markers follow the last-mile-courier-dispatch Angular pattern.\nimport {\n type AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n type ElementRef,\n Input,\n type OnDestroy,\n type QueryList,\n ViewChildren,\n} from '@angular/core'\nimport type * as mapboxgl from 'mapbox-gl'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiMapComponent, type MapLayerInput, type MapSourceInput } from '@/ui/map/map.component'\n\nexport const DELIVERY_ORIGIN: [number, number] = [-122.4194, 37.7749]\nexport const DELIVERY_DESTINATION: [number, number] = [-122.392, 37.7915]\nexport const COURIER_POSITION: [number, number] = [-122.405, 37.783]\n\nexport const DELIVERY_ROUTE_COORDS: [number, number][] = [\n [-122.4194, 37.7749],\n [-122.414, 37.778],\n [-122.405, 37.783],\n [-122.399, 37.787],\n [-122.392, 37.7915],\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-delivery-tracking-map, [ui-delivery-tracking-map]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"delivery-tracking-map\"',\n '[class]': 'hostClass',\n },\n imports: [\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiMapComponent,\n ],\n template: `\n
\n
\n \n \n
\n
\n \n
\n
\n \n Merchant\n
\n
\n
\n
\n \n
\n
\n \n \n 🛵\n
\n
\n
\n
\n
\n \n
\n
\n \n \n Delivery Dropoff\n \n
\n
\n
\n
\n
\n \n\n \n
\n
\n
\n ORDER #8924\n Approaching\n
\n

Express Courier

\n

Estimated delivery in 8 mins (0.8 mi away)

\n
\n
\n
\n
\n Driver\n Carlos M. (★ 4.98)\n
\n
\n Vehicle\n E-Scooter #412\n
\n
\n Destination\n Market St & 2nd Ave\n
\n
\n\n
\n
\n \n 12:42 PM — Order picked up\n
\n
\n \n 12:51 PM — Approaching building\n
\n
\n\n
\n \n \n
\n
\n
\n \n `,\n})\nexport class UiDeliveryTrackingMapComponent implements AfterViewInit, OnDestroy {\n @Input() accessToken?: string\n @Input('class') className?: string\n\n @ViewChildren('marker') private markerEls?: QueryList>\n\n readonly origin: [number, number] = [...DELIVERY_ORIGIN] as [number, number]\n readonly destination: [number, number] = [...DELIVERY_DESTINATION] as [number, number]\n readonly courierPosition: [number, number] = [...COURIER_POSITION] as [number, number]\n\n /** The delivery route polyline (the React block's MapSource). */\n readonly routeSources: MapSourceInput[] = [\n {\n id: 'delivery-route',\n type: 'geojson',\n data: {\n type: 'Feature',\n properties: {},\n geometry: { type: 'LineString', coordinates: DELIVERY_ROUTE_COORDS.map((c) => [...c]) },\n },\n },\n ]\n\n /** The blue route line (the React block's MapLayer). */\n readonly routeLayers: MapLayerInput[] = [\n {\n id: 'delivery-route-line',\n type: 'line',\n source: 'delivery-route',\n layout: { 'line-cap': 'round', 'line-join': 'round' },\n paint: { 'line-color': '#2563eb', 'line-width': 4 },\n },\n ]\n\n private map: mapboxgl.Map | null = null\n private markers: mapboxgl.Marker[] = []\n private destroyed = false\n\n get hostClass(): string {\n return cn('block w-full', this.className)\n }\n\n ngAfterViewInit(): void {\n // A new marker list re-renders the marker elements; put the new set on the map.\n this.markerEls?.changes.subscribe(() => void this.syncMarkers())\n }\n\n ngOnDestroy(): void {\n this.destroyed = true\n this.clearMarkers()\n this.map = null\n }\n\n focusCourier(): void {\n this.map?.flyTo?.({ center: this.courierPosition, zoom: 14.5 })\n }\n\n focusDestination(): void {\n this.map?.flyTo?.({ center: this.destination, zoom: 15 })\n }\n\n onMapCreated(map: mapboxgl.Map): void {\n this.map = map\n void this.syncMarkers()\n }\n\n /** One mapbox-gl Marker per waypoint: merchant and dropoff anchored at the bottom\n (the React MapMarkers), the courier centred (React anchor=\"center\"). */\n private async syncMarkers(): Promise {\n const map = this.map\n const els = this.markerEls?.toArray() ?? []\n if (!map) return\n const mod = await import('mapbox-gl')\n const mapbox = mod.default ?? mod\n if (this.destroyed || map !== this.map) return\n this.clearMarkers()\n const waypoints: { coords: [number, number]; anchor: 'bottom' | 'center' }[] = [\n { coords: this.origin, anchor: 'bottom' },\n { coords: this.courierPosition, anchor: 'center' },\n { coords: this.destination, anchor: 'bottom' },\n ]\n this.markers = els.flatMap((el, i) => {\n const waypoint = waypoints[i]\n if (!waypoint) return []\n return [\n new mapbox.Marker({ element: el.nativeElement, anchor: waypoint.anchor }).setLngLat(waypoint.coords).addTo(map),\n ]\n })\n }\n\n private clearMarkers(): void {\n for (const m of this.markers) m.remove()\n this.markers = []\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/delivery-tracking-map/delivery-tracking-map.component.ts" }, { "path": "packages/registry-angular/blocks/delivery-tracking-map/index.ts", "content": "export {\n UiDeliveryTrackingMapComponent,\n DELIVERY_ORIGIN,\n DELIVERY_DESTINATION,\n COURIER_POSITION,\n DELIVERY_ROUTE_COORDS,\n} from './delivery-tracking-map.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/delivery-tracking-map/index.ts" } ], "dependencies": [ "mapbox-gl" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/map.json" ], "description": "Live order delivery route showing courier location, dropoff destination, and real-time ETA countdown.", "categories": [ "logistics", "delivery", "map" ] }