Put a map with live tracking in your app
One map component, either engine, with tracking built in.
The problem
You add a map, and you have picked a vendor. The component you wrote wraps their API, their marker objects and their event names, so changing engine later means rewriting every screen that shows a map — usually because of pricing rather than anything technical.
And live tracking, the thing maps are usually for, is rarely included: you get a map and then build the moving part yourself.
What you are building
Live surfaces, not screenshots — every one composed from the same components you would install.
Live tracking
Name a marker with the follow prop and the map recenters as it moves — the moving part is a prop, not a subscription you write.
Map search
fancy-map over OpenStreetMap; the same component swaps to Google without touching your code.
The code
import { Map } from "@particle-academy/fancy-map";
import { leafletProvider } from "@particle-academy/fancy-map/leaflet";
import "leaflet/dist/leaflet.css";
// Swapping to Google is this line and nothing else -- markers, events and view
// are the package's shapes, not the vendor's, so no screen changes.
const provider = leafletProvider();
<Map provider={provider} view={view} onViewChange={setView} markers={markers} />// `follow` names a marker id; the map recenters whenever that marker's position
// changes. Live tracking is then just keeping the markers array current --
// from your own socket, or from the built-in geolocation hook.
const position = useGeolocationTrack({ enabled: sharing });
<Map
provider={provider}
markers={[{ id: "van", position, label: "Van 12", icon: "V" }]}
follow="van"
/>How to solve it
Install the map surface
Engine-agnostic by design: OpenStreetMap and Google are adapters behind the same component, so the choice is configuration rather than architecture.
Run thisbash npm install @particle-academy/fancy-mapDrive it with data, not imperative calls
Markers and view state are props. Moving something means updating state, which is also what makes the surface bridgeable.
Turn on live tracking
Following a moving subject is part of the component rather than something you assemble from event handlers.
Let an agent drive the view
The map bridge exposes pan, pins, fit-bounds and follow — so an assistant can take the user to the right place instead of describing where to look.