+
diff --git a/apps/web/src/components/Dialog/WaypointEditDialog.test.tsx b/apps/web/src/components/Dialog/WaypointEditDialog.test.tsx
new file mode 100644
index 000000000..102ff4f99
--- /dev/null
+++ b/apps/web/src/components/Dialog/WaypointEditDialog.test.tsx
@@ -0,0 +1,232 @@
+import { create } from "@bufbuild/protobuf";
+import type { WaypointWithMetadata } from "@core/stores";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { Protobuf } from "@meshtastic/sdk";
+import type {
+ ButtonHTMLAttributes,
+ InputHTMLAttributes,
+ ReactNode,
+} from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { WaypointEditDialog } from "./WaypointEditDialog.tsx";
+
+const mockToast = vi.fn();
+vi.mock("@core/hooks/useToast.ts", () => ({
+ useToast: () => ({ toast: mockToast }),
+}));
+
+const sendWaypoint = vi.fn().mockResolvedValue(0);
+const addWaypoint = vi.fn();
+vi.mock("@core/stores", () => ({
+ useDevice: () => ({
+ hardware: { myNodeNum: 1 },
+ connection: { sendWaypoint },
+ addWaypoint,
+ // Metric device — matches the presets asserted below.
+ config: { display: { units: 0 } },
+ }),
+}));
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({
+ t: (key: string, opts?: Record
) =>
+ opts ? `${key} ${JSON.stringify(opts)}` : key,
+ }),
+}));
+
+vi.mock("@components/UI/Dialog.tsx", () => ({
+ Dialog: ({ open, children }: { open: boolean; children: ReactNode }) =>
+ open ? {children}
: null,
+ DialogContent: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
+ DialogHeader: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
+ DialogTitle: ({ children }: { children: ReactNode }) => {children}
,
+ DialogDescription: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
+ DialogClose: () => null,
+ DialogFooter: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
+}));
+
+vi.mock("@components/UI/Button.tsx", () => ({
+ Button: (props: ButtonHTMLAttributes) => (
+
+ ),
+}));
+
+vi.mock("@components/UI/Input.tsx", () => ({
+ Input: (props: InputHTMLAttributes) => ,
+}));
+
+vi.mock("@components/UI/Label.tsx", () => ({
+ Label: ({ children, ...rest }: { children: ReactNode }) => (
+
+ ),
+}));
+
+vi.mock("@components/UI/Switch.tsx", () => ({
+ Switch: ({
+ checked,
+ onCheckedChange,
+ id,
+ }: {
+ checked: boolean;
+ onCheckedChange: (v: boolean) => void;
+ id?: string;
+ }) => (
+ onCheckedChange(e.target.checked)}
+ />
+ ),
+}));
+
+function makeWaypoint(
+ fields: Record = {},
+): WaypointWithMetadata {
+ const wp = create(Protobuf.Mesh.WaypointSchema, fields as never);
+ return Object.assign(wp, {
+ metadata: { channel: 0, created: new Date(), from: 1 },
+ });
+}
+
+describe("WaypointEditDialog – geofence controls (design#114 compliance)", () => {
+ beforeEach(() => {
+ mockToast.mockClear();
+ sendWaypoint.mockClear();
+ addWaypoint.mockClear();
+ });
+
+ it("hides notify toggles until a radius or box is set", () => {
+ render(
+ {}}
+ waypoint={makeWaypoint({ id: 1, name: "Home" })}
+ initialLngLat={undefined}
+ channel={0}
+ mapRef={undefined}
+ onRequestBoundingBoxDraw={async () => undefined}
+ />,
+ );
+ expect(screen.queryByTestId("wp-notify-enter")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("wp-notify-exit")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("wp-notify-fav")).not.toBeInTheDocument();
+ });
+
+ it("reveals enter/exit toggles once a radius preset is selected; favorites-only revealed once enter is on", () => {
+ render(
+ {}}
+ waypoint={makeWaypoint({ id: 1, name: "Home" })}
+ initialLngLat={undefined}
+ channel={0}
+ mapRef={undefined}
+ onRequestBoundingBoxDraw={async () => undefined}
+ />,
+ );
+ // Metric locale (en-GB) → "500 meters"
+ const preset500 = screen.getByRole("button", {
+ name: /500 unit\.meter\.plural/i,
+ });
+ act(() => {
+ fireEvent.click(preset500);
+ });
+
+ expect(screen.getByTestId("wp-notify-enter")).toBeInTheDocument();
+ expect(screen.getByTestId("wp-notify-exit")).toBeInTheDocument();
+ // Favorites-only stays hidden until enter or exit is on
+ expect(screen.queryByTestId("wp-notify-fav")).not.toBeInTheDocument();
+
+ act(() => {
+ fireEvent.click(screen.getByTestId("wp-notify-enter"));
+ });
+ expect(screen.getByTestId("wp-notify-fav")).toBeInTheDocument();
+ });
+
+ it("draws box via the callback and shows Edit/Remove buttons afterwards", async () => {
+ const drawFn = vi.fn().mockResolvedValue({
+ west: -74.1,
+ south: 39.9,
+ east: -73.9,
+ north: 40.1,
+ });
+ render(
+ {}}
+ waypoint={makeWaypoint({ id: 1, name: "Home" })}
+ initialLngLat={undefined}
+ channel={0}
+ mapRef={{} as never}
+ onRequestBoundingBoxDraw={drawFn}
+ />,
+ );
+
+ await act(async () => {
+ fireEvent.click(
+ screen.getByRole("button", { name: /waypointEdit\.drawBox/i }),
+ );
+ });
+ expect(drawFn).toHaveBeenCalledOnce();
+ expect(
+ screen.getByRole("button", { name: /waypointEdit\.editBox/i }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: /waypointEdit\.removeBox/i }),
+ ).toBeInTheDocument();
+ });
+
+ it("save persists geofence fields on the outbound waypoint", async () => {
+ render(
+ {}}
+ waypoint={makeWaypoint({ id: 7, name: "Home" })}
+ initialLngLat={undefined}
+ channel={0}
+ mapRef={undefined}
+ onRequestBoundingBoxDraw={async () => undefined}
+ />,
+ );
+
+ // Pick 1 km preset (metric locale)
+ act(() => {
+ fireEvent.click(
+ screen.getByRole("button", { name: /1 unit\.kilometer\.plural/i }),
+ );
+ });
+ // Turn on enter alert
+ act(() => {
+ fireEvent.click(screen.getByTestId("wp-notify-enter"));
+ });
+ // Favorites-only
+ act(() => {
+ fireEvent.click(screen.getByTestId("wp-notify-fav"));
+ });
+
+ await act(async () => {
+ fireEvent.click(
+ screen.getByRole("button", { name: /waypointEdit\.save/i }),
+ );
+ });
+
+ expect(addWaypoint).toHaveBeenCalledOnce();
+ const [outbound] = addWaypoint.mock.calls[0]!;
+ expect(outbound.geofenceRadius).toBe(1000);
+ expect(outbound.notifyOnEnter).toBe(true);
+ expect(outbound.notifyOnExit).toBe(false);
+ expect(outbound.notifyFavoritesOnly).toBe(true);
+ expect(sendWaypoint).toHaveBeenCalledOnce();
+ });
+});
diff --git a/apps/web/src/components/Dialog/WaypointEditDialog.tsx b/apps/web/src/components/Dialog/WaypointEditDialog.tsx
new file mode 100644
index 000000000..a637f8077
--- /dev/null
+++ b/apps/web/src/components/Dialog/WaypointEditDialog.tsx
@@ -0,0 +1,551 @@
+import { clone, create } from "@bufbuild/protobuf";
+import { Button } from "@components/UI/Button.tsx";
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { Switch } from "@components/UI/Switch.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { useDevice, type WaypointWithMetadata } from "@core/stores";
+import { cn } from "@core/utils/cn.ts";
+import type { LngLat } from "@core/utils/geo.ts";
+import {
+ coordToDeg,
+ degToCoordI,
+ displayToMeters,
+ metersToDisplay,
+ unitSystemFromDisplayUnits,
+} from "@core/utils/geofence.ts";
+import { generatePacketId, Protobuf } from "@meshtastic/sdk";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { MapRef } from "react-map-gl/maplibre";
+
+const DEFAULT_ICON_CODEPOINT = 0x1f4cd; // 📍
+const WAYPOINT_NAME_MAX = 30;
+const WAYPOINT_DESC_MAX = 100;
+
+const METERS_PER_MILE = 1609.344;
+const METERS_PER_FOOT = 0.3048;
+const IMPERIAL_MILES_THRESHOLD_METERS = METERS_PER_MILE / 2;
+const METRIC_RADIUS_PRESETS_M = [0, 100, 500, 1_000, 5_000];
+const IMPERIAL_RADIUS_PRESETS_M = [
+ 0,
+ Math.round(0.1 * METERS_PER_MILE),
+ Math.round(0.5 * METERS_PER_MILE),
+ Math.round(1 * METERS_PER_MILE),
+ Math.round(5 * METERS_PER_MILE),
+ Math.round(10 * METERS_PER_MILE),
+];
+
+interface WaypointEditDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ waypoint: WaypointWithMetadata | undefined;
+ initialLngLat: LngLat | undefined;
+ channel: number;
+ mapRef: MapRef | undefined;
+ onRequestBoundingBoxDraw: () => Promise<
+ { west: number; south: number; east: number; north: number } | undefined
+ >;
+}
+
+interface FormState {
+ name: string;
+ description: string;
+ icon: string;
+ latitude: string;
+ longitude: string;
+ expireEnabled: boolean;
+ expireIso: string;
+ radiusValue: string;
+ useLargeUnit: boolean;
+ west: string;
+ south: string;
+ east: string;
+ north: string;
+ hasBox: boolean;
+ notifyOnEnter: boolean;
+ notifyOnExit: boolean;
+ notifyFavoritesOnly: boolean;
+}
+
+function isoLocal(epochSeconds: number): string {
+ const d = new Date(epochSeconds * 1000);
+ const pad = (n: number) => String(n).padStart(2, "0");
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function initialForm(
+ wp: WaypointWithMetadata | undefined,
+ initialLngLat: LngLat | undefined,
+ system: "metric" | "imperial",
+): FormState {
+ if (wp) {
+ const box = wp.boundingBox;
+ const radiusMeters = wp.geofenceRadius ?? 0;
+ const useLargeUnit =
+ system === "imperial"
+ ? radiusMeters >= IMPERIAL_MILES_THRESHOLD_METERS
+ : radiusMeters >= 1000;
+ const displayed =
+ radiusMeters > 0 ? metersToDisplay(radiusMeters, system) : 0;
+ return {
+ name: wp.name,
+ description: wp.description,
+ icon: String.fromCodePoint(wp.icon || DEFAULT_ICON_CODEPOINT),
+ latitude: String(coordToDeg(wp.latitudeI)),
+ longitude: String(coordToDeg(wp.longitudeI)),
+ expireEnabled: wp.expire !== 0,
+ expireIso: wp.expire !== 0 ? isoLocal(wp.expire) : "",
+ radiusValue: radiusMeters > 0 ? String(Number(displayed.toFixed(2))) : "",
+ useLargeUnit,
+ hasBox: Boolean(box),
+ west: box ? String(coordToDeg(box.longitudeWestI)) : "",
+ south: box ? String(coordToDeg(box.latitudeSouthI)) : "",
+ east: box ? String(coordToDeg(box.longitudeEastI)) : "",
+ north: box ? String(coordToDeg(box.latitudeNorthI)) : "",
+ notifyOnEnter: wp.notifyOnEnter,
+ notifyOnExit: wp.notifyOnExit,
+ notifyFavoritesOnly: wp.notifyFavoritesOnly,
+ };
+ }
+
+ const [lng, lat] = initialLngLat ?? [0, 0];
+ return {
+ name: "",
+ description: "",
+ icon: String.fromCodePoint(DEFAULT_ICON_CODEPOINT),
+ latitude: String(lat),
+ longitude: String(lng),
+ expireEnabled: false,
+ expireIso: "",
+ radiusValue: "",
+ useLargeUnit: false,
+ hasBox: false,
+ west: "",
+ south: "",
+ east: "",
+ north: "",
+ notifyOnEnter: false,
+ notifyOnExit: false,
+ notifyFavoritesOnly: false,
+ };
+}
+
+function parseIcon(input: string): number {
+ const trimmed = input.trim();
+ if (!trimmed) return DEFAULT_ICON_CODEPOINT;
+ return trimmed.codePointAt(0) ?? DEFAULT_ICON_CODEPOINT;
+}
+
+export const WaypointEditDialog = ({
+ open,
+ onOpenChange,
+ waypoint,
+ initialLngLat,
+ channel,
+ mapRef,
+ onRequestBoundingBoxDraw,
+}: WaypointEditDialogProps) => {
+ const { t } = useTranslation("map");
+ const { toast } = useToast();
+ const device = useDevice();
+ const displayUnits = device.config.display?.units;
+ const unitSystem = useMemo(
+ () => unitSystemFromDisplayUnits(displayUnits),
+ [displayUnits],
+ );
+ const [form, setForm] = useState(() =>
+ initialForm(waypoint, initialLngLat, unitSystem),
+ );
+ const [saving, setSaving] = useState(false);
+ const isCreating = waypoint === undefined;
+
+ useEffect(() => {
+ setForm(initialForm(waypoint, initialLngLat, unitSystem));
+ }, [waypoint, initialLngLat, unitSystem]);
+
+ const currentRadiusMeters = useMemo(() => {
+ const parsed = Number.parseFloat(form.radiusValue);
+ if (!Number.isFinite(parsed) || parsed <= 0) return 0;
+ return Math.round(displayToMeters(parsed, unitSystem, form.useLargeUnit));
+ }, [form.radiusValue, form.useLargeUnit, unitSystem]);
+
+ const radiusPresets =
+ unitSystem === "imperial"
+ ? IMPERIAL_RADIUS_PRESETS_M
+ : METRIC_RADIUS_PRESETS_M;
+
+ const applyRadiusPreset = useCallback(
+ (meters: number) => {
+ if (meters === 0) {
+ setForm((s) => ({ ...s, radiusValue: "", useLargeUnit: false }));
+ return;
+ }
+ const useLargeUnit =
+ unitSystem === "imperial"
+ ? meters >= IMPERIAL_MILES_THRESHOLD_METERS
+ : meters >= 1000;
+ const displayed = metersToDisplay(meters, unitSystem);
+ setForm((s) => ({
+ ...s,
+ radiusValue: String(Number(displayed.toFixed(2))),
+ useLargeUnit,
+ }));
+ },
+ [unitSystem],
+ );
+
+ const requestDraw = useCallback(async () => {
+ const box = await onRequestBoundingBoxDraw();
+ if (!box) return;
+ setForm((s) => ({
+ ...s,
+ hasBox: true,
+ west: box.west.toFixed(6),
+ south: box.south.toFixed(6),
+ east: box.east.toFixed(6),
+ north: box.north.toFixed(6),
+ }));
+ }, [onRequestBoundingBoxDraw]);
+
+ const hasAnyGeofence = currentRadiusMeters > 0 || form.hasBox;
+ const hasAnyNotifyOn = form.notifyOnEnter || form.notifyOnExit;
+
+ const boxSummary = form.hasBox
+ ? `${Number(form.south).toFixed(3)}, ${Number(form.west).toFixed(3)} → ${Number(form.north).toFixed(3)}, ${Number(form.east).toFixed(3)}`
+ : "";
+
+ const handleSave = useCallback(async () => {
+ setSaving(true);
+ try {
+ const base: Protobuf.Mesh.Waypoint = waypoint
+ ? clone(Protobuf.Mesh.WaypointSchema, waypoint)
+ : create(Protobuf.Mesh.WaypointSchema, {});
+
+ const trimmedName = form.name.trim().slice(0, WAYPOINT_NAME_MAX);
+ if (!trimmedName) {
+ toast({ title: t("waypointEdit.errorMissingName") });
+ return;
+ }
+ base.name = trimmedName;
+ base.description = form.description.slice(0, WAYPOINT_DESC_MAX);
+ base.icon = parseIcon(form.icon);
+
+ const lat = Number.parseFloat(form.latitude);
+ const lng = Number.parseFloat(form.longitude);
+ if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
+ toast({ title: t("waypointEdit.errorBadCoords") });
+ setSaving(false);
+ return;
+ }
+ base.latitudeI = degToCoordI(lat);
+ base.longitudeI = degToCoordI(lng);
+
+ if (form.expireEnabled && form.expireIso) {
+ const epoch = Math.floor(new Date(form.expireIso).getTime() / 1000);
+ base.expire = Number.isFinite(epoch) && epoch > 0 ? epoch : 0;
+ } else {
+ base.expire = 0;
+ }
+
+ const parsedRadius = Number.parseFloat(form.radiusValue);
+ base.geofenceRadius =
+ Number.isFinite(parsedRadius) && parsedRadius > 0
+ ? Math.round(
+ displayToMeters(parsedRadius, unitSystem, form.useLargeUnit),
+ )
+ : 0;
+
+ if (form.hasBox) {
+ const [west, south, east, north] = [
+ form.west,
+ form.south,
+ form.east,
+ form.north,
+ ].map((v) => Number.parseFloat(v));
+ if ([west, south, east, north].every((n) => Number.isFinite(n))) {
+ base.boundingBox = create(Protobuf.Mesh.BoundingBoxSchema, {
+ longitudeWestI: degToCoordI(west!),
+ latitudeSouthI: degToCoordI(south!),
+ longitudeEastI: degToCoordI(east!),
+ latitudeNorthI: degToCoordI(north!),
+ });
+ }
+ } else {
+ base.boundingBox = undefined;
+ }
+ base.notifyOnEnter = hasAnyGeofence && form.notifyOnEnter;
+ base.notifyOnExit = hasAnyGeofence && form.notifyOnExit;
+ base.notifyFavoritesOnly = hasAnyGeofence && form.notifyFavoritesOnly;
+
+ if (isCreating && base.id === 0) {
+ // Reuse the SDK's CSPRNG packet-id generator so the local id we
+ // store matches the id `sendWaypoint` will broadcast — otherwise
+ // `addWaypoint`'s per-id dedup can collide with an existing entry.
+ base.id = generatePacketId();
+ }
+
+ const targetChannel = waypoint?.metadata.channel ?? channel;
+ const fromNode = waypoint?.metadata.from ?? device.hardware.myNodeNum;
+ if (device.connection) {
+ await device.connection.sendWaypoint(base, "broadcast", targetChannel);
+ }
+ device.addWaypoint(base, targetChannel, fromNode, new Date());
+ toast({
+ title: isCreating
+ ? t("waypointEdit.createdToast", { name: base.name })
+ : t("waypointEdit.savedToast", { name: base.name }),
+ });
+ onOpenChange(false);
+ } catch (err) {
+ toast({
+ title: t("waypointEdit.errorToast"),
+ description: err instanceof Error ? err.message : String(err),
+ });
+ } finally {
+ setSaving(false);
+ }
+ }, [
+ channel,
+ device,
+ form,
+ isCreating,
+ onOpenChange,
+ t,
+ toast,
+ unitSystem,
+ waypoint,
+ ]);
+
+ return (
+
+ );
+};
diff --git a/apps/web/src/components/PageComponents/Map/BoundingBoxOverlay.tsx b/apps/web/src/components/PageComponents/Map/BoundingBoxOverlay.tsx
new file mode 100644
index 000000000..bdb3a231f
--- /dev/null
+++ b/apps/web/src/components/PageComponents/Map/BoundingBoxOverlay.tsx
@@ -0,0 +1,25 @@
+import type { MapRef } from "react-map-gl/maplibre";
+
+interface BoundingBoxOverlayProps {
+ mapRef: MapRef;
+ start: [number, number];
+ current: [number, number];
+}
+
+export const BoundingBoxOverlay = ({ mapRef, start, current }: BoundingBoxOverlayProps) => {
+ const map = mapRef.getMap();
+ if (!map) return null;
+ const rect = map.getContainer().getBoundingClientRect();
+ const a = map.project(start);
+ const b = map.project(current);
+ const left = Math.min(a.x, b.x) + rect.left;
+ const top = Math.min(a.y, b.y) + rect.top;
+ const width = Math.abs(a.x - b.x);
+ const height = Math.abs(a.y - b.y);
+ return (
+
+ );
+};
diff --git a/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.test.ts b/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.test.ts
new file mode 100644
index 000000000..d7fd3d5ca
--- /dev/null
+++ b/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.test.ts
@@ -0,0 +1,62 @@
+import { create } from "@bufbuild/protobuf";
+import { Protobuf } from "@meshtastic/sdk";
+import { describe, expect, it } from "vitest";
+import { generateGeofenceFeatures } from "./GeofenceLayer.tsx";
+
+function makeWaypoint(fields: Record) {
+ const wp = create(Protobuf.Mesh.WaypointSchema, fields as never);
+ return Object.assign(wp, {
+ metadata: { channel: 0, created: new Date(), from: 1 },
+ });
+}
+
+describe("GeofenceLayer – feature generation", () => {
+ it("skips waypoints without a geofence", () => {
+ const fc = generateGeofenceFeatures([makeWaypoint({ id: 1 })]);
+ expect(fc.features).toHaveLength(0);
+ });
+
+ it("emits a circle polygon for radius > 0", () => {
+ const fc = generateGeofenceFeatures([
+ makeWaypoint({ id: 1, latitudeI: 400000000, longitudeI: -740000000, geofenceRadius: 500 }),
+ ]);
+ expect(fc.features).toHaveLength(1);
+ expect(fc.features[0]!.properties.kind).toBe("circle");
+ expect(fc.features[0]!.properties.waypointId).toBe(1);
+ });
+
+ it("emits a rectangle polygon for bounding box", () => {
+ const box = create(Protobuf.Mesh.BoundingBoxSchema, {
+ longitudeWestI: -740100000,
+ latitudeSouthI: 399900000,
+ longitudeEastI: -739900000,
+ latitudeNorthI: 400100000,
+ });
+ const fc = generateGeofenceFeatures([makeWaypoint({ id: 2, boundingBox: box })]);
+ expect(fc.features).toHaveLength(1);
+ expect(fc.features[0]!.properties.kind).toBe("box");
+ const ring = fc.features[0]!.geometry.coordinates[0]!;
+ expect(ring).toHaveLength(5);
+ expect(ring[0]).toEqual(ring[4]);
+ });
+
+ it("emits both shapes when both are set", () => {
+ const box = create(Protobuf.Mesh.BoundingBoxSchema, {
+ longitudeWestI: 0,
+ latitudeSouthI: 0,
+ longitudeEastI: 1000000,
+ latitudeNorthI: 1000000,
+ });
+ const fc = generateGeofenceFeatures([
+ makeWaypoint({
+ id: 3,
+ latitudeI: 0,
+ longitudeI: 0,
+ geofenceRadius: 100,
+ boundingBox: box,
+ }),
+ ]);
+ expect(fc.features).toHaveLength(2);
+ expect(fc.features.map((f) => f.properties.kind).sort()).toEqual(["box", "circle"]);
+ });
+});
diff --git a/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.tsx b/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.tsx
new file mode 100644
index 000000000..855a01bbb
--- /dev/null
+++ b/apps/web/src/components/PageComponents/Map/Layers/GeofenceLayer.tsx
@@ -0,0 +1,102 @@
+import type { WaypointWithMetadata } from "@core/stores";
+import { toLngLat } from "@core/utils/geo.ts";
+import { coordToDeg, hasGeofence } from "@core/utils/geofence.ts";
+import { circle } from "@turf/turf";
+import type { Feature, FeatureCollection, Polygon } from "geojson";
+import { useMemo } from "react";
+import { Layer, Source } from "react-map-gl/maplibre";
+
+export interface GeofenceLayerProps {
+ id: string;
+ waypoints: readonly WaypointWithMetadata[];
+ isVisible: boolean;
+}
+
+type FeatureProps = {
+ waypointId: number;
+ kind: "circle" | "box";
+};
+
+export function generateGeofenceFeatures(
+ waypoints: readonly WaypointWithMetadata[],
+): FeatureCollection {
+ const features: Feature[] = [];
+ for (const wp of waypoints) {
+ if (!hasGeofence(wp)) continue;
+ if (wp.geofenceRadius > 0) {
+ const [lng, lat] = toLngLat({
+ latitudeI: wp.latitudeI,
+ longitudeI: wp.longitudeI,
+ });
+ const feat = circle([lng, lat], wp.geofenceRadius, {
+ steps: 64,
+ units: "meters",
+ }) as Feature;
+ feat.properties = { waypointId: wp.id, kind: "circle" };
+ features.push(feat);
+ }
+ if (wp.boundingBox) {
+ const west = coordToDeg(wp.boundingBox.longitudeWestI);
+ const east = coordToDeg(wp.boundingBox.longitudeEastI);
+ const south = coordToDeg(wp.boundingBox.latitudeSouthI);
+ const north = coordToDeg(wp.boundingBox.latitudeNorthI);
+ const rectangle = (w: number, e: number): Polygon => ({
+ type: "Polygon",
+ coordinates: [
+ [
+ [w, south],
+ [e, south],
+ [e, north],
+ [w, north],
+ [w, south],
+ ],
+ ],
+ });
+ // Anti-meridian: split into two polygons so we don't render a
+ // huge polygon wrapping around the globe.
+ const geometries =
+ west <= east
+ ? [rectangle(west, east)]
+ : [rectangle(west, 180), rectangle(-180, east)];
+ for (const geometry of geometries) {
+ features.push({
+ type: "Feature",
+ properties: { waypointId: wp.id, kind: "box" },
+ geometry,
+ });
+ }
+ }
+ }
+ return { type: "FeatureCollection", features };
+}
+
+export const GeofenceLayer = ({
+ id,
+ waypoints,
+ isVisible,
+}: GeofenceLayerProps) => {
+ const data = useMemo(() => generateGeofenceFeatures(waypoints), [waypoints]);
+ return (
+
+
+
+
+ );
+};
diff --git a/apps/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx b/apps/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx
index 429bb1ef2..b48668453 100644
--- a/apps/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx
+++ b/apps/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx
@@ -14,6 +14,7 @@ export interface WaypointLayerProps {
isVisible: boolean;
popupState: PopupState | undefined;
setPopupState: (state: PopupState | undefined) => void;
+ onEditWaypoint: (waypoint: WaypointWithMetadata) => void;
}
import { toLngLat } from "@core/utils/geo.ts";
@@ -24,6 +25,7 @@ export const WaypointLayer = ({
isVisible,
popupState,
setPopupState,
+ onEditWaypoint,
}: WaypointLayerProps): React.ReactNode[] => {
const { waypoints } = useDevice();
const { focusLngLat } = useMapFitting(mapRef);
@@ -85,10 +87,11 @@ export const WaypointLayer = ({
{}}
+ onEdit={() => onEditWaypoint(popupState.waypoint)}
/>
,
);
}
+
return rendered;
};
diff --git a/apps/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx b/apps/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx
index b938d39f3..31e899161 100644
--- a/apps/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx
+++ b/apps/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx
@@ -1,4 +1,5 @@
import { TimeAgo } from "@components/generic/TimeAgo";
+import { Button } from "@components/UI/Button.tsx";
import { Separator } from "@components/UI/Separator.tsx";
import { useNodeAsProto } from "@core/hooks/useNodesAsProto.ts";
import type { WaypointWithMetadata } from "@core/stores";
@@ -8,15 +9,19 @@ import {
hasPos,
toLngLat,
} from "@core/utils/geo";
+import { hasGeofence } from "@core/utils/geofence.ts";
import type { Protobuf } from "@meshtastic/sdk";
import {
+ BellIcon,
ClockFadingIcon,
ClockPlusIcon,
CompassIcon,
MapPinnedIcon,
MoveHorizontalIcon,
NavigationIcon,
+ PencilIcon,
RotateCwIcon,
+ ShieldIcon,
UserLockIcon,
} from "lucide-react";
import { useTranslation } from "react-i18next";
@@ -27,7 +32,7 @@ interface WaypointDetailProps {
onEdit: () => void;
}
-export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
+export const WaypointDetail = ({ waypoint, myNode, onEdit }: WaypointDetailProps) => {
const { t } = useTranslation("map");
const lockedToNode = useNodeAsProto(waypoint.lockedTo ?? 0);
@@ -183,8 +188,50 @@ export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
)}
+
+ {/* Geofence radius */}
+ {waypoint.geofenceRadius > 0 && (
+