o Initial import.

1 files changed, 263 insertions, 0 deletions

diff --git a/gpx-gallery.js b/gpx-gallery.js
new file mode 100644
index 0000000..9956ccf
--- /dev/null
+++ b/gpx-gallery.js
@@ -0,0 +1,263 @@
+(function () {
+  'use strict';
+
+  function InsertMapDirective($compile, $templateCache) {
+    function link($scope, elem) {
+      var segments = $scope.segments;
+      var list = segments.list();
+      var topLeft = $scope.topLeft,
+        topRight = $scope.topRight,
+        bottomLeft = $scope.bottomLeft,
+        bottomRight = $scope.bottomRight;
+      var div = elem[0];
+      var map = L.map(div);
+
+      var outerBounds;
+
+      var count = list.length;
+
+      function createIcon(location, className, html) {
+        var icon = L.divIcon({
+          className: className,
+          html: html
+        });
+
+        return L.marker(location, {icon: icon});
+      }
+
+      angular.forEach(list, function (segment, index) {
+        var className = 'segment-' + index;
+
+        var gpxLayer;
+        segment.gpx.then(function (gpx) {
+          gpxLayer = new L.GPX(gpx, {
+            marker_options: {
+              // define where the icons are
+              startIconUrl: undefined && 'bower_components/leaflet-gpx/pin-icon-start.png',
+              endIconUrl: undefined && 'bower_components/leaflet-gpx/pin-icon-end.png',
+              shadowUrl: undefined && 'bower_components/leaflet-gpx/pin-shadow.png'
+            },
+            polyline_options: {
+              className: className,
+              color: segment.color
+            },
+            clickable: false
+          })
+            .on('loaded', function (e) {
+              var layer = e.target;
+              var bounds = e.target.getBounds();
+
+              segment.bounds = bounds;
+              segment.start = e.target.get_start();
+              segment.end = e.target.get_end();
+
+              if (outerBounds) {
+                outerBounds.extend(bounds);
+              } else {
+                outerBounds = bounds;
+              }
+
+              // console.log('Box for ' + segment.title, bounds);
+
+              count--;
+              if (count == 0) {
+                console.log('Loaded all maps, outerBounds', outerBounds);
+                map.fitBounds(outerBounds);
+
+                angular.forEach(list, function (s, index) {
+
+                  var icon;
+                  if (index == 0) {
+                    createIcon(s.start, 'icon-start', "<i class='fa fa-arrow-circle-o-up fa-3x'/>")
+                      .addTo(map);
+                  }
+
+                  if (index == list.length - 1) {
+                    createIcon(s.end, 'icon-end', "<i class='fa fa-arrow-circle-o-down fa-3x'/>")
+                      .addTo(map);
+                  } else {
+                    //createIcon(s.end, 'icon-stop', "<i class='fa fa-pause fa-3x'/>")
+                    //  .addTo(map);
+                  }
+                });
+
+                L.marker(segments.last.end, {
+                  icon: L.divIcon({
+                    className: 'icon-end',
+                    html: "<i class='fa fa-arrow-circle-o-down fa-3x'/>"
+                  })
+                }).addTo(map);
+              }
+              layer.addTo(map);
+            });
+        });
+
+        segment.on('blur', function () {
+          // TODO: make normal
+          //gpxLayer.setStyle({color: 'blue'});
+        });
+        segment.on('focus', function () {
+          // TODO: make wider
+          //gpxLayer.setStyle({color: 'red'});
+        });
+      });
+
+      var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' +
+        '| <a href="http://fortawesome.github.io/Font-Awesome/license/">Font Awesome</a>'
+      });
+      osmLayer.addTo(map);
+
+      function createLegend(position, templateUrl) {
+        console.log('Creating legend for ' + position + ' from ' + templateUrl);
+        var legend = L.control({position: position});
+
+        legend.onAdd = function () {
+          var div = L.DomUtil.create('div', 'info legend');
+
+          var t = $templateCache.get(templateUrl);
+          if (!t) {
+            throw "Could not load template: " + bottomRight;
+          }
+
+          var compiled = $compile(t);
+          var fragment = compiled($scope);
+
+          if (fragment.length != 1) {
+            throw "Invalid template, must contain exactly one root element.";
+          }
+
+          return fragment[0];
+        };
+        return legend;
+      }
+
+      topLeft && createLegend('topleft', topLeft).addTo(map);
+      topRight && createLegend('topright', topRight).addTo(map);
+      bottomLeft && createLegend('bottomleft', bottomLeft).addTo(map);
+      bottomRight && createLegend('bottomright', bottomRight).addTo(map);
+    }
+
+    return {
+      restrict: 'E',
+      template: '<div/>',
+      scope: {
+        segments: '=',
+        topLeft: '=',
+        topRight: '=',
+        bottomLeft: '=',
+        bottomRight: '='
+      },
+      replace: true,
+      link: link
+    }
+  }
+
+  function GpxGalleryController($http, $q, $injector) {
+    function Segments() {
+      var self = this;
+      var list = [];
+      var failed = false;
+
+      //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');
+
+      this.on = function (name, listener) {
+        scope.$on(name, listener);
+      };
+
+      this.add = function (gpxUrl, title) {
+        list.push(new Segment(this, list.length, scope.$new(), gpxUrl, title));
+        return this;
+      };
+
+      this.init = function () {
+        var count = list.length;
+
+        angular.forEach(list, function (segment, index) {
+          segment.first = index == 0;
+          segment.last = index == count - 1;
+          segment.middle = !segment.first && !segment.last;
+        });
+        self.first = list[0];
+        self.last = list[list.length - 1];
+
+        angular.forEach(list, function (segment) {
+          $http.get(segment.gpxUrl).then(function (res) {
+            segment.process(res.data);
+          }, function () {
+            failed = true;
+          }).finally(function () {
+            count--;
+            if (count == 0) {
+              console.log('All GPX files loaded');
+              ctrl.ready = true;
+            }
+          });
+        });
+      };
+
+      this.list = function () {
+        return list;
+      };
+
+      this.focus = function (segment) {
+        angular.forEach(list, function (s) {
+          if (s === segment) {
+            s.emit('focus', {segment: s});
+          } else {
+            s.emit('blur', {segment: s});
+          }
+        });
+      };
+    }
+
+    function Segment(segments, index, scope, gpxUrl, name) {
+      var segment = this;
+      this.gpxUrl = gpxUrl;
+      this.title = name;
+      this.color = segments.colors[index % segments.colors.length];
+
+      this.broadcast = scope.$broadcast;
+      this.on = function (name, listener) {
+        scope.$on(name, listener);
+      };
+      this.emit = function (name, args) {
+        scope.$emit(name, args);
+      };
+
+      var gpxQ = $q.defer();
+      this.gpx = gpxQ.promise;
+
+      this.process = function (string) {
+        console.log("GPX for " + this.title + " loaded");
+        gpxQ.resolve(string);
+      };
+
+      this.focus = function () {
+        segments.focus(this);
+      };
+    }
+
+    var ctrl = this;
+
+    ctrl.ready = false;
+
+    ctrl.segments = new Segments()
+      .add('gpx/I villreinens forspor, dag 1.gpx', 'Dag 1')
+      .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.init();
+  }
+
+  angular
+    .module('gpx-gallery', [])
+    .directive('insertMap', InsertMapDirective)
+    .controller('GpxGalleryController', GpxGalleryController);
+}());