cartoj.interop
Helpers for react-map-gl usage requiring JS interop.
Provides:
- `with-map` — render a child with access to the MapRef (useMap shim)
- `map-provider` — multi-map context (wraps MapProvider)
- `use-map` — raw useMap hook reference (call inside :f> components only)
- `use-control` — raw useControl hook reference (call inside :f> components only)
IMPORTANT: `use-map` and `use-control` are React hooks. They MUST be called
inside a React functional component. In Reagent, use them inside a component
rendered with `:f>`, or use the `with-map` helper below.
Usage — with-map:
[interop/with-map
(fn [map-instance]
;; map-instance is the maplibre Map (resolved via .getMap() on the MapRef)
[:button {:on-click #(.flyTo map-instance (clj->js {:center [-122 37] :zoom 12}))}
"Fly!"])]
Usage — map-provider + use-map:
[interop/map-provider {:id "main"}
[:f> (fn []
(let [{:keys [current]} (interop/use-map)]
;; current is the MapRef for the nearest ancestor Map
[:div (str "zoom: " (.. current -transform -zoom))]))]]coords-from-evt
(coords-from-evt e)
Given a Maplibre click event, extract the coordinates
map-provider
(map-provider & args)
Reagent component wrapping react-map-gl MapProvider.
Used when you have multiple Map components and want to access them by id
via use-map.
Optional props: none required; each child Map should have an :id prop.
reset-map-ref!
(reset-map-ref! map-ref)
Reset the given map-ref atom, so that it's subscribers
have access to imperative maplibre commands, like flyTo, etc.
used from ordinary Reagent components without hooks friction.
Wraps the most commonly-used `with-map` pattern for convenience.
use-control
The useControl hook from react-map-gl.
Mounts a native maplibre/mapbox IControl imperatively.
Signature: (use-control create-fn options)
Must be called inside a functional component.
use-map
The useMap hook from react-map-gl.
Returns a map of {id -> MapRef} for all ancestor Maps (or {:current MapRef}
for the nearest ancestor). Must be called inside a functional component.with-map
(with-map render-fn)
Render children with access to the maplibre Map instance.
`render-fn` is a function that receives the maplibre Map instance (or nil if
no Map is mounted yet) and returns a Reagent hiccup vector.
This helper wraps useMap inside a functional component (:f>) so it can be
used from ordinary Reagent components without hooks friction.