fix mapillary infinite loop and improve ui

src/components/EnhancedMap/ImageMarkerLayer/ImageMarkerLayer.jsx

@@ -30,28 +30,23 @@
   const [imageMarkers, setImageMarkers] = useState([])
   const map = useMap()
 
-  const { images, markerColor = colors["blue-leaflet"], imageAlt, imageClicked, icon, mrLayerId, mrLayerLabel, style } = props
+  const { images, markerColor = colors["blue-leaflet"], imageClicked, icon, mrLayerId, mrLayerLabel, style } = props
 
   useEffect(() => {
-    try {
-      if (!map.getPane('mapillaryPopups')) {
-        map.createPane('mapillaryPopups')
-        map.getPane('mapillaryPopups').style.zIndex = 700
-      }
+    if (!map.getPane('mapillaryPopups')) {
+      map.createPane('mapillaryPopups').style.zIndex = 700
+    }
 
-      setImageMarkers(
-        buildImageMarkers(
-          images,
-          icon ? icon : circleIcon(markerColor),
-          markerColor,
-          imageClicked,
-          mrLayerId,
-          mrLayerLabel
-        )
+    setImageMarkers(
+      buildImageMarkers(
+        images,
+        icon || circleIcon(markerColor),
+        markerColor,
+        imageClicked,
+        mrLayerId,
+        mrLayerLabel
       )
-    } catch (error) {
-      console.error('Error creating map markers:', error)
-    }
+    )
   }, [images, markerColor, imageClicked, icon, mrLayerId, mrLayerLabel, map])
 
   return (
@@ -66,125 +61,109 @@
   images: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
-    position: PropTypes.shape({
-      lat: PropTypes.number.isRequired,
-      lon: PropTypes.number.isRequired,
-    }).isRequired,
   })).isRequired,
   imageClicked: PropTypes.func.isRequired,
-  imageAlt: PropTypes.string,
-  buildIcon: PropTypes.func,
   markerColor: PropTypes.string,
 }
 
 const MapillaryViewer = ({ initialImageKey }) => {
   const containerRef = useRef()
 
   useEffect(() => {
-    if (!initialImageKey) {
-      console.error('Initial image key is null or undefined')
-      return
-    }
+    const accessToken = getAccessToken();
 
-    let viewer
-    try {
-      const accessToken = getAccessToken();
-      if (!accessToken) {
-        console.error('Access token is not available');
-        return;
-      }
+    if (!initialImageKey || !accessToken) return
 
-      if (imageCache.has(initialImageKey)) {
-        viewer = imageCache.get(initialImageKey);
-      } else {
-        viewer = new Viewer({
-          accessToken: accessToken,
-          container: containerRef.current,
-          imageId: initialImageKey,
-        });
-        imageCache.set(initialImageKey, viewer);
-      }
-    } catch (error) {
-      console.error('Error initializing Mapillary viewer:', error)
-    }
+    const viewer = imageCache.has(initialImageKey) ? imageCache.get(initialImageKey) : new Viewer({
+      accessToken,
+      container: containerRef.current,
+      imageId: initialImageKey,
+    });
+    imageCache.set(initialImageKey, viewer);
 
-    return () => {
-      try {
-        if (viewer) {
-          viewer.remove()
-        }
-      } catch (error) {
-        console.error('Error removing Mapillary viewer:', error)
-      }
-    }
+    return () => viewer && viewer.remove();
   }, [initialImageKey])
 
   return (
     <div className="mr-p-2 mr-pt-4 mr-relative">
       <div ref={containerRef} id="mapillary-viewer" className="mr-w-full mr-h-64"></div>
     </div>
   )
 }
 
