Merge pull request #1525 from hajkmap/fix/1524-Location-multiple-animations

Fix to remove multiple animations in Location plugin etc

Author: jesade-vbg

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Cookie: Cookie Notice updated after browser refresh. Fix to PR: [#1509](https://github.com/hajkmap/Hajk/pull/1509)
 - FIR plugin - Pagination now remembers page after delete. [#1514](https://github.com/hajkmap/Hajk/pull/1514)
 - Fix collapsed InfoClick in Iframe [#1508](https://github.com/hajkmap/Hajk/pull/1508)
+- Prevent multiple animations in Location plugin [#1525](https://github.com/hajkmap/Hajk/pull/1525)
 
 ### Security
 

apps/client/src/plugins/Location/CustomControlButtonView.js

@@ -58,7 +58,7 @@ const CustomControlButtonView = React.memo(
       // Prepare an output array that contains end-user text
       const output = [
         ...(formattedData.accuracy
-          ? [`Nogranhet: ${formattedData.accuracy} m\n`]
+          ? [`Noggranhet: ${formattedData.accuracy} m\n`]
           : []),
         ...(formattedData.altitude && formattedData.altitudeAccuracy
           ? [

apps/client/src/plugins/Location/LocationModel.js

@@ -112,6 +112,8 @@ class LocationModel {
 
     // If deactivating, cleanup
     if (active === false) {
+      // Lets cleanup the flash animating, so we don't get multiple animations.
+      clearInterval(this.flashInterval);
       // Remove features from map if tracking has been switched off
       this.layer.getSource().clear();
       // Make sure that we zoom to location next time tracking is activated
@@ -124,13 +126,13 @@ class LocationModel {
       this.layer.getSource().addFeature(this.positionFeature);
 
       // Finally, start flashing the position feature
-      setInterval(() => {
+      this.flashInterval = setInterval(() => {
         this.flash(this.positionFeature);
       }, 3000);
     }
   };
 
-  // Flash handler: sets up the animation and creats a handler for the postrender
+  // Flash handler: sets up the animation and creates a handler for the postrender
   flash = (feature) => {
     // Helper: takes care of the actual animation.
     const animate = (event) => {
@@ -176,6 +178,8 @@ class LocationModel {
     const flashGeom = feature.getGeometry().clone();
     // Save the listener key so we can unsubscribe when animation is done
     const listenerKey = this.layer.on("postrender", animate);
+    // We need to force render, otherwise postrender won't run the first time.
+    this.map.render();
   };
 
   enable() {