marker images

build/webpack.common.js

@@ -86,7 +86,9 @@ module.exports = {
 				}, */{
 					from: path.resolve(LIB, 'index.php'),
 					to: 'index.php'
-			}]
+				},
+				{ from: 'src/images/footprint_mapbox.png', to: 'images' }
+			],
 		}),
 		new SymlinkWebpackPlugin([
 			{ origin: '../files/', symlink: 'files' },

src/components/project.vue

@@ -77,7 +77,7 @@ export default {
 			if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
 		},
 		projectCodename(sNewCodeName, sOldCodeName) {
-			console.log('change in projectCodename: '+sNewCodeName);
+			//console.log('change in projectCodename: '+sNewCodeName);
 			//this.toggleSettingsPanel(false);
 			this.$parent.setHash(this.$parent.hash.page, [sNewCodeName]);
 			this.init();
@@ -224,7 +224,7 @@ export default {
 				});
 
 				//Markers
-				let aoMarkerSource = {type:'geojson', data:{type: 'FeatureCollection', features: []}};
+				let aoMarkerSource = {type:'geojson', data:{type: 'FeatureCollection', features:[]}};
 				for(const oMsg of this.messages) {
 					aoMarkerSource.data.features.push({
                         'type': 'Feature',
@@ -271,7 +271,7 @@ export default {
 					*/
 				}
 				this.map.addSource('markers', aoMarkerSource);
-				const image = await this.map.loadImage('https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png');
+				const image = await this.map.loadImage('images/footprint_mapbox.png');
 				this.map.addImage('markerIcon', image.data);
 				this.map.addLayer({
 					'id': 'markers',
@@ -293,15 +293,15 @@ export default {
 						.setLngLat(e.lngLat)
 						.addTo(this.map);
 
-					let rProp = ref(e.features[0].properties);
+					let rProp = ref(e.features[0].properties);console.log(rProp);
 					const vPopup = defineComponent({
 						extends: ProjectPopup,
 						setup: () => {
-							console.log(rProp.value);
+							//console.log(rProp.value.medias);
 							provide('options', rProp.value);
 							provide('spot', this.spot);
 							provide('project', this.project);
-							return {'options': rProp.value, 'spot':this.spot, 'project':this.project};
+							return {'options': rProp.value, 'medias': JSON.parse(rProp.value.medias || '""'), 'spot':this.spot, 'project':this.project};
 						}
 					});
 					nextTick(() => {

src/components/projectMediaLink.vue

@@ -43,7 +43,7 @@ export default {
 			class="clickable"
 		/>
 		<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
-		<span v-if="options.comment" class="comment">{{ options.comment }}</span>
+		<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
 	</a>
 	<div style="display:none">
 		<span ref="comment" class="lb-caption-line comment desktop" :title="options.comment">

src/components/projectPopup.vue

@@ -3,11 +3,13 @@ import { options } from 'lightbox2';
 import projectMapLink from './projectMapLink.vue';
 import spotIcon from './spotIcon.vue';
 import projectRelTime from './projectRelTime.vue';
+import projectMediaLink from './projectMediaLink.vue';
 
 export default {
 	components: {
 		spotIcon,
 		projectMapLink,
+		projectMediaLink,
 		projectRelTime
 	},
 	//props: {
@@ -17,7 +19,7 @@ export default {
 		return {
 		}
 	},
-	//inject: ['options', 'spot', 'project'],
+	//inject: ['options', 'medias', 'spot', 'project'],
 	mounted() {
 		
 	}
@@ -46,5 +48,8 @@ export default {
 		<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':spot.lang(options.weather_cond)">
 			<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
 		</p>
+		<p class="medias">
+			<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
+		</p>
 	</div>
 </template>