+const getLatLng = (imageInfo) => {
+  const lat = imageInfo.position?.lat !== undefined ? imageInfo.position.lat : imageInfo.lat;
+  const lon = imageInfo.position?.lon !== undefined ? imageInfo.position.lon : imageInfo.lon;
+  return (lat !== undefined && lon !== undefined) ? [lat, lon] : null;
+}
+
 const buildImageMarkers = (images, icon, markerColor, imageClicked, layerId, layerLabel) => {
   try {
     if (!images || images.length === 0) {
       return []
     }
 
     return _map(images, imageInfo => {
-      if (!imageInfo || (!imageInfo.position?.lat || !imageInfo.position?.lon) && (!imageInfo.lat || !imageInfo.lon)) {
+      const imageLatLon = getLatLng(imageInfo);
+      if (!imageInfo || !imageLatLon) {
         console.error(`Invalid position for image key: ${imageInfo?.key}`, imageInfo)
         return null
       }
 
+      if (imageLatLon.lat === undefined || imageLatLon.lon === undefined) {
+        console.error(`Invalid coordinates for image key: ${imageInfo?.key}`, imageInfo)
+        return null
+      }
+
       if (!imageInfo.url) {
         console.error(`Invalid URL for image key: ${imageInfo.key}`, imageInfo)
         return null
       }
 
+      const [lat, lon] = imageLatLon;
+
       return (
         <Marker
           key={imageInfo.key}
           mrLayerId={layerId}
           mrLayerLabel={layerLabel}
-          position={[imageInfo.position?.lat || imageInfo.lat, imageInfo.position?.lon || imageInfo.lon]}
+          position={[lat, lon]}
           icon={icon}
         >
           <Popup pane="mapillaryPopups" maxWidth="351px" offset={[0, 5]}>
             <div style={{ width: 351, marginTop: 5 }}>
               <MapillaryViewer initialImageKey={imageInfo.key} />
             </div>
             <div
               style={{
                 width: '100%',
                 textAlign: 'center',
                 color: markerColor,
                 cursor: 'pointer',
                 fontSize: '1.25rem',
                 padding: '8px',
                 transition: 'background-color 0.3s, color 0.3s'
               }}
               onClick={() => {
                 imageClicked(imageInfo.key)
               }}
               onMouseEnter={e => {
                 e.currentTarget.style.backgroundColor = markerColor
                 e.currentTarget.style.color = 'white'
               }}
               onMouseLeave={e => {
                 e.currentTarget.style.backgroundColor = 'transparent'
                 e.currentTarget.style.color = markerColor
               }}
             >
               <FormattedMessage {...messages.openView} />
             </div>
           </Popup>
         </Marker>
       )
     }).filter(Boolean)
   } catch (error) {
     console.error('Error building image markers:', error)
     return []
   }
 }

src/components/MapillaryViewer/MapillaryViewer.jsx

@@ -1,4 +1,4 @@
-import { createRef, Component } from 'react'
+import { useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Viewer } from 'mapillary-js';
 import { getAccessToken } from '../../services/Mapillary/Mapillary'
@@ -11,49 +11,46 @@ import Modal from '../Modal/Modal'
  *
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
-export default class MapillaryViewer extends Component {
-  containerRef = createRef();
-
+const MapillaryViewer = ({ initialImageKey, onClose }) => {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
 
-  componentDidMount() {
-    this.viewer = new Viewer({
-      accessToken: getAccessToken(),
-      container: this.containerRef.current,
-      imageId: this.props.initialImageKey,
-      component: { cover: false },
-    })
-  }
-
-  componentWillUnmount() {
-    if (this.viewer) {
-      this.viewer.remove();
+  useEffect(() => {
+    if (!viewerRef.current) {
+      viewerRef.current = new Viewer({
+        accessToken: getAccessToken(),
+        container: containerRef.current,
+        imageId: initialImageKey,
+        component: { cover: false },
+      });
     }
-  }
 
-  shouldComponentUpdate(nextProps) {
-    return nextProps.initialImageKey !== this.props.initialImageKey
-  }
+    return () => {
+      // Cleanup if necessary
+      viewerRef.current = null;
+    };
+  }, []);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.initialImageKey !== this.props.initialImageKey) {
-      this.viewer.setImageId(this.props.initialImageKey)
+  useEffect(() => {
+    if (viewerRef.current) {
+      viewerRef.current.setImageId(initialImageKey);
     }
-  }
+  }, [initialImageKey]);
 
-  render() {
-    return (
-      <External>
-        <Modal isActive onClose={this.props.onClose}>
-          <div className="mr-p-2 mr-pt-4 mr-relative mr-m-auto" style={{ width: 640 }}>
-            <div ref={this.containerRef} id="mapillary-viewer" style={{ width: 640, height: 480 }}></div>
-          </div>
-        </Modal>
-      </External>
-    )
-  }
+  return (
+    <External>
+      <Modal isActive onClose={onClose}>
+        <div className="mr-p-2 mr-pt-4 mr-relative mr-m-auto" style={{ width: 640 }}>
+          <div ref={containerRef} id="mapillary-viewer" style={{ width: 640, height: 480 }}></div>
+        </div>
+      </Modal>
+    </External>
+  );
 }
 
 MapillaryViewer.propTypes = {
   initialImageKey: PropTypes.string.isRequired,
   onClose: PropTypes.func,
 }
+
+export default MapillaryViewer;