Location picker

Choose a point on a map.

<GeoLocationPicker />· loading

Trysearch for Lagos, then click next to it to move the pin.

Installation

pnpm dlx shadcn@latest add @lumesec/geo-location-picker

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

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

Or skip the setup and install by URL:

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

Usage

geo-location-picker-example.tsx

import { GeoLocationPicker } from "@/components/lumesec/geo-location-picker";

export function Example() {
  return (
    <form>
      <GeoLocationPicker name="site" snap={25} defaultValue={{ lat: 6.5244, lon: 3.3792 }} required />
    </form>
  );
}

Behaviour

Choose a point on a map. Click or tap to drop the pin, search for a place, or type exact coordinates into the latitude and longitude fields.

The pin drops on a bouncy spring and lands with a splash: the dots around it are pushed outward in a ring like water, and the coordinates roll to the new values. Picking a search result flies the map there and zooms in so you can place the pin precisely.