diff options
| -rw-r--r-- | gpx-gallery.js | 121 |
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(); } |