feat: add north reset control

app.js

@@ -69,6 +69,15 @@ const parcelSearchLayer = new ol.layer.Vector({
 
 const map = new ol.Map({
   target: "map",
+  controls: ol.control
+    .defaults.defaults({ rotate: false })
+    .extend([
+      new ol.control.Rotate({
+        autoHide: true,
+        label: createNorthPointerIcon(),
+        tipLabel: "Reset map orientation to north",
+      }),
+    ]),
   layers: [softBasemapLayer, openStreetMapLayer, satelliteLayer, wmsLayer, parcelSearchLayer],
   view: new ol.View({
     center: ol.proj.fromLonLat(DEFAULT_CENTER),
@@ -101,6 +110,14 @@ function setSidebarCollapsed(collapsed) {
   }
 }
 
+function createNorthPointerIcon() {
+  const icon = document.createElement("img");
+  icon.className = "north-pointer-icon";
+  icon.src = "./assets/icons/north-pointer.svg";
+  icon.alt = "";
+  return icon;
+}
+
 async function searchParcela(event) {
   event.preventDefault();
 

assets/icons/north-pointer.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" aria-hidden="true">
+  <path d="M0 0h56v56H0z" fill="none" />
+  <path fill="#cf3d36" d="M11.992 52.375c1.172 0 1.922-.422 3.07-1.547l12.61-12.492c.117-.117.21-.211.328-.211c.117 0 .211.094.328.21l12.61 12.493c1.148 1.125 1.898 1.547 3.07 1.547c1.57 0 2.554-1.219 2.554-2.812c0-.891-.374-1.946-.726-2.907L31.188 6.625c-.75-2.062-1.852-3-3.188-3s-2.437.938-3.187 3L10.164 46.656c-.351.961-.726 2.016-.726 2.907c0 1.593.984 2.812 2.554 2.812m1.617-5.11c-.07-.046-.093-.14-.023-.28L27.766 8.71c.07-.188.14-.258.234-.258s.164.07.234.258l14.18 38.273c.07.141.047.235-.023.282c-.047.023-.141 0-.211-.047L29.172 34.023c-.422-.422-.844-.515-1.172-.515c-.352 0-.75.093-1.172.515L13.82 47.22c-.07.047-.164.07-.21.047" />
+</svg>

styles.css

@@ -314,6 +314,41 @@ button:disabled {
   left: auto;
 }
 
+/* OpenLayers hides this control while the view is north-up. */
+.map-wrap .ol-rotate {
+  top: auto;
+  right: 16px;
+  bottom: 16px;
+  left: auto;
+  padding: 0;
+  background: transparent;
+}
+
+.map-wrap .ol-rotate button {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  margin: 0;
+  padding: 0;
+  place-items: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  line-height: 1;
+  box-shadow: 0 10px 24px rgba(52, 43, 28, 0.2);
+}
+
+.north-pointer-icon {
+  display: block;
+  width: 26px;
+  height: 26px;
+  transform-origin: center;
+}
+
+.map-wrap .ol-rotate button:hover {
+  background: #fff;
+  transform: translateY(-1px);
+}
+
 @media (max-width: 920px) {
   .app-shell {
     padding: 16px;
@@ -329,6 +364,11 @@ button:disabled {
     right: 12px;
   }
 
+  .map-wrap .ol-rotate {
+    right: 12px;
+    bottom: 12px;
+  }
+
   .sidebar {
     top: 16px;
     bottom: 16px;