# unmap component registry > Copy-in map components for React (shadcn) and Vue or Nuxt (shadcn-vue), wired to the unmap maps API: maps of Canada with tiles, geocoding and routing on one key. Components and page blocks ship in both lanes under the same name; templates and examples are React only. Install any item with `npx @unmap/cli add `, which reads package.json to pick the lane, or with the lane's own CLI as each page shows. Items that draw on a map go inside `map` and install `map-context` themselves. Components take your unmap key as `apiKey` (Vue: `api-key`). Usage is metered per request, not per map load. To start: run `npx @unmap/cli add map`, then render `` (Vue: ``) inside an element that has a height. ## Map and markers - [map-context](https://registry.unmap.dev/llm/map-context.md): Headless MapLibre lifecycle for React: MapProvider, useMap, useMapReady. The shared map store every other unmap component depends on. Vue: https://registry.unmap.dev/llm/vue/map-context.md - [map-themes](https://registry.unmap.dev/llm/map-themes.md): Named short theme presets (u00 and up) for the Map theme prop, the SDK theme option, and the gateway ?theme= param. Compose your own at unmap.dev/create. Vue: https://registry.unmap.dev/llm/vue/map-themes.md - [map](https://registry.unmap.dev/llm/map.md): The unmap map display component. Mounts a container, wires a MapLibre map to the unmap gateway, and shares it with its children. Vue: https://registry.unmap.dev/llm/vue/map.md - [marker-popup](https://registry.unmap.dev/llm/marker-popup.md): Declarative , , and primitives positioned on the map via useMap(). Pins can be dragged. Vue: https://registry.unmap.dev/llm/vue/marker-popup.md - [map-controls](https://registry.unmap.dev/llm/map-controls.md): Zoom, compass, locate, fullscreen, globe and 3D terrain buttons on your ButtonGroup, Button and Tooltip. Pair with controls={false} on Map; the attribution stays. Vue: https://registry.unmap.dev/llm/vue/map-controls.md ## Data layers - [map-layers](https://registry.unmap.dev/llm/map-layers.md): The shared layer lifecycle for unmap data items: adds a GeoJSON source and its layers below the labels, re-adds them after a style swap, updates data in place, and resolves your design tokens to MapLibre colours. Vue: https://registry.unmap.dev/llm/vue/map-layers.md - [route-line](https://registry.unmap.dev/llm/route-line.md): Draw a route or any line on the map: theme casing, alternatives in --muted-foreground, travelled progress, and a per-point colour gradient on your chart tokens. Survives a style swap. Vue: https://registry.unmap.dev/llm/vue/route-line.md - [geojson-layer](https://registry.unmap.dev/llm/geojson-layer.md): Draw any GeoJSON as fills, lines and points on your tokens, with hover highlight and click/hover events. Vue: https://registry.unmap.dev/llm/vue/geojson-layer.md - [cluster-layer](https://registry.unmap.dev/llm/cluster-layer.md): Cluster many points with MapLibre's own clustering: counts, click to zoom in, and summed properties. Vue: https://registry.unmap.dev/llm/vue/cluster-layer.md - [heatmap-layer](https://registry.unmap.dev/llm/heatmap-layer.md): Point density as a heatmap on your --primary, weighted by a property. Vue: https://registry.unmap.dev/llm/vue/heatmap-layer.md - [arc-layer](https://registry.unmap.dev/llm/arc-layer.md): Curved connections between pairs of places, with hover and click. Opposite directions bow apart. Vue: https://registry.unmap.dev/llm/vue/arc-layer.md - [flow-layer](https://registry.unmap.dev/llm/flow-layer.md): Origin-destination flows in the flowmap.blue style: width by volume, arrowheads, location totals, time and top-N filters, optional clustering by zoom. Vue: https://registry.unmap.dev/llm/vue/flow-layer.md - [layer-legend](https://registry.unmap.dev/llm/layer-legend.md): A checkbox per row that switches style layers on and off, with optional per-value filters and swatches. On your shadcn Field and Checkbox; survives a style swap. Vue: https://registry.unmap.dev/llm/vue/layer-legend.md ## Search and routing - [geocoder](https://registry.unmap.dev/llm/geocoder.md): A search box that calls the unmap gateway geocode API and flies the map to a result. Vue: https://registry.unmap.dev/llm/vue/geocoder.md - [routing-panel](https://registry.unmap.dev/llm/routing-panel.md): From/to inputs that call the unmap routing API, draw the route line on the map, and list its turn-by-turn steps. Vue: https://registry.unmap.dev/llm/vue/routing-panel.md - [route-steps](https://registry.unmap.dev/llm/route-steps.md): A route's turn-by-turn steps as a list on your shadcn Button: an icon per maneuver, the instruction in English or French, and the distance. Hover a step to highlight its stretch of the line; click it to frame it on the map. Vue: https://registry.unmap.dev/llm/vue/route-steps.md ## Overlay components - [energy-layer-control](https://registry.unmap.dev/llm/energy-layer-control.md): Toggles the energy overlay set on the existing map: a layer-legend preset. Pair with profile="energy" on Map. Vue: https://registry.unmap.dev/llm/vue/energy-layer-control.md - [energy-map](https://registry.unmap.dev/llm/energy-map.md): Map already composed with profile="energy". Defaults to muted cartography. Not a style. Vue: https://registry.unmap.dev/llm/vue/energy-map.md - [well-search](https://registry.unmap.dev/llm/well-search.md): Search box for UWIs and well licences. Sends the query string only; the gateway detects the source. Vue: https://registry.unmap.dev/llm/vue/well-search.md - [legal-land-search](https://registry.unmap.dev/llm/legal-land-search.md): Search box for Canadian legal land descriptions. Sends the query string only; the gateway detects the source. Vue: https://registry.unmap.dev/llm/vue/legal-land-search.md - [energy-popup](https://registry.unmap.dev/llm/energy-popup.md): Identify wells, pipelines, and facilities on click. Pair with profile="energy" on Map. Vue: https://registry.unmap.dev/llm/vue/energy-popup.md - [treaty-context](https://registry.unmap.dev/llm/treaty-context.md): Historic and modern treaty switches, a coordinate lookup and an accessible details panel for the treaties overlay, in English and French. Pair with overlays={["treaties"]} on Map. Vue: https://registry.unmap.dev/llm/vue/treaty-context.md ## Map tools - [measure](https://registry.unmap.dev/llm/measure.md): Click the map to measure a distance along the great circle, with a live label on the map and Undo and Clear on your shadcn Button. Metres and kilometres in English or French; survives a style swap. Vue: https://registry.unmap.dev/llm/vue/measure.md - [feature-inspector](https://registry.unmap.dev/llm/feature-inspector.md): Lists the features under a click, or in view, in your shadcn Card and Table. Click a row to outline the feature on the map and read its properties. Vue: https://registry.unmap.dev/llm/vue/feature-inspector.md - [time-slider](https://registry.unmap.dev/llm/time-slider.md): Your shadcn Slider driving a time window on style layers, with play, pause, step and loop. Sits on each layer's own filter next to a layer-legend's; survives a style swap. Vue: https://registry.unmap.dev/llm/vue/time-slider.md - [draw](https://registry.unmap.dev/llm/draw.md): Draw and edit points, lines, polygons and circles with terra-draw, on your ToggleGroup, Button and Tooltip. GeoJSON in and out; survives a style swap. Vue: https://registry.unmap.dev/llm/vue/draw.md - [compare-swipe](https://registry.unmap.dev/llm/compare-swipe.md): Two maps in one frame with one shared camera and a draggable, keyboard-operable divider: before and after, or one style against another. Vue: https://registry.unmap.dev/llm/vue/compare-swipe.md - [elevation-profile](https://registry.unmap.dev/llm/elevation-profile.md): The ground elevation along a line (a route, a drawn line or your coordinates), sampled every N metres from the unmap elevation API and charted on your shadcn Chart. Hover the chart or the line and the other follows. Distance, gain, loss, lowest and highest point, in English or French. Vue: https://registry.unmap.dev/llm/vue/elevation-profile.md - [api-calls](https://registry.unmap.dev/llm/api-calls.md): Records every request the page makes to the unmap gateway at window.fetch, with the key removed and tile bytes skipped, and writes the @unmap/sdk call and the curl line behind each. Plain TypeScript, the same file in both lanes; api-inspector renders it. Vue: https://registry.unmap.dev/llm/vue/api-calls.md - [api-inspector](https://registry.unmap.dev/llm/api-inspector.md): A development tool in your shadcn Sheet: every unmap API call your page makes, as it happens, with its status and latency, the @unmap/sdk line and the curl behind it, and the response. ApiInspectorPanel docks it in your layout; useApiCalls gives you the calls to render your own way. Vue: https://registry.unmap.dev/llm/vue/api-inspector.md ## Blocks - [store-locator](https://registry.unmap.dev/llm/store-locator.md): A page that finds stores: search a place and the map pulls in to it and its nearest stores, a list that follows the view and answers the map on hover, a drive-time halo round the store you pick, and directions to it. Calls /geocode/autocomplete (and /geocode/reverse for typed coordinates), /isochrone and /route. Ships with Ottawa Public Library branches (City of Ottawa open data). Vue: https://registry.unmap.dev/llm/vue/store-locator.md - [directions](https://registry.unmap.dev/llm/directions.md): A page that gets directions: choose a start and a destination and the route draws in with its travel time as the headline. A drive, cycle or walk switch redraws the route for that mode and keeps each mode's time on it, and a reachable-area toggle shades how far you can go from the start. Calls /route, /isochrone and the geocoder. Vue: https://registry.unmap.dev/llm/vue/directions.md - [flow-map](https://registry.unmap.dev/llm/flow-map.md): A page of interprovincial migration flows between the capitals, from Statistics Canada Table 17-10-0022-01 (2021/2022 to 2025/2026, Statistics Canada Open Licence), with a year scrubber that animates the flows and each province's net gain or loss. Calls no API beyond the map. Vue: https://registry.unmap.dev/llm/vue/flow-map.md - [elevation-explorer](https://registry.unmap.dev/llm/elevation-explorer.md): A page that profiles a line from the unmap elevation API: pick a mountain trip, route your own by bike or draw one, and read every climb on a chart that answers the map. Hover either and the other follows; the line is coloured by grade. Calls /route, /geocode/autocomplete (and /geocode/reverse for typed coordinates) and /elevation. Vue: https://registry.unmap.dev/llm/vue/elevation-explorer.md - [delivery-tracker](https://registry.unmap.dev/llm/delivery-tracker.md): A page that routes a delivery from a depot to a drop-off, fills in the travelled part of the line as a courier marker moves along it, and keeps a living arrival card: the time, what is left and each stage of the trip. Calls /route once per branch; Restart replays it. Stops are Ottawa Public Library branches (City of Ottawa open data). Vue: https://registry.unmap.dev/llm/vue/delivery-tracker.md - [census-choropleth](https://registry.unmap.dev/llm/census-choropleth.md): A page that colours the provinces and territories by 2021 Census population, change since 2016 or people per km², joined by id with feature-state, with a legend that lists each class's provinces and the number for whatever the pointer is on. Ships Statistics Canada boundaries and counts (Statistics Canada Open Licence); calls no API beyond the map. Vue: https://registry.unmap.dev/llm/vue/census-choropleth.md - [land-treaty-inspector](https://registry.unmap.dev/llm/land-treaty-inspector.md): A page that answers a map click or a legal land description with one card: the survey cell, hatched on the map, and the treaty records at that point, dotted, with every survey unit there listed. Legal land needs the Legal Land add-on (Energy and Agriculture include it); without it the page says why, links pricing, and keeps the treaty context with a municipality lookup. Calls /identify and /geocode/reverse per point and /geocode/autocomplete as you type, after one add-on check. Vue: https://registry.unmap.dev/llm/vue/land-treaty-inspector.md - [address-playground](https://registry.unmap.dev/llm/address-playground.md): A search page with no map: autocomplete in English and French, typed coordinates, every name a result carries with its language (Inuktitut syllabics beside the name where the record has them), its type, precision, match and source, and the nearest places of six categories around it. Calls /geocode/autocomplete (and /geocode/reverse for typed coordinates) and /geocode/nearby. Vue: https://registry.unmap.dev/llm/vue/address-playground.md - [energy-explorer](https://registry.unmap.dev/llm/energy-explorer.md): A page with Alberta wells, pipelines and facilities: UWI and licence search, a layer legend and click-to-identify. Needs the Energy add-on; without it the page says why and shows the basemap. Calls /geocode/autocomplete per search and /identify per click, after one add-on check. Vue: https://registry.unmap.dev/llm/vue/energy-explorer.md ## Templates - [business-locator-01](https://registry.unmap.dev/llm/business-locator-01.md): Connect your locations to a searchable list. Help visitors find the right place and see what it offers. Gallery: https://unmap.dev/templates/business-locator - [local-guide-01](https://registry.unmap.dev/llm/local-guide-01.md): Give your places a point of view. Connect short stories to a sequence of stops on the map. Gallery: https://unmap.dev/templates/local-guide - [public-notices-01](https://registry.unmap.dev/llm/public-notices-01.md): Make local updates easy to find. Put a place, a status, and a clear explanation behind each notice. Gallery: https://unmap.dev/templates/public-notices - [map-story-01](https://registry.unmap.dev/llm/map-story-01.md): Tell a story the map can follow. As readers scroll, each chapter moves the camera and reveals a route or a travel-time area. Gallery: https://unmap.dev/templates/map-story ## Examples - [map-markers-01](https://registry.unmap.dev/llm/map-markers-01.md): An accessible marker with a click-to-open popup, composed from the Unmap map and shadcn Button. Gallery: https://unmap.dev/templates/map-markers - [map-measure-01](https://registry.unmap.dev/llm/map-measure-01.md): Click points on the map and read the distance as you go, composed from the Unmap map and the measure item. Gallery: https://unmap.dev/templates/map-measure - [map-inspect-01](https://registry.unmap.dev/llm/map-inspect-01.md): Click anything on a map of Ottawa to list the features there and read their properties, composed from the Unmap map and the feature-inspector item. Gallery: https://unmap.dev/templates/map-inspect - [map-timeline-01](https://registry.unmap.dev/llm/map-timeline-01.md): Play or drag a time slider to add sample bike-share docks to Calgary year by year, composed from the Unmap map, the geojson-layer and time-slider items and your Card. Gallery: https://unmap.dev/templates/map-timeline - [map-draw-01](https://registry.unmap.dev/llm/map-draw-01.md): Draw points, lines, areas and circles on a map of Calgary and get them back as GeoJSON, composed from the Unmap map and the draw item. Gallery: https://unmap.dev/templates/map-draw - [map-compare-01](https://registry.unmap.dev/llm/map-compare-01.md): Drag a divider across Vancouver to compare the base and outdoor styles, composed from the compare-swipe item and your Badge. Gallery: https://unmap.dev/templates/map-compare - [map-elevation-01](https://registry.unmap.dev/llm/map-elevation-01.md): The elevation profile of a sample trail up Tunnel Mountain in Banff, linked to the map on hover, composed from the Unmap map and the geojson-layer and elevation-profile items. Gallery: https://unmap.dev/templates/map-elevation - [map-geojson-01](https://registry.unmap.dev/llm/map-geojson-01.md): Three illustrative service zones over Calgary; click one for its name and hours, composed from the Unmap map and the geojson-layer item. Gallery: https://unmap.dev/templates/map-geojson - [map-clusters-01](https://registry.unmap.dev/llm/map-clusters-01.md): 60 illustrative points in Montréal, in clusters that zoom in until they split, composed from the Unmap map and the cluster-layer item. Gallery: https://unmap.dev/templates/map-clusters - [map-heatmap-01](https://registry.unmap.dev/llm/map-heatmap-01.md): A heatmap of 60 illustrative points in Toronto, counted or weighted, composed from the Unmap map, the heatmap-layer item and your ToggleGroup. Gallery: https://unmap.dev/templates/map-heatmap - [map-arcs-01](https://registry.unmap.dev/llm/map-arcs-01.md): Arcs from Winnipeg to six capitals; click one or pick a city for its distance, composed from the Unmap map, the arc-layer item and your ToggleGroup. Gallery: https://unmap.dev/templates/map-arcs - [map-flows-01](https://registry.unmap.dev/llm/map-flows-01.md): A year of Statistics Canada migration between the western provinces, as flows; hover a province or pin one below the map, composed from the Unmap map, the flow-layer item and your ToggleGroup. Gallery: https://unmap.dev/templates/map-flows ## Optional - [Registry index, React](https://registry.unmap.dev/r/registry.json): the shadcn registry manifest - [Registry index, Vue](https://registry.unmap.dev/r/vue/registry.json): the shadcn-vue registry manifest - [Components docs](https://unmap.dev/docs/frontend/components): the same items for people, in English and French - [Templates and examples](https://unmap.dev/templates): live previews of every block, template and example