summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTrygve Laugstøl <trygvis@inamo.no>2015-08-20 18:39:32 +0200
committerTrygve Laugstøl <trygvis@inamo.no>2015-08-20 18:39:58 +0200
commit9946606543a1ffb79f5035cd1401c5ebf4df8049 (patch)
treea6c76c5a9ee0c315f91eddbf6be9647a64cb95ca
parentd6d751d748f83d027d273f3c02c8a371f0a06ce5 (diff)
downloadgpx-gallery-9946606543a1ffb79f5035cd1401c5ebf4df8049.tar.gz
gpx-gallery-9946606543a1ffb79f5035cd1401c5ebf4df8049.tar.bz2
gpx-gallery-9946606543a1ffb79f5035cd1401c5ebf4df8049.tar.xz
gpx-gallery-9946606543a1ffb79f5035cd1401c5ebf4df8049.zip
o Correct scaling.HEADmaster
-rw-r--r--gpx-gallery.js97
1 files changed, 46 insertions, 51 deletions
diff --git a/gpx-gallery.js b/gpx-gallery.js
index 34c8823..3598661 100644
--- a/gpx-gallery.js
+++ b/gpx-gallery.js
@@ -110,89 +110,84 @@
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>'
+ ' | <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 width = 200,
- height = 150;
+ onEachFeature: function (feature, layer) {
+ var width = 200;
var popupOptions = {
- maxWidth: width,
minWidth: width,
closeButton: false
};
var canvas = document.createElement('canvas');
- //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 = new Image();
img.addEventListener('load', function () {
var rotate = Math.abs(feature.properties.orientation) == 90;
- var scale, aspect;
- scale = width / img.width;
+ var scale = width / img.width,
+ aspect = img.width / img.height;
+
var w, h;
if (rotate) {
- //scale = height / img.height;
- aspect = img.width / img.height;
w = width;
+ var height = w * aspect;
h = img.height * scale;
- console.log('img', img.width + 'x' + img.height,
+ canvas.setAttribute('width', '' + width);
+ canvas.setAttribute('height', '' + height);
+
+ console.log('canvas', w + 'x' + h,
+ 'img', img.width + 'x' + img.height,
'scale', scale,
- aspect,
+ 'aspect', 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.beginPath();
+ //ctx.moveTo(0, 0);
+ //ctx.lineTo(width, 0);
+ //ctx.moveTo(0, 0);
+ //ctx.lineTo(0, height);
+ //ctx.lineWidth = 1;
+ //ctx.strokeStyle = 'red';
+ //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);
+ var ix = -height / 2,
+ iy = -width / 2,
+ iw = height,
+ ih = width;
+
+ //console.log('ix', ix, 'iy', iy, 'iw', iw, 'ih', ih);
+
+ ctx.drawImage(img, ix, iy, iw, ih);
+ } else {
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 popup = canvas;
- var div = document.createElement('div');
- div.appendChild(canvas);
- div.appendChild(span);
+ if (false) {
+ 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);
+ popup = div;
+ }
- layer.bindPopup(div, popupOptions);
- }, filter: function (feature, layer) {
- return true;
+ layer.bindPopup(popup, popupOptions);
}
};
@@ -255,10 +250,10 @@
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'];
- //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');