From 9946606543a1ffb79f5035cd1401c5ebf4df8049 Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Thu, 20 Aug 2015 18:39:32 +0200
Subject: o Correct scaling.

---
 gpx-gallery.js | 97 ++++++++++++++++++++++++++++------------------------------
 1 file changed, 46 insertions(+), 51 deletions(-)

diff --git a/gpx-gallery.js b/gpx-gallery.js
index 34c8823..3598661 100644
--- a/gpx-gallery.js
+++ b/gpx-gallery.js
@@ -110,89 +110,84 @@
 
       var osmLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors' +
-        '| <a href="http://fortawesome.github.io/Font-Awesome/license/">Font Awesome</a>'
+        ' | <a href="http://fortawesome.github.io/Font-Awesome/license/">Font Awesome</a>'
       });
       osmLayer.addTo(map);
 
       if (picturesData) {
         var options = {
-          styleXX: function (feature) {
-            console.log('feature', feature);
-          }, onEachFeature: function (feature, layer) {
-            var width = 200,
-              height = 150;
+          onEachFeature: function (feature, layer) {
+            var width = 200;
 
             var popupOptions = {
-              maxWidth: width,
               minWidth: width,
               closeButton: false
             };
             var canvas = document.createElement('canvas');
-            //canvas.setAttribute("height", '' + height);
-            //canvas.setAttribute("width", '' + width);
-            //canvas.setAttribute("height", '' + (height * 2));
-            //canvas.setAttribute("width", '' + (width * 2));
             var ctx = canvas.getContext("2d");
             var img = new Image();
             img.addEventListener('load', function () {
               var rotate = Math.abs(feature.properties.orientation) == 90;
 
-              var scale, aspect;
-              scale = width / img.width;
+              var scale = width / img.width,
+                aspect = img.width / img.height;
+
               var w, h;
               if (rotate) {
-                //scale = height / img.height;
-                aspect = img.width / img.height;
                 w = width;
+                var height = w * aspect;
                 h = img.height * scale;
 
-                console.log('img', img.width + 'x' + img.height,
+                canvas.setAttribute('width', '' + width);
+                canvas.setAttribute('height', '' + height);
+
+                console.log('canvas', w + 'x' + h,
+                  'img', img.width + 'x' + img.height,
                   'scale', scale,
-                  aspect,
+                  'aspect', aspect,
                   feature.properties.orientation,
                   'size', w + 'x' + h);
 
-                /*
-                 //ctx.scale(scale, scale);
-                 ctx.translate(width / 2, height / 2);
-                 ctx.rotate(feature.properties.orientation * Math.PI / 180);
-                 */
-                ctx.beginPath();
-                ctx.moveTo(0, 0);
-                ctx.lineTo(width, 0);
-                ctx.lineTo(width, height);
-                ctx.lineTo(0, height);
-                ctx.lineTo(0, 0);
-                //ctx.lineWidth = 5;
-                //ctx.strokeStyle = 'blue';
-                ctx.stroke();
+                //ctx.beginPath();
+                //ctx.moveTo(0, 0);
+                //ctx.lineTo(width, 0);
+                //ctx.moveTo(0, 0);
+                //ctx.lineTo(0, height);
+                //ctx.lineWidth = 1;
+                //ctx.strokeStyle = 'red';
+                //ctx.stroke();
 
                 ctx.translate(width / 2, height / 2);
                 ctx.rotate(feature.properties.orientation * Math.PI / 180);
-                //ctx.rotate(10 * Math.PI / 180);
-                ////ctx.scale(scale, scale);
-                //
-                ctx.drawImage(img, -width/2, -height/2, width, height);
-              } else {
-                //ctx.scale(scale, scale);
-                //ctx.drawImage(img, 0, 0);
 
+                var ix = -height / 2,
+                  iy = -width / 2,
+                  iw = height,
+                  ih = width;
+
+                //console.log('ix', ix, 'iy', iy, 'iw', iw, 'ih', ih);
+
+                ctx.drawImage(img, ix, iy, iw, ih);
+              } else {
                 ctx.drawImage(img, 0, 0, width, img.height * scale);
               }
             });
             img.src = pictureBaseUrl + feature.id;
 
-            var span = document.createElement('a');
-            span.setAttribute('href', pictureBaseUrl + feature.id);
-            span.textContent = feature.id;
+            var popup = canvas;
 
-            var div = document.createElement('div');
-            div.appendChild(canvas);
-            div.appendChild(span);
+            if (false) {
+              var span = document.createElement('a');
+              span.setAttribute('href', pictureBaseUrl + feature.id);
+              span.textContent = feature.id;
+
+              var div = document.createElement('div');
+              div.appendChild(canvas);
+              div.appendChild(span);
+              popup = div;
+            }
 
-            layer.bindPopup(div, popupOptions);
-          }, filter: function (feature, layer) {
-            return true;
+            layer.bindPopup(popup, popupOptions);
           }
         };
 
@@ -255,10 +250,10 @@
       var failed = false;
       self.picturesUrl = undefined;
 
-        //self.colors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
-        //self.colors = ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177'];
-        //self.colors = [ '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'];
-        self.colors = ['#00441b', '#4d004b', '#084081', '#7f0000'];
+      //self.colors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
+      //self.colors = ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177'];
+      //self.colors = [ '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'];
+      self.colors = ['#00441b', '#4d004b', '#084081', '#7f0000'];
 
       var scope = $injector.get('$rootScope');
 
-- 
cgit v1.2.3