Map

import {
  Map,
  MapControls,
  MapMarker,
  MarkerContent,
  MarkerPopup,
} from "@aeontel/ui/map";

export default function Sites() {
  return (
    <div className="h-96 w-full">
      {/* The viewport prop is `viewport`, not `initialViewState`. */}
      {/* Shape: { center: [lng, lat], zoom } — center is a tuple. */}
      <Map viewport={{ center: [-122.4, 37.78], zoom: 11 }}>
        <MapControls position="top-right" />
        {/* Default blue dot + click popup */}
        <MapMarker longitude={-122.4} latitude={37.78}>
          <MarkerPopup>San Francisco HQ</MarkerPopup>
        </MapMarker>
        {/* Custom marker visual — wrap in MarkerContent. Raw children */}
        {/* of MapMarker are not portaled into the marker DOM and stay */}
        {/* invisible. */}
        <MapMarker longitude={2.3522} latitude={48.8566}>
          <MarkerContent>
            <div className="bg-primary text-primary-foreground rounded-full px-2 py-1 text-xs font-semibold shadow">
              Paris
            </div>
          </MarkerContent>
        </MapMarker>
      </Map>
    </div>
  );
}

// The container needs an explicit height — MapLibre measures its parent.
// Pair every map with `@import "@aeontel/ui/styles/map"` in your root CSS
// (only affects popup chrome — does NOT gate marker visibility).

Map(props: ComponentProps): JSX.Element

MapMarker(props: MapMarkerProps): JSX.Element

MarkerContent(props: MarkerContentProps): JSX.Element

MarkerLabel(props: MarkerLabelProps): JSX.Element

MarkerPopup(props: MarkerPopupProps): JSX.Element

MarkerTooltip(props: MarkerTooltipProps): JSX.Element

MapPopup(props: MapPopupProps): JSX.Element

MapControls(props: MapControlsProps): JSX.Element

MapRoute(props: MapRouteProps): JSX.Element

MapArc(props: MapArcProps<T>): JSX.Element

MapClusterLayer(props: MapClusterLayerProps<P>): JSX.Element

useMap(props: ComponentProps): JSX.Element