Coordinate field

Installation#

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

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

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

Usage#

"use client";

import * as React from "react";

import { GeoCoordinate, type LatLon } from "@/components/lumesec/geo-coordinate";

export function Example() {
  const [site, setSite] = React.useState<LatLon | null>({ lat: 48.8566, lon: 2.3522 });
  return <GeoCoordinate name="site" label="Site location" value={site} onValueChange={setSite} />;
}

Behaviour#

A text field for coordinates that reads the usual ways of writing them: decimal degrees, degrees with minutes and seconds, hemisphere letters, or a signed pair. A small world map beside it shows what it read.

The map has a parallel and a meridian on separate springs: typing the latitude moves the horizontal line, the longitude moves the vertical one, and when both are read the crossing locks with a ping. Below the field the coordinates appear in the other format, with hemisphere letters that flip over when the sign changes.

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.