wip

1 files changed, 54 insertions, 3 deletions

diff --git a/gpx-gallery.js b/gpx-gallery.js
index 9956ccf..57b32fc 100644
--- a/gpx-gallery.js
+++ b/gpx-gallery.js
@@ -3,7 +3,8 @@
 
   function InsertMapDirective($compile, $templateCache) {
     function link($scope, elem) {
-      var segments = $scope.segments;
+      var segments = $scope.segments,
+          picturesData = (segments || {}).picturesData;
       var list = segments.list();
       var topLeft = $scope.topLeft,
         topRight = $scope.topRight,
@@ -102,12 +103,54 @@
         });
       });
 
-      var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' +
+      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>'
       });
       osmLayer.addTo(map);
 
+      if (picturesData) {
+        var options = {
+          styleXX: function(feature) {
+            console.log('feature', feature);
+          }, onEachFeature: function(feature, layer) {
+            var popupOptions = {
+              maxWidth: 200,
+              minWidth: 100,
+              closeButton: false
+            };
+            var canvas = document.createElement('canvas');
+            canvas.setAttribute("height", 100);
+            canvas.setAttribute("width", 150);
+            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);
+            return true;
+          }
+        };
+
+        var picturesLayer = L.geoJson(undefined, options).addTo(map);
+        picturesData.then(function(json) {
+            console.log('geo json', json);
+            picturesLayer.addData(json);
+        });
+      }
+
       function createLegend(position, templateUrl) {
         console.log('Creating legend for ' + position + ' from ' + templateUrl);
         var legend = L.control({position: position});
@@ -158,6 +201,7 @@
       var self = this;
       var list = [];
       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'];
@@ -199,6 +243,12 @@
             }
           });
         });
+
+        if (self.picturesUrl) {
+          self.picturesData = $http.get(self.picturesUrl).then(function(res) {
+            return res.data;
+          });
+        }
       };
 
       this.list = function () {
@@ -252,6 +302,7 @@
       .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.init();
   }