wip

1 files changed, 87 insertions, 34 deletions

diff --git a/gpx-gallery.js b/gpx-gallery.js
index 57b32fc..34c8823 100644
--- a/gpx-gallery.js
+++ b/gpx-gallery.js
@@ -4,7 +4,8 @@
   function InsertMapDirective($compile, $templateCache) {
     function link($scope, elem) {
       var segments = $scope.segments,
-          picturesData = (segments || {}).picturesData;
+        pictureBaseUrl = (segments || {}).pictureBaseUrl || 'pictures/',
+        picturesData = (segments || {}).picturesData;
       var list = segments.list();
       var topLeft = $scope.topLeft,
         topRight = $scope.topRight,
@@ -13,6 +14,10 @@
       var div = elem[0];
       var map = L.map(div);
 
+      if (!pictureBaseUrl.match(/\/$/)) {
+        pictureBaseUrl = pictureBaseUrl + '/';
+      }
+
       var outerBounds;
 
       var count = list.length;
@@ -111,43 +116,90 @@
 
       if (picturesData) {
         var options = {
-          styleXX: function(feature) {
+          styleXX: function (feature) {
             console.log('feature', feature);
-          }, onEachFeature: function(feature, layer) {
+          }, onEachFeature: function (feature, layer) {
+            var width = 200,
+              height = 150;
+
             var popupOptions = {
-              maxWidth: 200,
-              minWidth: 100,
+              maxWidth: width,
+              minWidth: width,
               closeButton: false
             };
             var canvas = document.createElement('canvas');
-            canvas.setAttribute("height", 100);
-            canvas.setAttribute("width", 150);
+            //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 = document.createElement('img');
-            img.onload = function() {
-              var scale = 200 / img.width;
-              var aspect = img.width / img.height;
-              console.log('image loaded', img.width, img.height, scale, aspect);
-              // ctx.drawImage(img, img.width, img.height);
-              // ctx.drawImage(img, canvas.width/2-img.width/2, canvas.height/2-img.width/2);
-              ctx.drawImage(img, 0, 0, 200, img.height * scale);
-            }
-            img.src = 'pictures/' + feature.id;
-
-            // var div = document.createElement('div');
-            // div.appendChild(canvas);
-//            layer.bindPopup("<div><img src='pictures/" + feature.id + "' width='400px'/></div>", popupOptions);
-            layer.bindPopup(canvas, popupOptions);
-          }, filter: function(feature, layer) {
-//            console.log('feature', feature);
+            var img = new Image();
+            img.addEventListener('load', function () {
+              var rotate = Math.abs(feature.properties.orientation) == 90;
+
+              var scale, aspect;
+              scale = width / img.width;
+              var w, h;
+              if (rotate) {
+                //scale = height / img.height;
+                aspect = img.width / img.height;
+                w = width;
+                h = img.height * scale;
+
+                console.log('img', img.width + 'x' + img.height,
+                  'scale', scale,
+                  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.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);
+
+                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 div = document.createElement('div');
+            div.appendChild(canvas);
+            div.appendChild(span);
+
+            layer.bindPopup(div, popupOptions);
+          }, filter: function (feature, layer) {
             return true;
           }
         };
 
         var picturesLayer = L.geoJson(undefined, options).addTo(map);
-        picturesData.then(function(json) {
-            console.log('geo json', json);
-            picturesLayer.addData(json);
+        picturesData.then(function (json) {
+          console.log('geo json', json);
+          picturesLayer.addData(json);
         });
       }
 
@@ -201,12 +253,12 @@
       var self = this;
       var list = [];
       var failed = false;
-      self.picturesUrl = undefined,
+      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');
 
@@ -245,7 +297,7 @@
         });
 
         if (self.picturesUrl) {
-          self.picturesData = $http.get(self.picturesUrl).then(function(res) {
+          self.picturesData = $http.get(self.picturesUrl).then(function (res) {
             return res.data;
           });
         }
@@ -302,7 +354,8 @@
       .add('gpx/I villreinens forspor, dag 2.gpx', 'Dag 2')
       .add('gpx/I villreinens forspor, dag 3.gpx', 'Dag 3')
       .add('gpx/I villreinens forspor, dag 4.gpx', 'Dag 4');
-    ctrl.segments.picturesUrl = '//trygvis.io/~trygvis/2015/08/i-villregnens-fotspor/pictures/index.php';
+    ctrl.segments.pictureBaseUrl = 'https://trygvis.io/~trygvis/2015/08/i-villreinens-fotspor/pictures';
+    ctrl.segments.picturesUrl = 'https://trygvis.io/~trygvis/2015/08/i-villreinens-fotspor/pictures/index.php';
 
     ctrl.segments.init();
   }