Added basic height filtering.

src/components/ui/camera-controls.tsx

@@ -9,7 +9,9 @@ import {
   ChevronsDown,
   RotateCw,
   RotateCcw,
+  Navigation,
 } from "lucide-react";
+import { useSettings } from "@/hooks/use-settings";
 
 type CameraActionType = "zoom" | "pitch" | "bearing";
 
@@ -94,6 +96,9 @@ function Divider() {
 }
 
 export function CameraControls() {
+  const { settings, update } = useSettings();
+  const locked = settings.lockNorthUp;
+
   return (
     <motion.div
       initial={{ opacity: 0, x: 12 }}
@@ -170,6 +175,31 @@ export function CameraControls() {
       >
         <RotateCcw className="h-3.5 w-3.5" />
       </ControlButton>
+
+      <div
+        className="mx-auto my-0.5 h-px w-6"
+        style={{ backgroundColor: "rgb(var(--ui-fg) / 0.10)" }}
+      />
+
+      <motion.button
+        type="button"
+        className="flex h-8 w-8 items-center justify-center select-none"
+        style={{
+          color: locked
+            ? "rgb(var(--ui-fg) / 0.85)"
+            : "rgb(var(--ui-fg) / 0.45)",
+        }}
+        whileHover={{ scale: 1.12 }}
+        whileTap={{ scale: 0.88 }}
+        aria-label="Lock north up"
+        title={locked ? "North locked — tap to unlock" : "Lock north up"}
+        onClick={() => update("lockNorthUp", !locked)}
+      >
+        <Navigation
+          className="h-3.5 w-3.5"
+          fill={locked ? "currentColor" : "none"}
+        />
+      </motion.button>
     </motion.div>
   );
 }