{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "store-locator-map", "title": "Store Locator Map", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/store-locator-map/store-locator-map.component.ts", "content": "// Store locator. Map pins plus a compact list with open/closed status; selecting a store\n// (pin or row) flies the camera there.\nimport {\n type AfterViewInit,\n Component,\n type ElementRef,\n Input,\n type OnDestroy,\n type OnInit,\n type QueryList,\n ViewChildren,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport type * as mapboxgl from 'mapbox-gl'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiMapComponent } from '@/ui/map/map.component'\n\nexport interface RetailStore {\n id: string\n name: string\n city: string\n country: string\n lat: number\n lng: number\n isOpen: boolean\n}\n\nexport const DEFAULT_STORES: RetailStore[] = [\n {\n id: 'nyc-soho',\n name: 'SoHo Flagship',\n city: 'New York',\n country: 'United States',\n lat: 40.7248,\n lng: -73.9984,\n isOpen: true,\n },\n {\n id: 'lon-regent',\n name: 'Regent Street',\n city: 'London',\n country: 'United Kingdom',\n lat: 51.5142,\n lng: -0.1418,\n isOpen: true,\n },\n { id: 'tyo-ginza', name: 'Ginza Studio', city: 'Tokyo', country: 'Japan', lat: 35.6719, lng: 139.7658, isOpen: true },\n {\n id: 'par-champs',\n name: 'Champs-Élysées',\n city: 'Paris',\n country: 'France',\n lat: 48.8718,\n lng: 2.3013,\n isOpen: true,\n },\n {\n id: 'syd-george',\n name: 'George Street',\n city: 'Sydney',\n country: 'Australia',\n lat: -33.8688,\n lng: 151.2093,\n isOpen: false,\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-store-locator-map, [ui-store-locator-map]',\n standalone: true,\n imports: [\n UiBadgeComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardContentComponent,\n UiMapComponent,\n ],\n host: {\n 'data-slot': 'store-locator-map',\n '[class]': 'hostClass',\n },\n template: `\n
\n

Stores

\n

{{ openCount }} open · {{ stores.length }} locations

\n
\n\n
\n
\n
\n \n \n
\n @for (store of stores; track store.id) {\n
\n
\n \n
\n
\n }\n
\n
\n
\n
\n\n
\n
\n

Locations

\n
\n
\n @for (store of stores; track store.id) {\n \n }\n
\n
\n \n `,\n})\nexport class UiStoreLocatorMapComponent implements OnInit, AfterViewInit, OnDestroy {\n @Input() stores: RetailStore[] = DEFAULT_STORES\n @Input() accessToken?: string\n @Input('class') className?: string\n\n @ViewChildren('marker') private markerEls?: QueryList>\n\n readonly selectedId = signal('')\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('flex h-full min-h-0 flex-col gap-4', this.className)\n }\n\n get openCount(): number {\n return this.stores.filter((s) => s.isOpen).length\n }\n\n ngOnInit(): void {\n this.selectedId.set(this.stores[0]?.id ?? '')\n }\n\n ngAfterViewInit(): void {\n // A new stores 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 markerClass(id: string): string {\n return this.selectedId() === id\n ? 'border-primary bg-primary text-primary-foreground rounded-full border px-2 py-0.5 text-xs font-semibold shadow-xs'\n : 'border-border bg-card text-foreground rounded-full border px-2 py-0.5 text-xs font-semibold shadow-xs'\n }\n\n rowClass(id: string): string {\n return cn(\n 'hover:bg-accent/50 flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors',\n this.selectedId() === id && 'bg-accent/60',\n )\n }\n\n onMapCreated(map: mapboxgl.Map): void {\n this.map = map\n void this.syncMarkers()\n }\n\n selectStore(store: RetailStore): void {\n this.selectedId.set(store.id)\n this.map?.flyTo?.({\n center: [store.lng, store.lat],\n zoom: 12.5,\n essential: true,\n duration: 900,\n })\n }\n\n /** One mapbox-gl Marker per store, anchored at its centre (the React MapMarker, 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 this.markers = els.flatMap((el, i) => {\n const store = this.stores[i]\n if (!store) return []\n return [\n new mapbox.Marker({ element: el.nativeElement, anchor: 'center' }).setLngLat([store.lng, store.lat]).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/store-locator-map/store-locator-map.component.ts" }, { "path": "packages/registry-angular/blocks/store-locator-map/index.ts", "content": "export { UiStoreLocatorMapComponent, DEFAULT_STORES, type RetailStore } from './store-locator-map.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/store-locator-map/index.ts" } ], "dependencies": [ "mapbox-gl" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/map.json" ], "description": "Store locator. Map pins plus a compact list with open/closed status and fly-to on select.", "categories": [ "dashboard", "app", "ecommerce" ] }