@rahhal/ui (Map, MapMarker, MapPolyline, MapPolygon, MapCircle, MapCluster)Declarative wrapper around MapLibre GL JS. Compose `MapMarker`, `MapPolyline`, `MapPolygon`, `MapCircle`, and `MapCluster` as children — geometry inherits the platform's blue primary by default. Free OpenFreeMap tiles light/dark; switch via the `style` prop. RTL Arabic labels render correctly out of the box. The web component complements iOS MapKit and Android Maps SDK in the native Rahhal apps.
Examples
Map with annotations (markers + popups)
Map with polyline (a route)
Map with polygon (a neighborhood)
Map with radius circle (5 km around a point)
Combined: route + start/end + search radius
Marker clusters
Use when you have hundreds or thousands of points (e.g. every check-in in a city) — rendering them as individual markers tanks frame rate and turns the canvas into a pin soup. `MapCluster` groups nearby features into a single bubble with a count; clicking a cluster zooms in until it breaks apart. Once you reach an unclustered point, `onPointClick` fires with the feature's properties so you can route to a detail view.
Locate me control
Adds MapLibre's GeolocateControl. Click the crosshair to ask the browser for your position. Requires HTTPS or localhost; on permission denial the button renders disabled.
Clickable markers
Pass `onClick` to MapMarker to react to taps — the pin gets `cursor: pointer` and the click event is captured before MapLibre's drag handlers.
Glyph markers (emoji pins)
Pass `glyph` to render a circular sticker pin with an emoji centered, instead of MapLibre's default teardrop. Combine with `color` to drive selected-state borders.