Add heading-up compass and persist fiducial layers

wwwroot/css/app.css

@@ -1674,6 +1674,72 @@ label {
     line-height: 1;
 }
 
+.map-compass {
+    --compass-rotation: 0deg;
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    z-index: 810;
+    width: 54px;
+    height: 54px;
+    transform: translateY(-50%);
+    border: 2px solid rgba(255, 255, 255, 0.92);
+    border-radius: 50%;
+    background: rgba(22, 31, 38, 0.86);
+    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
+    color: #fff;
+    pointer-events: none;
+}
+
+.map-compass-north {
+    position: absolute;
+    top: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #fca5a5;
+    font-size: 11px;
+    font-weight: 900;
+    line-height: 1;
+}
+
+.map-compass-needle {
+    position: absolute;
+    bottom: 25px;
+    left: 50%;
+    width: 4px;
+    height: 18px;
+    transform: translateX(-50%) rotate(var(--compass-rotation));
+    transform-origin: 50% 100%;
+    border-radius: 4px 4px 1px 1px;
+    background: #ef4444;
+    transition: transform 120ms linear;
+}
+
+.map-compass-needle::after {
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    transform: translateX(-50%);
+    border-right: 5px solid transparent;
+    border-bottom: 7px solid #ef4444;
+    border-left: 5px solid transparent;
+    content: "";
+}
+
+.map-compass-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    transform: translate(-50%, -50%);
+    border: 2px solid #fff;
+    border-radius: 50%;
+    background: #17212b;
+}
+
 .wms-preview[hidden] {
     display: none;
 }
@@ -1948,6 +2014,12 @@ footer {
         white-space: normal;
     }
 
+    .map-compass {
+        left: 8px;
+        width: 48px;
+        height: 48px;
+    }
+
     .map-info-text {
         display: -webkit-box;
         overflow: hidden;