Add track on project

lib/Project.php

@@ -144,13 +144,17 @@ class Project extends PhpObject {
 
 			if($sCodeName != '' && !Converter::isGeoJsonValid($sCodeName)) Converter::convertToGeoJson($sCodeName);
 
-			$asProject['geofilepath'] = Spot::addTimestampToFilePath(GeoJson::getDistFilePath($sCodeName));
+			//$asProject['geofilepath'] = Spot::addTimestampToFilePath(GeoJson::getDistFilePath($sCodeName));
 			$asProject['gpxfilepath'] = Spot::addTimestampToFilePath(Gpx::getDistFilePath($sCodeName));
 			$asProject['codename'] = $sCodeName;
 		}
 		return $bSpecificProj?$asProject:$asProjects;
 	}
 
+	public function getGeoJson() {
+		return json_decode(file_get_contents(GeoJson::getDistFilePath($this->sCodeName)), true);
+	}
+
 	public function getProject() {
 		return $this->getProjects($this->getProjectId());
 	}

lib/Spot.php

@@ -205,6 +205,10 @@ class Spot extends Main
 		$this->oProject->setProjectId($iProjectId);
 	}
 
+	public function getProjectGeoJson() {
+		return self::getJsonResult(true, '', $this->oProject->getGeoJson());
+	}
+
 	public function updateProject() {
 		$bNewMsg = false;
 		$bSuccess = true;

lib/index.php

@@ -39,6 +39,9 @@ if($sAction!='')
 		case 'markers':
 			$sResult = $oSpot->getMarkers();
 			break;
+		case 'geojson':
+			$sResult = $oSpot->getProjectGeoJson();
+			break;
 		case 'next_feed':
 			$sResult = $oSpot->getNextFeed($iId);
 			break;

src/components/project.vue

@@ -1,6 +1,6 @@
 <script>
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map, NavigationControl, Marker } from 'maplibre-gl';
+import { Map, NavigationControl, Marker, LngLatBounds } from 'maplibre-gl';
 
 import simplebar from 'simplebar-vue';
 
@@ -39,8 +39,12 @@ export default {
 			user: {name:'', email:''},
 			baseMaps: {},
 			baseMap: null,
-			map: {},
-			hikeTypes: ['main', 'off-track', 'hitchhiking']
+			messages: null,
+			map: null,
+			hikes: {
+				colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
+				width: 4
+			}
 		};
 	},
 	computed: {
@@ -155,6 +159,7 @@ export default {
 			//Get Map Info
 			const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
 			this.baseMaps = aoMarkers.maps;
+			this.messages = aoMarkers.messages;
 
 			//Base maps (raster tiles)
 			let asSources = {};
@@ -176,6 +181,7 @@ export default {
 			}
 
 			//Map
+			if(this.map) this.map.remove();
 			this.map = new Map({
 				container: 'map',
 				style: {
@@ -183,19 +189,68 @@ export default {
 					sources: asSources,
 					layers: asLayers
 				},
-				center: [-122.45427081556572, 42.17865477384241],
-				zoom: 5,
 				attributionControl: false
 			});
 
-			new Marker()
-				.setLngLat([-122.45427081556572, 42.17865477384241])
-				.addTo(this.map);
+			this.map.once('load', async () => {
+				//Track
+				const oTrack = await this.spot.get2('geojson', {id_project: this.project.id});
+				this.map.addSource('track', {
+					'type': 'geojson',
+					'data': oTrack
+				});
+
+				//Color mapping
+				let asColorMapping = ['match', ['get', 'type']];
+				for(const sHikeType in this.hikes.colors) {
+					asColorMapping.push(sHikeType);
+					asColorMapping.push(this.hikes.colors[sHikeType]);
+				}
+				asColorMapping.push('black'); //fallback value
+
+				//Track layer
+				this.map.addLayer({
+					'id': 'track',
+					'type': 'line',
+					'source': 'track',
+					'layout': {
+						'line-join': 'round',
+						'line-cap': 'round'
+					},
+					'paint': {
+						'line-color': asColorMapping,
+						'line-width': this.hikes.width
+					}
+				});
+
+				//Centering map
+				let oBounds = new LngLatBounds();
+				if(
+					this.project.mode == this.spot.consts.modes.blog && 
+					this.messages.length > 0 &&
+					this.$parent.hash.items[2] != 'message'
+				) {
+					//Fit to last message
+					let oLastMsg = this.messages[this.messages.length - 1];
+					oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
+				}
+				else {
+					//Fit to track
+					for(const iFeatureId in oTrack.features) {
+						oBounds = oTrack.features[iFeatureId].geometry.coordinates.reduce(
+							(bounds, coord) => {
+								return bounds.extend(coord);
+							},
+							oBounds
+						);
+					}
+				}
+				await this.map.fitBounds(oBounds, {padding: 20, animate: false});
 
 				//Toggle only when map is ready, for the tilt effet
 				this.toggleFeedPanel(!this.mobile);
 
-			this.map.once('load', () => {
+				//Default Basemap
 				this.baseMap = this.baseMaps.filter((asBM)=>asBM.default_map)[0].codename;
 			});
 
@@ -399,8 +454,8 @@ export default {
 				<SpotIcon :icon="settingsPanelOpen?'prev':'menu'" />
 			</div>
 			<div v-if="!mobile" id="legend" class="map-control settings-control map-control-bottom">
-				<div v-for="hikeType in hikeTypes" class="track">
-					<span :class="'line '+hikeType"></span>
+				<div v-for="(color, hikeType) in hikes.colors" class="track">
+					<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
 					<span class="desc">{{ spot.lang('track_'+hikeType) }}</span>
 				</div>
 			</div>

src/styles/_page.project.panel.scss

@@ -160,20 +160,9 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
 			white-space: nowrap;
 			.line {
 				width: 2em;
-				height: 4px;
 				display: inline-block;
 				border-radius: 2px;
 				vertical-align: middle;
-
-				&.main {
-					background-color: $track-main-color;
-				}
-				&.off-track {
-					background-color: $track-off-track-color;
-				}
-				&.hitchhiking {
-					background-color: $track-hitchhiking-color;
-				}
 			}
 
 			.desc {

src/styles/_page.project.scss

@@ -21,9 +21,6 @@ $title-color: $post-color;
 $subtitle-color: #999;
 
 //Legend colors
-$track-main-color: #00ff78;
-$track-off-track-color: #0000ff;
-$track-hitchhiking-color: #FF7814;
 $legend-color: $post-color;
 
 @import 'page.project.map';
@@ -77,7 +74,7 @@ $legend-color: $post-color;
 			top: 1px;
 		}
 		.fa-track-end {
-			color: $track-hitchhiking-color;
+			color: #FF7814;
 		}
 	}
 }