added zoom, photo hash-parameter and some fixes

css/60_photos.css

@@ -276,6 +276,11 @@
     background-position: center;
     background-repeat: no-repeat;
 }
+#ideditor-viewer-mapilio{
+    width: 100%;
+    height: 100%;
+    transform-origin: 0 0;
+}
 
 /* Streetside Viewer (pannellum) */
 .ms-wrapper .photo-attribution .image-link {

modules/services/mapilio.js

@@ -1,11 +1,12 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
+import { zoom as d3_zoom, zoomIdentity as d3_zoomIdentity } from 'd3-zoom';
 
 import Protobuf from 'pbf';
 import RBush from 'rbush';
 import { VectorTile } from '@mapbox/vector-tile';
 
-import { utilRebind, utilTiler } from '../util';
+import { utilRebind, utilTiler, utilQsString, utilStringQs, utilSetTransform } from '../util';
 import {geoExtent, geoScaleToZoom} from '../geo';
 import {localizer} from '../core/localizer';
 
@@ -17,7 +18,11 @@ const lineLayer = 'map_roads_line';
 const tileStyle = '&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}';
 
 const minZoom = 14;
-const dispatch = d3_dispatch('change', 'loadedImages', 'loadedLine');
+const dispatch = d3_dispatch('loadedImages', 'loadedLines');
+const imgZoom = d3_zoom()
+    .extent([[0, 0], [320, 240]])
+    .translateExtent([[0, 0], [320, 240]])
+    .scaleExtent([1, 15]);
 const pannellumViewerCSS = 'pannellum-streetside/pannellum.css';
 const pannellumViewerJS = 'pannellum-streetside/pannellum.js';
 const resolution = 1080;
@@ -94,7 +99,7 @@ function loadTile(which, url, tile) {
             return response.arrayBuffer();
         })
         .then(function(data) {
-            if (!data) {
+            if (data.byteLength === 0) {
                 throw new Error('No Data');
             }
 
@@ -106,9 +111,12 @@ function loadTile(which, url, tile) {
                 dispatch.call('loadedLines');
             }
         })
-        .catch(function() {
-            cache.loaded[tileId] = true;
-            delete cache.inflight[tileId];
+        .catch(function (e) {
+            if (e.message === 'No Data') {
+                cache.loaded[tileId] = true;
+            } else {
+                console.log(e);
+            }
         });
 }
 
@@ -295,6 +303,18 @@ export default {
         return this;
     },
 
+    updateUrlImage: function(imageKey) {
+        if (!window.mocha) {
+            var hash = utilStringQs(window.location.hash);
+            if (imageKey) {
+                hash.photo = 'mapilio/' + imageKey;
+            } else {
+                delete hash.photo;
+            }
+            window.location.replace('#' + utilQsString(hash, true));
+        }
+    },
+
     initViewer: function () {
         if (!window.pannellum) return;
         if (_pannellumViewer) return;
@@ -318,6 +338,8 @@ export default {
 
         this.setActiveImage(d);
 
+        this.updateUrlImage(d.id);
+
         let viewer = context.container().select('.photoviewer');
         if (!viewer.empty()) viewer.datum(d);
 
@@ -346,6 +368,15 @@ export default {
             .attr('href', `https://mapilio.com/app?lat=${d.loc[1]}&lng=${d.loc[0]}&zoom=17&pId=${d.id}`)
             .text('mapilio.com');
 
+        wrap
+            .transition()
+            .duration(100)
+            .call(imgZoom.transform, d3_zoomIdentity);
+
+        wrap
+            .selectAll('img')
+            .remove();
+
         getImageData(d.id,d.sequence_id).then(function () {
 
             if (d.isPano){
@@ -423,7 +454,9 @@ export default {
         let wrapEnter = wrap.enter()
             .append('div')
             .attr('class', 'photo-wrapper mapilio-wrapper')
-            .classed('hide', true);
+            .classed('hide', true)
+            .call(imgZoom.on('zoom', zoomPan))
+            .on('dblclick.zoom', null);
 
         wrapEnter
             .append('div')
@@ -515,6 +548,12 @@ export default {
             };
         }
 
+        function zoomPan(d3_event) {
+            var t = d3_event.transform;
+            context.container().select('.photoviewer #ideditor-viewer-mapilio')
+                .call(utilSetTransform, t.x, t.y, t.k);
+        }
+
         return _loadViewerPromise;
     },
 
@@ -544,6 +583,8 @@ export default {
         let viewer = context.container().select('.photoviewer');
         if (!viewer.empty()) viewer.datum(null);
 
+        this.updateUrlImage(null);
+
         viewer
             .classed('hide', true)
             .selectAll('.photo-wrapper')