summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--gpx-gallery.js121
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();
}