Add altitude on image

files/db/update_v20_to_v21.sql

@@ -0,0 +1,3 @@
+ALTER TABLE medias ADD latitude DECIMAL(7,5) AFTER timezone;
+ALTER TABLE medias ADD longitude DECIMAL(8,5) AFTER latitude;
+ALTER TABLE medias ADD altitude SMALLINT AFTER longitude;

inc/Media.php

@@ -76,7 +76,7 @@ class Media extends PhpObject {
 		if($bOwnMedia && empty($this->asMedia) || !$bOwnMedia && empty($this->asMedias) || $bConstraintArray) {
 			if($this->oProject->getProjectId()) {
 				$asParams = array(
-					'select'	=> array(Db::getId(self::MEDIA_TABLE), 'filename', 'taken_on', 'posted_on', 'timezone', 'width', 'height', 'rotate', 'type AS subtype', 'comment'),
+					'select'	=> array(Db::getId(self::MEDIA_TABLE), 'filename', 'taken_on', 'posted_on', 'timezone', 'latitude', 'longitude', 'altitude', 'width', 'height', 'rotate', 'type AS subtype', 'comment'),
 					'from'		=> self::MEDIA_TABLE,
 					'constraint'=> array(Db::getId(Project::PROJ_TABLE) => $this->oProject->getProjectId())
 				);
@@ -128,6 +128,9 @@ class Media extends PhpObject {
 				'taken_on'						=> date(Db::TIMESTAMP_FORMAT, ($asMediaInfo['taken_ts'] > 0)?$asMediaInfo['taken_ts']:$asMediaInfo['file_ts']),
 				'posted_on'						=> date(Db::TIMESTAMP_FORMAT, $asMediaInfo['file_ts']),
 				'timezone'						=> $asMediaInfo['timezone'],
+				'latitude'						=> is_null($asMediaInfo['latitude'])?'NULL':$asMediaInfo['latitude'],
+				'longitude'						=> is_null($asMediaInfo['longitude'])?'NULL':$asMediaInfo['longitude'],
+				'altitude'						=> is_null($asMediaInfo['altitude'])?'NULL':$asMediaInfo['altitude'],
 				'width'							=> $asMediaInfo['width'],
 				'height'						=> $asMediaInfo['height'],
 				'rotate'						=> $asMediaInfo['rotate'],
@@ -151,21 +154,23 @@ class Media extends PhpObject {
 	{
 		$sMediaPath = self::getMediaPath($sMediaName);
 		$sType = self::getMediaType($sMediaName);
-
 		$iPostedOn = filemtime($sMediaPath);
 		$sTimeZone = date_default_timezone_get();
 		$iWidth = 0;
 		$iHeight = 0;
 		$sRotate = '0';
 		$sTakenOn = '';
+		$fLat = null;
+		$fLng = null;
+		$iAlt = null;
 		switch($sType) {
 			case 'video':
 				$asResult = array();
 				$sParams = implode(' ', array(
 					'-loglevel error', //Remove comments
 					'-select_streams v:0', //First video channel
-					'-show_entries '. //filter tags : Width, Height, Creation Time & Rotation
-						'format_tags=creation_time,com.apple.quicktime.creationdate:'.
+					'-show_entries '. //filter tags : Width, Height, Creation Time, Location & Rotation
+						'format_tags=creation_time,com.apple.quicktime.creationdate,com.apple.quicktime.location.ISO6709:'.
 						'stream_tags=rotate,creation_time:'.
 						'stream=width,height',
 					'-print_format json', //output format: json
@@ -181,6 +186,11 @@ class Media extends PhpObject {
 				}
 				else $sTakenOn = $asExif['format']['tags']['creation_time'] ?? $asExif['streams'][0]['tags']['creation_time'];
 
+				//Location
+				if(isset($asExif['format']['tags']['com.apple.quicktime.location.ISO6709'])) {
+					list($fLat, $fLng, $iAlt) = self::getLatLngAltFromISO6709($asExif['format']['tags']['com.apple.quicktime.location.ISO6709']);
+				}
+
 				//Width & Height
 				$iWidth = $asExif['streams'][0]['width'];
 				$iHeight = $asExif['streams'][0]['height'];
@@ -209,6 +219,14 @@ class Media extends PhpObject {
 					$sTimeZone = $asExif['EXIF']['OffsetTimeOriginal'] ?? $asExif['EXIF']['UndefinedTag:0x9011'] ?? Spot::getTimeZoneFromDate($sTakenOn) ?? $sTimeZone;
 				}
 
+				//Location
+				if(array_key_exists('GPS', $asExif)) {
+					$asGps = $asExif['GPS'];
+					$fLat = self::getLatLngFromExif($asGps['GPSLatitudeRef'] ?? $asGps['UndefinedTag:0x0001'], $asGps['GPSLatitude'] ?? $asGps['UndefinedTag:0x0002']);
+					$fLng = self::getLatLngFromExif($asGps['GPSLongitudeRef'] ?? $asGps['UndefinedTag:0x0003'], $asGps['GPSLongitude'] ?? $$asGps['UndefinedTag:0x0004']);
+					$iAlt = (($asGps['GPSAltitudeRef'] ?? $asGps['UndefinedTag:0x0005'] ?? '0') == '1'?-1:1) * ($asGps['GPSAltitude'] ?? $asGps['UndefinedTag:0x0006'] ?? 0);
+				}
+
 				//Orientation
 				if(array_key_exists('IFD0', $asExif) && array_key_exists('Orientation', $asExif['IFD0'])) {
 					switch($asExif['IFD0']['Orientation'])
@@ -232,6 +250,9 @@ class Media extends PhpObject {
 
 		return array(
 			'timezone'	=> $sTimeZone,
+			'latitude'	=> $fLat,
+			'longitude'	=> $fLng,
+			'altitude'	=> $iAlt,
 			'taken_ts'	=> $iTakenOn,
 			'file_ts'	=> $iPostedOn,
 			'width'		=> $iWidth,
@@ -290,4 +311,29 @@ class Media extends PhpObject {
 
 		return $sType;
 	}
+
+	private static function getLatLngFromExif($sDirection, $asCoords) {
+		$fCoord = 0;
+		foreach($asCoords as $iIndex=>$sCoord) {
+			$fValue = 0;
+			$asCoordParts = explode('/', $sCoord);
+			switch(count($asCoordParts)) {
+				case 1:
+					$fValue = $asCoordParts[0];
+					break;
+				case 2:
+					$fValue = floatval($asCoordParts[0]) / floatval($asCoordParts[1]);
+					break;
+			}
+
+			$fCoord += $fValue / pow(60, $iIndex);
+		}
+
+		return $fCoord * (($sDirection == 'W' || $sDirection == 'S')?-1:1);
+	}
+
+	private static function getLatLngAltFromISO6709($sIso6709) {
+		preg_match('/^(?P<lat>[\+\-][0,1]?\d{2}\.\d+)(?P<lng>[\+\-][0,1]?\d{2}\.\d+)(?P<alt>[\+\-]\d+)?/', $sIso6709, $asMatches);
+		return array(floatval($asMatches['lat']), floatval($asMatches['lng']), floatval($asMatches['alt'] ?? 0));
+	}
 }

inc/Spot.php

@@ -87,7 +87,7 @@ class Spot extends Main
 				Feed::SPOT_TABLE	=> array('ref_spot_id', 'name', 'model'),
 				Project::PROJ_TABLE	=> array('name', 'codename', 'active_from', 'active_to'),
 				self::POST_TABLE	=> array(Db::getId(Project::PROJ_TABLE), Db::getId(User::USER_TABLE), 'name', 'content', 'site_time', 'timezone'),
-				Media::MEDIA_TABLE	=> array(Db::getId(Project::PROJ_TABLE), 'filename', 'type', 'taken_on', 'posted_on', 'timezone', 'width', 'height', 'rotate', 'comment'),
+				Media::MEDIA_TABLE	=> array(Db::getId(Project::PROJ_TABLE), 'filename', 'type', 'taken_on', 'posted_on', 'timezone', 'latitude', 'longitude', 'altitude', 'width', 'height', 'rotate', 'comment'),
 				User::USER_TABLE	=> array('name', 'email', 'gravatar', 'language', 'timezone', 'active', 'clearance'),
 				Map::MAP_TABLE		=> array('codename', 'pattern', 'token', 'tile_size', 'min_zoom', 'max_zoom', 'attribution'),
 				Map::MAPPING_TABLE	=> array(Db::getId(Map::MAP_TABLE) , Db::getId(Project::PROJ_TABLE))
@@ -110,6 +110,7 @@ class Spot extends Main
 				'last_update'	=> "TIMESTAMP DEFAULT 0",
 				'latitude'		=> "DECIMAL(7,5)",
 				'longitude'		=> "DECIMAL(8,5)",
+				'altitude'		=> "SMALLINT",
 				'model'			=> "VARCHAR(20)",
 				'name'			=> "VARCHAR(100)",
 				'pattern'		=> "VARCHAR(200) NOT NULL",
@@ -269,10 +270,11 @@ class Spot extends Main
 	public function getMarkers($asMessageIds=array(), $asMediaIds=array(), $bInternal=false)
 	{
 		$asMessages = $this->getSpotMessages($asMessageIds);
+		$asGeoMedias = array();
 		usort($asMessages, function($a, $b){return $a['unix_time'] > $b['unix_time'];});
+		$bHasMsg = !empty($asMessages);
 
 		//Add medias
-		if(!empty($asMessages)) {
 		$asMedias = $this->getMedias('taken_on', $asMediaIds);
 		usort($asMedias, function($a, $b){return $a['unix_time'] > $b['unix_time'];});
 
@@ -280,9 +282,9 @@ class Spot extends Main
 		$iIndex = 0;
 		$iMaxIndex = count($asMessages) - 1;
 		foreach($asMedias as $asMedia) {
-				while($iIndex <= $iMaxIndex && $asMedia['unix_time'] > $asMessages[$iIndex]['unix_time']) {
-					$iIndex++;
-				}
+			if($asMedia['latitude']!='' && $asMedia['longitude']!='') $asGeoMedias[] = $asMedia;
+			elseif($bHasMsg) {
+				while($iIndex <= $iMaxIndex && $asMedia['unix_time'] > $asMessages[$iIndex]['unix_time']) $iIndex++;
 
 				//All medias before first message or after last message are assigned to first/last message respectively
 				if($iIndex == 0) $iMsgIndex = $iIndex;
@@ -302,6 +304,7 @@ class Spot extends Main
 
 		$asResult = array(
 			'messages'		=> $asMessages,
+			'medias'		=> $asGeoMedias,
 			'maps'			=> $this->oMap->getProjectMaps($this->oProject->getProjectId()),
 			'last_update'	=> $asLastUpdate
 		);

masks/project.html

@@ -282,7 +282,7 @@ function initProject(sProjectCodeName, oFocusPost){
 	).done(function(aoMessages, aoTracks) {
 		var asData = aoMessages[0]['data'];
 		setMapLayers(asData['maps']);
-		initSpotMessages(asData['messages'], aoTracks[0]);
+		initSpotMessages(asData['messages'], aoTracks[0], asData['medias']);
 		updateSettingsPanel(asData['last_update']);
 	});
 
@@ -420,7 +420,7 @@ function setMapLayers(asLayers) {
 	});
 }
 
-function initSpotMessages(aoMessages, aoTracks) {
+function initSpotMessages(aoMessages, aoTracks, aoMedias) {
 	var bIsMobile = isMobile();
 
 	//Map
@@ -656,7 +656,10 @@ function initSpotMessages(aoMessages, aoTracks) {
 	}
 
 	//Add Spot messages
-	addSpotMessages(aoMessages);
+	addSpotMarkers(aoMessages);
+
+	//Add Medias
+	addMediaMarkers(aoMedias)
 
 	//Open tooltip on latest message in mobile mode
 	if(
@@ -672,7 +675,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 	*/
 }
 
-function addSpotMessages(aoMessages) {
+function addSpotMarkers(aoMessages) {
 	
 	//Spot Messages
 	var iWorkSpaceMinWidth = isMobile()?self.tmp('$Projects').width():(self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true));
@@ -689,7 +692,7 @@ function addSpotMessages(aoMessages) {
 		$Tooltip = $('<div>', {'class':'info-window'})
 			.append($('<h1>')
 				.addIcon('fa-message fa-lg', true)
-				.append($('<span>').text('Message '+oSpot.lang('counter', oMsg.displayed_id)))
+				.append($('<span>').text(oSpot.lang('post_message')+' '+oSpot.lang('counter', oMsg.displayed_id)))
 				.append($('<span>', {'class':'message-type'}).text('('+oMsg.type+')'))
 			)
 			.append($('<div>', {'class':'separator'}))
@@ -746,6 +749,74 @@ function addSpotMessages(aoMessages) {
 	});
 }
 
+function addMediaMarkers(aoMedias) {
+	var iWorkSpaceMinWidth = isMobile()?self.tmp('$Projects').width():(self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true));
+
+	$.each(aoMedias, function(iKey, oMedia){
+		var oMarker = L.marker(L.latLng(oMedia.latitude, oMedia.longitude), {
+			id: oMedia.id_media,
+			riseOnHover: true,
+			icon: getDivIcon(oMedia.subtype)
+		}).addTo(self.tmp('map'));
+
+		//Tooltip
+		$Tooltip = $('<div>', {'class':'info-window'})
+			.append($('<h1>')
+				.addIcon('fa-'+oMedia.subtype+' fa-lg', true)
+				.append($('<span>').text(oSpot.lang(oMedia.subtype)+' '+oSpot.lang('counter', oMedia.displayed_id || oMedia.id_media)))
+			)
+			.append($('<div>', {'class':'separator'}))
+			.append($('<p>', {'class':'time'})
+				.addIcon('fa-time fa-fw fa-lg', true)
+				.append(oMedia.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMedia.relative_time+')':'')));
+
+		//Tooltip: Time Zone
+		if(oMedia.formatted_time_local != oMedia.formatted_time) {
+			$Tooltip.append($('<p>', {'class':'timezone'})
+				.addIcon('fa-timezone fa-fw fa-lg', true)
+				.append(oSpot.lang('local_time', getRelativeTime(oMedia.formatted_time_local, oMedia.day_offset))));
+		}
+
+		//Tooltip: Altitude
+		if(oMedia.altitude) {
+			$Tooltip.append($('<p>', {'class':'altitude'})
+				.addIcon('fa-altitude fa-fw fa-lg', true)
+				.append(oMedia.altitude+'m'));
+		}
+
+		$Tooltip.data('medias', [oMedia]);
+		oSpot.tmp(['marker-media-tooltips', oMedia.id_media], $Tooltip);
+
+		oMarker.bindPopup(
+			function(e) {
+				let $Tooltip = oSpot.tmp(['marker-media-tooltips', e.options.id]);
+
+				$Tooltip.on('mouseout', function(){e.closePopup();});
+
+				//Tooltip: Medias: Set on the fly to avoid resource load
+				let oMedias = $Tooltip.data('medias');
+				let $Medias = $Tooltip.find('.medias');
+				if(oMedias && $Medias.length == 0) {
+					$Medias = $('<div>', {'class':'medias'});
+					$.each(oMedias, function(iKey, asMedia) {
+						$Medias.append(getMediaLink(asMedia, 'marker'));
+					});
+					$Tooltip.append($Medias);
+				}
+				return $Tooltip[0];
+			},
+			{
+				maxWidth: iWorkSpaceMinWidth,
+				autoPan: false,
+				closeOnClick: true,
+				offset: new L.Point(0, -30)
+			}
+		);
+
+		oMarker.on('mouseover', function(e) {this.openPopup();});
+	});
+}
+
 function toggleSoftPopup(e, sMode) {
 	switch(sMode) {
 		case 'open':
@@ -806,7 +877,7 @@ function checkNewFeed() {
 			self.tmp('$PostList').prepend($Posts.children());
 
 			//Markers
-			addSpotMessages(asData.messages);
+			addSpotMarkers(asData.messages);
 
 			//Message Last Update
 			updateSettingsPanel(asData.last_update);

readme.md

@@ -3,6 +3,7 @@
 ## Dependencies
 * php-mbstring
 * php-imagick
+* php-gd
 * php-mysql
 * php-exif
 * ffprobe & ffmpeg
@@ -27,4 +28,4 @@
 * Use WMTS servers directly when not using Geo Caching Server
 * Allow HEIF picture format
 * Vector tiles support (https://www.arcgis.com/home/item.html?id=7dc6cea0b1764a1f9af2e679f642f0f5) + Use of GL library. Use Mapbox GL JS / Maplibre GL JS / ESRI-Leaflet-vector?
-* Fix .MOV playback on firefox
+* Fix .MOV playback on windows firefox

style/_fa.scss

@@ -88,6 +88,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
 .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
+.#{$fa-css-prefix}-altitude:before { content: fa-content($fa-var-mountain); }
 .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
 .#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
 .#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }

style/leaflet/_leaflet.scss

@@ -60,6 +60,11 @@
 	padding: 0;
 	}
 
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
 .leaflet-container.leaflet-touch-zoom {
 	-ms-touch-action: pan-x pan-y;
 	touch-action: pan-x pan-y;