summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.gitignore2
-rw-r--r--gpx-gallery.js57
-rw-r--r--pictures/index.php128
3 files changed, 184 insertions, 3 deletions
diff --git a/.gitignore b/.gitignore
index 73102b8..7c33b6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
bower_components
+node_modules
.idea
+*.JPG
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();
}
diff --git a/pictures/index.php b/pictures/index.php
new file mode 100644
index 0000000..0bee830
--- /dev/null
+++ b/pictures/index.php
@@ -0,0 +1,128 @@
+<?php
+
+$hash = hash("md5", $_SERVER['PHP_SELF']);
+$basedir = sys_get_temp_dir() . "/$hash";
+
+if (!is_dir($basedir))
+ mkdir($basedir);
+
+try {
+ function isValidFileName($filename) {
+ return preg_match("/^[_a-zA-Z0-9]*\.JPG$/i", $filename) == 1;
+ }
+
+ function parseVal($s) {
+ $major = strstr($s, '/', true);
+ $minor = substr(strstr($s, '/'), 1);
+ return intval($major) / intval($minor);
+ }
+
+ function parseDeg($val) {
+ $deg = parseVal($val[0]);
+ $min = parseVal($val[1]);
+ $sec = parseVal($val[2]);
+ return $deg + $min/60 + $sec / 3600;
+ }
+
+ function processFile($filename) {
+ global $basedir;
+ $cacheFile = "$basedir/$filename.geojson";
+
+ if (!isValidFileName($filename)) {
+ throw new InvalidArgumentException("Invalid file name: $filename");
+ }
+
+ if (false && is_readable($cacheFile)) {
+ $s = file_get_contents($cacheFile);
+ if ($s !== false) {
+ return json_decode($s);
+ }
+ }
+
+ $exif = exif_read_data($filename, 0, true);
+ if (!$exif) {
+ throw new InvalidArgumentException("Could not open file: $filename");
+ }
+
+ $json = ["type" => "Feature", "id" => $filename];
+
+ foreach ($exif as $key => $section) {
+ foreach ($section as $name => $val) {
+ switch("$key.$name") {
+ case "FILE.FileSize": $filesize_bytes = $val; break;
+ case "COMPUTED.Height": $height = $val; break;
+ case "COMPUTED.Width": $width = $val; break;
+ case "GPS.GPSLongitude": $lon = parseDeg($val); break;
+ case "GPS.GPSLatitude": $lat = parseDeg($val); break;
+ case "IFD0.Orientation": $orientation = $val; break;
+ case "EXIF.MakerNote":
+ case "EXIF.ComponentsConfiguration":
+ case "GPS.GPSVersion":
+ case "GPS.GPSAltitudeRef":
+ break;
+ default:
+// echo "$key.$name=$val\n";
+ }
+ }
+ }
+
+ if (isset($lon) && isset($lat)) {
+ $json["geometry"] = [
+ "type" => "Point",
+ "coordinates" => [$lon, $lat]
+ ];
+ }
+
+ $properties = [
+ ];
+ if (isset($filesize_bytes)) {
+ $properties["filesize_bytes"] = $filesize_bytes;
+ }
+ if (isset($height)) {
+ $properties["height_px"] = $height;
+ }
+ if (isset($width)) {
+ $properties["width_px"] = $width;
+ }
+ if (isset($orientation)) {
+ switch ($orientation) {
+ case 1:
+ $properties["orientation"] = 0;
+ case 3:
+ $properties["orientation"] = -180;
+ case 6:
+ $properties["orientation"] = 90;
+ case 8:
+ $properties["orientation"] = -90;
+ }
+ }
+ $json["properties"] = $properties;
+
+ $s = json_encode($json);
+ file_put_contents($cacheFile, $s);
+
+ return $json;
+ }
+
+ if (!isset($_GET["file"])) {
+ $d = dir(".");
+ $features = [];
+ while (false !== ($entry = $d->read())) {
+ if(!isValidFilename($entry)) {
+ continue;
+ }
+ array_push($features, processFile($entry));
+ }
+ $json = ["type" => "FeatureCollection", "features" => $features];
+ } else {
+ $filename = $_GET["file"];
+ $json = processFile($filename);
+ }
+
+ header('Content-Type: application/vnd.geo+json');
+ echo json_encode($json, JSON_PRETTY_PRINT);
+ echo "\n";
+} catch(InvalidArgumentException $e) {
+ header('HTTP/1.1 400 bad request');
+}
+?>