Area select

Installation#

pnpm dlx shadcn@latest add @lumesec/geo-area

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/geo-area.json

Usage#

import { GeoArea, type AreaPoint, type GeoBounds } from "@/components/lumesec/geo-area";

const events: AreaPoint[] = [
  { lat: 48.86, lon: 2.35 },
  { lat: 52.52, lon: 13.4 },
  { lat: 40.71, lon: -74.01 },
];

export function Example() {
  return (
    <GeoArea
      points={events}
      defaultValue={{ west: -12, south: 35, east: 30, north: 60 }}
      onValueChange={(area: GeoBounds | null) => console.log(area)}
    />
  );
}

Behaviour#

Draw a rectangle of latitude and longitude on a map to select an area, for example to filter events by place. Move it, resize it from its edges and corners, type exact bounds, or double-click a country to fit the box to it.

While you draw, the land inside fills behind the pointer with a bright, uneven front, the dotted border runs, and the count of points inside rolls. On release the edges snap to whole degrees on springs. The box can cross the date line and continue on the other side of the map.

API reference#

Ref#

ref points at the root HTMLDivElement.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.