Added change image forward and backward feature

css/60_photos.css

@@ -257,6 +257,17 @@
 .layer-mapilio .sequence {
     stroke: #0056f1;
 }
+.photo-controls-mapilio {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    pointer-events: initial;
+}
+
+.photo-controls-mapilio button{
+    padding:0 6px;
+}
 
 .ideditor .mapilio-wrapper {
     position: relative;

modules/services/mapilio.js

@@ -405,7 +405,9 @@ export default {
 
     },
 
-    ensureViewerLoaded: function(context,) {
+    ensureViewerLoaded: function(context) {
+
+        let that = this;
 
         let imgWrap = context.container().select('#ideditor-viewer-mapilio > img');
 
@@ -427,6 +429,22 @@ export default {
             .append('div')
             .attr('class', 'photo-attribution fillD');
 
+        const controlsEnter = wrapEnter
+            .append('div')
+            .attr('class', 'photo-controls-wrap')
+            .append('div')
+            .attr('class', 'photo-controls-mapilio');
+
+        controlsEnter
+            .append('button')
+            .on('click.back', step(-1))
+            .text('◄');
+
+        controlsEnter
+            .append('button')
+            .on('click.forward', step(1))
+            .text('►');
+
         wrapEnter
             .append('div')
             .attr('id', 'ideditor-viewer-mapilio');
@@ -481,6 +499,22 @@ export default {
                 _loadViewerPromise = null;
             });
 
+        function step(stepBy) {
+            return function () {
+                if (!_mlyActiveImage) return;
+                const imageId = _mlyActiveImage.id;
+
+                const nextIndex = imageId + stepBy;
+                if (!nextIndex) return;
+
+                const nextImage = _mlyCache.images.forImageId[nextIndex];
+
+                context.map().centerEase(nextImage.loc);
+
+                that.selectImage(context, nextImage.id);
+            };
+        }
+
         return _loadViewerPromise;
     },
 

modules/svg/mapilio_images.js

@@ -175,7 +175,7 @@ export function svgMapilioImages(projection, context, dispatch) {
             .attr('d', viewfieldPath);
 
         function viewfieldPath() {
-            if (this.parentNode.__data__.is_pano) {
+            if (this.parentNode.__data__.isPano) {
                 return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
             } else {
                 return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';