Merge pull request #102 from Sybit-Education/feature/individual-pin-scaleing

feat:  individual scaling added to types

Author: flwflwflw

src/app/components/map/map.component.ts

@@ -25,11 +25,11 @@ export class MapComponent implements OnInit {
     map!: Map;
     vectorSource!: VectorSource;
 
-    iconSize = 0.15;
+  //iconSize = 0.15;
     center = [8.970869314606485, 47.73981783654207];
     userLocationFeature: Feature = new Feature();
 
-    @ViewChild('tooltip_map', {static: true}) tooltip!: ElementRef;
+  @ViewChild('tooltip_map', {static: true}) tooltip!: ElementRef;
 
     constructor(private router: Router, private airtableService: AirtableService, private geolocationService: GeolocationService) {}
 
@@ -74,7 +74,7 @@ export class MapComponent implements OnInit {
           scale: 0.05 // Größe des Pins
         })
       }));
-    
+
     this.vectorSource.addFeature(this.userLocationFeature);
     this.map.on('click', this.handleMapClick.bind(this));
     this.map.on('pointermove', this.handlePointerMove.bind(this));
@@ -91,7 +91,7 @@ export class MapComponent implements OnInit {
             image: new Icon({
               src: 'data:image/svg+xml;utf8,' + activity.type.svg,
               color: this.getColor(activity),
-              size: [this.iconSize, this.iconSize]
+              size: [activity.type.svg_scale, activity.type.svg_scale]
             })
           })
         });
@@ -104,7 +104,7 @@ export class MapComponent implements OnInit {
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
             color: this.getColor(activity),
-            scale: this.iconSize
+            scale: activity.type.svg_scale
           })
         }));
       });
@@ -141,7 +141,7 @@ export class MapComponent implements OnInit {
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
             color: this.getColor(activity),
-            scale: this.iconSize,
+            scale: activity.type.svg_scale
           })
         }));
       } 
@@ -157,7 +157,7 @@ export class MapComponent implements OnInit {
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
             color: this.getColor(activity),
-            scale: this.iconSize
+            scale: activity.type.svg_scale
           })
         }));
       });
@@ -175,10 +175,10 @@ export class MapComponent implements OnInit {
             console.log('Center: ', this.center);
             this.map.getView().setCenter(fromLonLat(this.center));
             const coordinates = fromLonLat(this.center);
-            this.userLocationFeature.setGeometry(new Point(coordinates));            
+            this.userLocationFeature.setGeometry(new Point(coordinates));
           })
           .catch(error => {
             console.error('Error getting location: ', error);
           });
-    }    
+    }
 }

src/app/services/airtable.service.ts

@@ -42,7 +42,8 @@ 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,
+                    svg_scale: record.fields["svg_scale"] as number
                 };
             });
         }),);

src/app/types/types.interface.ts

@@ -2,6 +2,6 @@ export interface TypesInterface {
     id?: string,
     name: string,
     color: string,
-    svg: string
-
+    svg: string,
+    svg_scale: number
 }