From 9e174abfcbe3aa0f6555760f046d5be10570fb54 Mon Sep 17 00:00:00 2001 From: RafaeloxMC <53903394+RafaeloxMC@users.noreply.github.com> Date: Thu, 1 Aug 2024 15:59:43 +0200 Subject: [PATCH 1/4] Buggy icons --- src/app/components/map/map.component.ts | 32 ++++++++++--------------- src/app/services/airtable.service.ts | 2 +- src/app/types/types.interface.ts | 3 ++- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 9874d4f..f2dde3e 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -6,7 +6,7 @@ import { Vector as VectorLayer } from 'ol/layer'; import { Vector as VectorSource } from 'ol/source'; import Feature from 'ol/Feature'; import { Point, Geometry } from 'ol/geom'; -import { Style, Circle, Fill, Stroke } from 'ol/style'; +import { Style, Icon } from 'ol/style'; import { fromLonLat } from 'ol/proj'; import { Router } from '@angular/router'; import { AirtableService } from '../../services/airtable.service'; @@ -65,20 +65,18 @@ export class MapComponent implements OnInit { this.airtableService.getActivityList().subscribe(activities => { activities.forEach(activity => { + const local = this.getBookmarked(activity.osm_id); + const color = local ? "gold" : "black" + const feature = new Feature({ geometry: new Point(fromLonLat([activity.longitude, activity.latitude])), activity: activity }); - const local = this.getBookmarked(activity.osm_id); - const borderSize = local ? 10.0 : 0.75 - const color = local ? "gold" : "black" - feature.setStyle(new Style({ - image: new Circle({ - radius: 8, - fill: new Fill({ color: activity.type.color }), - stroke: new Stroke({ color: color, width: borderSize }) + image: new Icon({ + src: 'data:image/svg+xml;utf8,' + activity.type.svg, + color: color }) })); @@ -107,17 +105,15 @@ export class MapComponent implements OnInit { const activity = (feature as Feature).get('activity'); if (activity) { const tooltipElement = this.tooltip.nativeElement; - const borderSize = this.getBookmarked(activity.osm_id) ? 5.0 : 0.75 const color = this.getBookmarked(activity.osm_id) ? "gold" : "black" tooltipElement.innerHTML = activity.name + ' (' + activity.type.name + (this.getBookmarked(activity.osm_id) ? " / favorisiert" : "") + ')'; tooltipElement.style.display = 'block'; tooltipElement.style.left = event.originalEvent.pageX + 'px'; tooltipElement.style.top = (event.originalEvent.pageY - 15) + 'px'; (feature as Feature).setStyle(new Style({ - image: new Circle({ - radius: 10, - fill: new Fill({ color: activity.type.color }), - stroke: new Stroke({ color: color, width: borderSize }) + image: new Icon({ + src: 'data:image/svg+xml;utf8,' + activity.type.svg, + color: color, }) })); } @@ -127,13 +123,11 @@ export class MapComponent implements OnInit { this.tooltip.nativeElement.style.display = 'none'; this.vectorSource.getFeatures().forEach((feature: Feature) => { const activity = feature.get('activity'); - const borderSize = this.getBookmarked(activity.osm_id) ? 5.0 : 0.75 const color = this.getBookmarked(activity.osm_id) ? "gold" : "black" feature.setStyle(new Style({ - image: new Circle({ - radius: 8, - fill: new Fill({ color: activity.type.color }), - stroke: new Stroke({ color: color, width: borderSize }) + image: new Icon({ + src: 'data:image/svg+xml;utf8,' + activity.type.icon, + color: color }) })); }); diff --git a/src/app/services/airtable.service.ts b/src/app/services/airtable.service.ts index 66577c9..a7e3208 100644 --- a/src/app/services/airtable.service.ts +++ b/src/app/services/airtable.service.ts @@ -42,7 +42,7 @@ export class AirtableService { id: record["id"] as string, name: record.fields["name"] as string, color: record.fields["color"] as string, - svg: record.fields["svg"] as string, + svg: record.fields["svg"] as string }; }); }),); diff --git a/src/app/types/types.interface.ts b/src/app/types/types.interface.ts index d683128..8134053 100644 --- a/src/app/types/types.interface.ts +++ b/src/app/types/types.interface.ts @@ -1,6 +1,7 @@ export interface TypesInterface { id?: string, name: string, - color: string + color: string, svg: string + } From c4474265593338059b92b43094b49991024602ba Mon Sep 17 00:00:00 2001 From: RafaeloxMC <53903394+RafaeloxMC@users.noreply.github.com> Date: Thu, 1 Aug 2024 18:28:08 +0200 Subject: [PATCH 2/4] Fix: disappearing bug, size TODO: fix: - black colored icons (even tho they shouldnt render like this) - transparent / invisible parts of svg are currently treated like there is nothing (means flickering when hovering over e.g. volleyball) --- src/app/components/map/map.component.ts | 83 ++++++++++++++----------- 1 file changed, 48 insertions(+), 35 deletions(-) diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index f2dde3e..b7fdbcd 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -11,7 +11,7 @@ import { fromLonLat } from 'ol/proj'; import { Router } from '@angular/router'; import { AirtableService } from '../../services/airtable.service'; import { MapBrowserEvent } from 'ol'; -import {NgStyle} from "@angular/common"; +import { NgStyle } from "@angular/common"; @Component({ selector: 'app-map', @@ -26,65 +26,72 @@ export class MapComponent implements OnInit { map!: Map; vectorSource!: VectorSource; + iconSize = 0.15; + @ViewChild('tooltip_map', { static: true }) tooltip!: ElementRef; constructor(private router: Router, private airtableService: AirtableService) {} - + getBookmarked(osm_id: number | null | undefined) { const item = localStorage.getItem("savedLocations") - if(item) { + if (item) { const savedLocations = JSON.parse(item) return savedLocations.includes(osm_id) } + return false; } - + ngOnInit(): void { this.vectorSource = new VectorSource(); const vectorLayer = new VectorLayer({ source: this.vectorSource }); - - this.map = new Map({ - target: 'map', - layers: [ - new TileLayer({ - source: new OSM() - }), - vectorLayer - ], - view: new View({ - center: fromLonLat([8.970869314606485, 47.73981783654207]), - zoom: 3, - minZoom: 12, - maxZoom: 25 - }) - }); - + + this.map = new Map({ + target: 'map', + layers: [ + new TileLayer({ + source: new OSM() + }), + vectorLayer + ], + view: new View({ + center: fromLonLat([8.970869314606485, 47.73981783654207]), + zoom: 3, + minZoom: 10, + maxZoom: 25 + }) + }); + this.map.on('click', this.handleMapClick.bind(this)); - this.map.on('pointermove', this.handlePointerMove.bind(this)); + this.map.on('pointermove', this.handlePointerMove.bind(this)); + + // INITIALIZE this.airtableService.getActivityList().subscribe(activities => { activities.forEach(activity => { const local = this.getBookmarked(activity.osm_id); - const color = local ? "gold" : "black" - + console.log(`Activity: ${activity.name}, Bookmarked: ${local}, Color: ${activity.type.color}`); + const color = local ? "gold" : activity.type.color; + const feature = new Feature({ geometry: new Point(fromLonLat([activity.longitude, activity.latitude])), activity: activity }); - + feature.setStyle(new Style({ image: new Icon({ src: 'data:image/svg+xml;utf8,' + activity.type.svg, - color: color + color: activity.type.color, + size: [this.iconSize, this.iconSize] }) })); - + this.vectorSource.addFeature(feature); }); }); - } + // eslint-disable-next-line @typescript-eslint/no-explicit-any handleMapClick(event: MapBrowserEvent) { this.map.forEachFeatureAtPixel(event.pixel, (feature) => { @@ -100,12 +107,14 @@ export class MapComponent implements OnInit { const pixel = this.map.getEventPixel(event.originalEvent); let featureFound = false; + // HOVER + this.map.forEachFeatureAtPixel(pixel, (feature) => { featureFound = true; const activity = (feature as Feature).get('activity'); if (activity) { const tooltipElement = this.tooltip.nativeElement; - const color = this.getBookmarked(activity.osm_id) ? "gold" : "black" + const color = this.getBookmarked(activity.osm_id) ? "gold" : activity.type.color; tooltipElement.innerHTML = activity.name + ' (' + activity.type.name + (this.getBookmarked(activity.osm_id) ? " / favorisiert" : "") + ')'; tooltipElement.style.display = 'block'; tooltipElement.style.left = event.originalEvent.pageX + 'px'; @@ -113,21 +122,25 @@ export class MapComponent implements OnInit { (feature as Feature).setStyle(new Style({ image: new Icon({ src: 'data:image/svg+xml;utf8,' + activity.type.svg, - color: color, + color: activity.type.color, + scale: this.iconSize, }) })); - } + } }); + // MOUSE MOVE NO HOVER + if (!featureFound) { this.tooltip.nativeElement.style.display = 'none'; this.vectorSource.getFeatures().forEach((feature: Feature) => { const activity = feature.get('activity'); - const color = this.getBookmarked(activity.osm_id) ? "gold" : "black" + const color = this.getBookmarked(activity.osm_id) ? "gold" : activity.type.color; feature.setStyle(new Style({ image: new Icon({ - src: 'data:image/svg+xml;utf8,' + activity.type.icon, - color: color + src: 'data:image/svg+xml;utf8,' + activity.type.svg, + color: activity.type.color, + scale: this.iconSize }) })); }); @@ -137,4 +150,4 @@ export class MapComponent implements OnInit { openDetailPage(activityId: string): void { this.router.navigate(['/activity-details', activityId]); } -} \ No newline at end of file +} From 8c9150a72364b3064acaf3ac5c1e65fd95a39d7c Mon Sep 17 00:00:00 2001 From: RafaeloxMC <53903394+RafaeloxMC@users.noreply.github.com> Date: Fri, 2 Aug 2024 09:47:18 +0200 Subject: [PATCH 3/4] Update map.component.ts --- src/app/components/map/map.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index e7bf1c1..9320021 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -1,5 +1,5 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {Map, MapBrowserEvent, View} from 'ol'; +import {Map, View} from 'ol'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {OSM, Vector as VectorSource} from 'ol/source'; import Feature from 'ol/Feature'; From b9e5b1f35ed7da1d441ac57bb87ae6aa425a19a0 Mon Sep 17 00:00:00 2001 From: RafaeloxMC <53903394+RafaeloxMC@users.noreply.github.com> Date: Fri, 2 Aug 2024 09:48:59 +0200 Subject: [PATCH 4/4] fix eslint --- src/app/components/map/map.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 9320021..62012e7 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -70,7 +70,6 @@ export class MapComponent implements OnInit { activities.forEach(activity => { const local = this.getBookmarked(activity.osm_id); console.log(`Activity: ${activity.name}, Bookmarked: ${local}, Color: ${activity.type.color}`); - const color = local ? "gold" : activity.type.color; const feature = new Feature({ geometry: new Point(fromLonLat([activity.longitude, activity.latitude])), @@ -112,7 +111,6 @@ export class MapComponent implements OnInit { const activity = (feature as Feature).get('activity'); if (activity) { const tooltipElement = this.tooltip.nativeElement; - const color = this.getBookmarked(activity.osm_id) ? "gold" : activity.type.color; tooltipElement.innerHTML = activity.name + ' (' + activity.type.name + (this.getBookmarked(activity.osm_id) ? " / favorisiert" : "") + ')'; tooltipElement.style.display = 'block'; tooltipElement.style.left = event.originalEvent.pageX + 'px'; @@ -133,7 +131,6 @@ export class MapComponent implements OnInit { this.tooltip.nativeElement.style.display = 'none'; this.vectorSource.getFeatures().forEach((feature: Feature) => { const activity = feature.get('activity'); - const color = this.getBookmarked(activity.osm_id) ? "gold" : activity.type.color; feature.setStyle(new Style({ image: new Icon({ src: 'data:image/svg+xml;utf8,' + activity.type.svg,