Geofence

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<GeoGeofence
  label="Tracker zones"
  editable
  minRadiusKm={50}
  maxRadiusKm={3000}
/>

Installation#

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

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

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

Usage#

import * as React from "react";

import { GeoGeofence, type GeofenceZone, type TrackedDevice } from "@/components/lumesec/geo-geofence";

const initialZones: GeofenceZone[] = [
  { id: "depot", label: "Depot region", center: { lat: 52.52, lon: 13.405 }, radiusKm: 400 },
];

export function Example({ vehicles }: { vehicles: TrackedDevice[] }) {
  const [zones, setZones] = React.useState<readonly GeofenceZone[]>(initialZones);
  return (
    <GeoGeofence
      zones={zones}
      onZonesChange={setZones}
      devices={vehicles}
      onBreach={({ device, zone }) => console.log(`${device.label} left ${zone.label}`)}
    />
  );
}

Behaviour#

Allowed zones as true geodesic circles on a flat map, with tracked devices inside them. Drag a zone's centre to move it and the handle on its edge to resize it; the circle keeps its real shape, so it stretches toward the poles.

When a device leaves every zone, the fence it crossed rings like a plucked string: a wave runs around the circle from the crossing point in both directions, and the device turns to a warning colour.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Keyboard#

Accessibility#

• The map is a role="group" with aria-roledescription="map" and the label as its name; the canvases are aria-hidden.
• Each centre handle is a native <button> with aria-roledescription="zone centre" and a name of the zone label and its coordinates, for example "Western Europe, 48.9° N, 2.4° E".
• Each radius handle has role="slider" in km, aria-label "Radius of Western Europe", aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext such as "1,200 kilometres". While it has keyboard focus or is dragged, a chip beside it shows the radius.
• Devices are native <button> elements whose names say where they are: "Tracker 3, inside Western Europe" or "Tracker 3, outside every zone". Hover or keyboard focus shows a chip with the same text.
• Every breach is announced once in an assertive live region: "Tracker 3 left Western Europe".
• The zone list is a <table> with column headers for the zone, its radius and the number of devices inside.
• Handles have a 2 px accent focus ring and a hit area of about 30 px for touch; only the handles block page scrolling while dragged.
• Reduced motion: there is no pluck wave, no sparks and no fence spring: a breach turns the crossed section of the fence to the warning colour for one second, handles move the fence directly, new zones appear at once, devices jump to new positions, and numbers change without rolling.

Theming#

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

This component reads --lumesec, --lumesec-foreground, --lumesec-shine, --lumesec-success, --lumesec-warning, --foreground, --muted-foreground, --muted, --card and --border.

Notes#

• Each zone is a real geodesic circle: 128 points at even bearings around the centre, projected as one ring and resampled into fence dots every 4 px. On this equirectangular map it stretches east to west toward the poles.
• A device is outside only when it has left every zone. The zone it left last is the one that rings: two pulses leave the crossing point in opposite directions at 220 px/s, pass through each other on the far side and fade within 1.2 s.
• Containment is checked every frame by great-circle distance, so a breach fires when the device crosses the fence on screen, whether the device moved or the zone was dragged off it.
• With no zones every device counts as outside, without breach events. The first check of a device never fires an event.
• While a zone is dragged, the fence dots spring after the handle: when resizing, the dots near the handle follow fastest, so the ring stretches like rubber.
• Devices outside the shown area are pinned to the map's edge.
• The fence spring, plucks, the demo walk and device glides run only while the map is on screen. With devices passed and nothing moving, the animation stops.