diff --git a/app.js b/app.js
index d6ed7b0..d969dba 100644
--- a/app.js
+++ b/app.js
@@ -117,11 +117,7 @@ const map = new ol.Map({
       createVisibleLayersExtentControl(),
       createAreaZoomControl(),
       ...(shouldShowDeviceCompassControl() ? [createDeviceCompassControl()] : []),
-      new ol.control.Rotate({
-        autoHide: true,
-        label: createNorthPointerIcon(),
-        tipLabel: "Reset map orientation to north",
-      }),
+      createNorthPointerControl(),
     ]),
   layers: [
     softBasemapLayer,
@@ -201,6 +197,25 @@ function createNorthPointerIcon() {
   return icon;
 }
 
+function createNorthPointerControl() {
+  const control = new ol.control.Rotate({
+    autoHide: true,
+    label: createNorthPointerIcon(),
+    tipLabel: "Reset map orientation to north",
+  });
+
+  // Resetting the view while compass orientation remains subscribed lets the
+  // next device event rotate it again. Stop the subscription when the north
+  // pointer is used so its reset remains in effect.
+  control.element.querySelector("button").addEventListener("click", () => {
+    if (deviceCompassActive) {
+      stopDeviceCompass();
+    }
+  });
+
+  return control;
+}
+
 function createVisibleLayersExtentControl() {
   const element = document.createElement("div");
   element.className = "ol-visible-layers-extent ol-unselectable ol-control";