leaflet icons

package-lock.json

@@ -7065,6 +7065,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
       "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
     },
+    "leaflet-defaulticon-compatibility": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
+      "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "font-awesome": "^4.7.0",
     "jquery": "3.4.1",
     "leaflet": "^1.6.0",
+    "leaflet-defaulticon-compatibility": "^0.1.1",
     "popper.js": "^1.16.1",
     "tslib": "^1.11.1",
     "whatwg-fetch": "^3.0.0"

src/domain/GpsLocationTypes.ts

+export class GpsLocationTypes {
+    public static location = "00000000-0000-0000-0000-000000000001";
+    public static wayPoint = "00000000-0000-0000-0000-000000000002";
+    public static checkPoint = "00000000-0000-0000-0000-000000000003";
+}

src/domain/IGpsLocation.ts

@@ -2,4 +2,8 @@ export interface IGpsLocation {
     id: string;
     latitude: number;
     longitude: number;
+    accuracy: number;
+    altitude: number;
+    verticalAccuracy: number;
+    gpsLocationTypeId: string;
 }

src/views/home/index.ts

+import { GpsLocationTypes } from './../../domain/GpsLocationTypes';
 import { IGpsLocation } from './../../domain/IGpsLocation';
 import { GpsLocationService } from './../../services/gpslocation-service';
 import { GpsSessionService } from './../../services/gpssession-service';
@@ -6,15 +7,10 @@ import { PLATFORM } from 'aurelia-pal';
 import { autoinject, LogManager, View, observable } from 'aurelia-framework';
 import { RouterConfiguration, Router, RouteConfig, NavigationInstruction } from 'aurelia-router';
 import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
-import * as L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-delete (L.Icon.Default.prototype as any)._getIconUrl;
-
-L.Icon.Default.mergeOptions({
-    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-    iconUrl: require('leaflet/dist/images/marker-icon.png'),
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-});
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; 
+import * as L from 'leaflet';
+import 'leaflet-defaulticon-compatibility';
 
 export const log = LogManager.getLogger('app.HomeIndex');
 
@@ -38,6 +34,9 @@ export class HomeIndex {
     created(owningView: View, myView: View): void {
         log.debug("created");
 
+
+
+
     }
 
     bind(bindingContext: Record<string, any>, overrideContext: Record<string, any>): void {
@@ -56,6 +55,10 @@ export class HomeIndex {
         ).addTo(this.map);
 
 
+
+
+        L.marker([59.3172968, 25.6579607]).addTo(this.map);
+
         this.gpsSessionService.getAll().then(
             response => {
                 if (response.data) {
@@ -118,13 +121,27 @@ export class HomeIndex {
     }
 
     visualizeSession(): void {
+
         const polylinePoints: L.LatLngExpression[] = [];
         this.gpsLocations.forEach(location => {
             polylinePoints.push([location.latitude, location.longitude]);
+
+            if (location.gpsLocationTypeId == GpsLocationTypes.wayPoint) {
+                log.debug('adding wp  to ', [location.latitude, location.longitude])
+                L.marker([location.latitude, location.longitude]).addTo(this.map);
+            } else
+                if (location.gpsLocationTypeId == GpsLocationTypes.checkPoint) {
+                    log.debug('adding cp to ', [location.latitude, location.longitude])
+                    L.marker([location.latitude, location.longitude]).addTo(this.map);
+                }
+
         });
 
-        const polyline = L.polyline(polylinePoints).addTo(this.map);
-        this.map.fitBounds(polyline.getBounds());
+        if (polylinePoints.length > 0) {
+            const polyline = L.polyline(polylinePoints).addTo(this.map);
+            this.map.fitBounds(polyline.getBounds());
+        }
+
     }
 }