From d5118b0fd66f10bf44ff56ff941d473b003a5ff0 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Tue, 29 Apr 2025 17:19:55 +0200
Subject: [PATCH] make sure photos is properly highlighted when switching
 providers

previously, when the photo was already loaded in the mapillary viewer, then another photo from a different provider was displayed and the previous mapillary photo selected again, the "highlighted photo" marker was not drawn correctly, and the "set mapillary id from photo" button not properly updated
---
 modules/services/mapillary.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index faa35267d..30747f4b8 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -547,7 +547,6 @@ export default {
 
     // Initialize image viewer (Mapillar JS)
     initViewer: function(context) {
-        const that = this;
         if (!window.mapillary) return;
 
         const opts = {
@@ -577,7 +576,7 @@ export default {
         }
 
         _mlyViewer = new mapillary.Viewer(opts);
-        _mlyViewer.on('image', imageChanged);
+        _mlyViewer.on('image', imageChanged.bind(this));
         _mlyViewer.on('bearing', bearingChanged);
 
         if (_mlyViewerFilter) {
@@ -591,16 +590,16 @@ export default {
 
         // imageChanged: called after the viewer has changed images and is ready.
         function imageChanged(node) {
-            that.resetTags();
+            this.resetTags();
             const image = node.image;
-            that.setActiveImage(image);
-            that.setStyles(context, null);
+            this.setActiveImage(image);
+            this.setStyles(context, null);
             const loc = [image.originalLngLat.lng, image.originalLngLat.lat];
             context.map().centerEase(loc);
-            that.updateUrlImage(image.id);
+            this.updateUrlImage(image.id);
 
             if (_mlyShowFeatureDetections || _mlyShowSignDetections) {
-                that.updateDetections(image.id, `${apiUrl}/${image.id}/detections?access_token=${accessToken}&fields=id,image,geometry,value`);
+                this.updateDetections(image.id, `${apiUrl}/${image.id}/detections?access_token=${accessToken}&fields=id,image,geometry,value`);
             }
             dispatch.call('imageChanged');
         }
@@ -617,6 +616,7 @@ export default {
     selectImage: function(context, imageId) {
         if (_mlyViewer && imageId) {
             _mlyViewer.moveTo(imageId)
+                .then(image => this.setActiveImage(image))
                 .catch(function(e) {
                     console.error('mly3', e); // eslint-disable-line no-console
                 });