cartoj.interop — io.github.perrygeo/cartoj 0.1.0

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 cljs

(coords-from-evt e)

Given a Maplibre click event, extract the coordinates

map-provider cljs

(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! cljs

(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 cljs

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 cljs

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 cljs

(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.