Add viewer controls.. Rotation works and will cache val per sequence

css/60_photos.css

@@ -21,6 +21,7 @@
 .photo-wrapper img {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 
@@ -151,3 +152,36 @@
 .osc-attribution a:hover {
     color: #77ddff;
 }
+
+.osc-controls-wrap {
+    text-align: center;
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    z-index: 10;
+}
+
+.osc-controls {
+    display: inline-block;
+    z-index: 10;
+}
+
+.osc-controls button {
+    height: 18px;
+    width: 18px;
+    background: rgba(0,0,0,0.65);
+    color: #eee;
+    border-radius: 0;
+}
+.osc-controls button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+.osc-controls button:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+.osc-controls button:hover,
+.osc-controls button:active,
+.osc-controls button:focus {
+    background: rgba(0,0,0,0.85);
+    color: #fff;
+}

modules/services/openstreetcam.js

@@ -233,7 +233,8 @@ export default {
         }
 
         openstreetcamCache = {
-            images: { inflight: {}, loaded: {}, nextPage: {}, rtree: rbush() }
+            images: { inflight: {}, loaded: {}, nextPage: {}, rtree: rbush() },
+            sequences: { rotation: {} }
         };
 
         openstreetcamImage = null;
@@ -245,6 +246,7 @@ export default {
         return searchLimited(psize, limit, projection, openstreetcamCache.images.rtree);
     },
 
+
     loadImages: function(projection) {
         var url = apibase + '/1.0/list/nearby-photos/';
         loadTiles('images', url, projection);
@@ -253,14 +255,58 @@ export default {
 
     loadViewer: function() {
         // add osc-wrapper
-        d3_select('#photoviewer').selectAll('.osc-wrapper')
-            .data([0])
-            .enter()
+        var wrap = d3_select('#photoviewer').selectAll('.osc-wrapper')
+            .data([0]);
+
+        var wrapEnter = wrap.enter()
             .append('div')
             .attr('class', 'photo-wrapper osc-wrapper')
-            .classed('hide', true)
+            .classed('hide', true);
+
+        wrapEnter
             .append('div')
             .attr('class', 'osc-attribution fillD');
+
+        var controlsEnter = wrapEnter
+            .append('div')
+            .attr('class', 'osc-controls-wrap')
+            .append('div')
+            .attr('class', 'osc-controls');
+
+        controlsEnter
+            .append('button')
+            .text('◅');
+
+        controlsEnter
+            .append('button')
+            .on('click.rotate-cw', rotate(90))
+            .text('↻');
+
+        controlsEnter
+            .append('button')
+            .on('click.rotate-ccw', rotate(-90))
+            .text('↺');
+
+        controlsEnter
+            .append('button')
+            .text('▻');
+
+
+        function rotate(deg) {
+            return function() {
+                if (!openstreetcamImage) return;
+                var seq = openstreetcamImage.sequence_id;
+                var r = openstreetcamCache.sequences.rotation[seq] || 0;
+
+                r += deg;
+                openstreetcamCache.sequences.rotation[seq] = r;
+
+                d3_select('#photoviewer .osc-wrapper .osc-image')
+                    .transition()
+                    .duration(100)
+                    .style('transform', 'rotate(' + r + 'deg)');
+            };
+        }
     },
 
 
@@ -301,11 +347,15 @@ export default {
     updateViewer: function(d) {
         var wrap = d3_select('#photoviewer .osc-wrapper');
 
-        wrap.selectAll('img')
+        wrap.selectAll('.osc-image')
             .remove();
 
         if (d) {
+            var r = openstreetcamCache.sequences.rotation[d.sequence_id] || 0;
+
             wrap.append('img')
+                .attr('class', 'osc-image')
+                .style('transform', 'rotate(' + r + 'deg)')
                 .attr('src', apibase + '/' + d.imagePath);
 
             var attribution = wrap.selectAll('.osc-attribution').html('');
@@ -345,13 +395,13 @@ export default {
     },
 
 
-    selectedImage: function(imageKey) {
+    selectedImage: function(d) {
         if (!arguments.length) return openstreetcamImage;
-        openstreetcamImage = imageKey;
+        openstreetcamImage = d;
 
         d3_selectAll('.viewfield-group')
             .classed('selected', function(d) {
-                return d.key === imageKey;
+                return d.key === openstreetcamImage.key;
             });
 
         return this;

modules/svg/openstreetcam_images.js

@@ -81,7 +81,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
         context.map().centerEase(d.loc);
 
         openstreetcam
-            .selectedImage(d.key)
+            .selectedImage(d)
             .updateViewer(d)
             .showViewer();
     }
@@ -97,7 +97,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
     function update() {
         var openstreetcam = getOpenstreetcam(),
             data = (openstreetcam ? openstreetcam.images(projection) : []),
-            imageKey = openstreetcam ? openstreetcam.selectedImage() : null;
+            image = openstreetcam && openstreetcam.selectedImage(),
+            imageKey = image && image.key;
 
         var markers = layer.selectAll('.viewfield-group')
             .data(data, function(d) { return d.key; });