Each map primitive starts as a tokenized SVG contract, then downstream apps can swap in live tiles without changing the surrounding UI.
Cartography primitives
Twelve map and location primitives built as pure SVG — no Mapbox, no Leaflet, no Google Maps. Downstream apps swap their real tile renderer into the same component shape. Domain data is Oak Flats workshop + Illawarra suburbs.
Production answer
Cartography primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Cartography primitives states
Generative search brief
Cartography primitives: Twelve map and location primitives built as pure SVG — no Mapbox, no Leaflet, no Google Maps. Downstream apps swap their real tile renderer into the same component shape. Domain data is Oak Flats workshop + Illawarra suburbs.
Maps shared DNA
Cartography is a primitive contract, not a one-off illustration
The maps family now exposes the shared contract before the gallery: base canvas, marker layer, coverage overlays, route telemetry, form handoff, and conversion CTA. Every card below maps back to that same chain.
Pins, radius rings, route lines, chips, finder forms, and locator cards consume shared color, spacing, radius, focus, and motion tokens.
Coverage examples stay grounded in workshop, suburb, postcode, drive-time, and live job-tracking scenarios.
Static map canvas
Hand-drawn SVG landmass, harbour, and roads. Four tonal variants for downstream apps.
Map pin
Drop-animated pin with optional pulse, index badge, and four tones for workshop status.
Service radius
Concentric service-radius rings centered on the workshop with km labels at each tier.
Workshop locator
Map left, locator list right — entries highlight matching pins and announce distance.
Route preview line
SVG path between two pins with animated dash plus a floating distance/ETA chip.
Region heatmap
Hex-bin grid overlay with intensity tones for region performance and hover tooltips.
Suburb finder
Postcode input plus Locate-me CTA with an auto-suggest preview of Illawarra suburbs.
Distance + duration chip
Compact car-iconed chip showing distance and minutes with traffic-tone status pip.
Nearest CTA
Primary closest-workshop card with route CTA plus an alternative-options stack.
Postcode bounds
SVG polygon overlay for postcode boundaries with a label tag at each anchor.
Country flag picker
Searchable country selector with inline flag SVGs — AU, NZ, US, UK, IE, CA, ZA first.
Live job tracker
Workshop center plus drifting technician pins, animated via framer-motion (reduced-motion safe).