diff options
-rw-r--r-- | .gitignore | 2 | ||||
-rw-r--r-- | gpx-gallery.js | 57 | ||||
-rw-r--r-- | pictures/index.php | 128 |
3 files changed, 184 insertions, 3 deletions
@@ -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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + + var osmLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© <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'); +} +?> |