make sure the active image is rendered above other photo markers

modules/services/panoramax.js

@@ -68,7 +68,13 @@ function searchLimited(limit, projection, rtree) {
             let found = rtree.search(extent.bbox());
             const spacing = Math.max(1, Math.floor(found.length / limit));
             found = found
-                .filter((_, idx) => idx % spacing === 0)
+                .filter((d, idx) => idx % spacing === 0 ||
+                                    d.data.id === _activeImage?.id)
+                .sort((a, b) => {
+                    if (a.data.id === _activeImage?.id) return -1;
+                    if (b.data.id === _activeImage?.id) return  1;
+                    return 0;
+                })
                 .slice(0, limit)
                 .map(function(d) { return d.data; });
 

modules/svg/panoramax_images.js

@@ -249,10 +249,13 @@ export function svgPanoramaxImages(projection, context, dispatch) {
             .append('g')
             .attr('class', 'viewfield-scale');
 
+        const activeImageId = service.getActiveImage()?.id;
         // update
         const markers = groups
             .merge(groupsEnter)
             .sort(function(a, b) {
+                if (a.id === activeImageId) return  1;
+                if (b.id === activeImageId) return -1;
                 return b.loc[1] - a.loc[1];  // sort Y
             })
             .attr('transform', transform)