diff --git a/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.html b/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.html
index c70bae8b8..eafcad5fc 100644
--- a/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.html
+++ b/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.html
@@ -4,7 +4,7 @@
             <button mat-button class="w-full" (click)="addPointToRoute()" matTooltip="{{resources.addPointToRoute}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Location" angularticsAction="Convert location to point"><i class="fa icon-plus"></i></button>
         </div>
         <div class="w-1/2">
-            <button mat-button class="w-full" type="button" (click)="toggleDistance()" [class.active]="distance" matTooltip="{{resources.measureDistanceFromCurrentLocation}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Location" angularticsAction="Measure distance"><i class="fa icon-measure"></i></button>
+            <button mat-button class="w-full" type="button" (click)="toggleDistance()" [class.active]="distance$ | async" matTooltip="{{resources.measureDistanceFromCurrentLocation}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Location" angularticsAction="Measure distance"><i class="fa icon-measure"></i></button>
         </div>
     </div>
     <div class="flex flex-row">
diff --git a/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.ts b/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.ts
index 893a1823d..0b8426a85 100644
--- a/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.ts
+++ b/IsraelHiking.Web/src/application/components/overlays/gps-location-overlay.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { SocialSharing } from "@awesome-cordova-plugins/social-sharing/ngx";
+import { Observable } from "rxjs";
 import { Store } from "@ngxs/store";
 
 import { BaseMapComponent } from "../base-map.component";
@@ -28,7 +29,7 @@ export class GpsLocationOverlayComponent extends BaseMapComponent {
     @Output()
     public closed = new EventEmitter();
 
-    public distance: boolean;
+    public distance$: Observable<boolean>;
     public hideCoordinates: boolean;
 
     constructor(resources: ResourcesService,
@@ -41,9 +42,7 @@ export class GpsLocationOverlayComponent extends BaseMapComponent {
                 private readonly store: Store) {
         super(resources);
         this.hideCoordinates = true;
-        this.store.select((state: ApplicationState) => state.inMemoryState.distance).subscribe((distance) => {
-            this.distance = distance;
-        });
+        this.distance$ = this.store.select((state: ApplicationState) => state.inMemoryState.distance);
     }
 
     public addPointToRoute() {