feature(navpoints): navpoint marked as TGT have a special icon. Styles reworked.

frontend/react/public/images/markers/navpoint-tgt.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <rect x="48" y="10" width="4" height="80" fill="white"/>
+    <rect x="10" y="48" width="80" height="4" fill="white"/>
+</svg>

frontend/react/public/images/markers/navpoint.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 10,190 190,190" fill="white" />
+</svg>

frontend/react/src/map/drawings/drawingsmanager.ts

@@ -460,7 +460,7 @@ export class DCSNavpoint extends DCSDrawing {
   constructor(drawingData, parent) {
     super(drawingData, parent);
 
-    this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment);
+    this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment, drawingData.tag);
 
     this.setVisibility(true);
   }

frontend/react/src/map/markers/navpointmarker.ts

@@ -1,14 +1,35 @@
 import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
 import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
 
 export class NavpointMarker extends CustomMarker {
   #callsignStr: string;
   #comment: string;
+  #tag: string;
 
-  constructor(latlng: LatLngExpression, callsignStr: string, comment?: string) {
+  constructor(latlng: LatLngExpression, callsignStr: string, comment: string, tag: string) {
     super(latlng, { interactive: false, draggable: false });
     this.#callsignStr = callsignStr;
     comment ? this.#comment = comment : null;
+    tag ? this.#tag = tag : null;
+  }
+
+  private getImage() {
+    switch (this.#tag) {
+      case 'TGT':
+        return 'images/markers/navpoint-tgt.svg'
+      default:
+        return 'images/markers/navpoint.svg'
+    }
+  }
+
+  private getSize() {
+    switch (this.#tag) {
+      case 'TGT':
+        return '20px'
+      default:
+        return '8px'
+    }
   }
 
   createIcon() {
@@ -16,7 +37,7 @@ export class NavpointMarker extends CustomMarker {
     let icon = new DivIcon({
       className: "leaflet-navpoint-icon",
       iconAnchor: [0, 0],
-      iconSize: [50, 50],
+      iconSize: [2, 2],
     });
     this.setIcon(icon);
 
@@ -26,6 +47,14 @@ export class NavpointMarker extends CustomMarker {
     // Main icon
     let pointIcon = document.createElement("div");
     pointIcon.classList.add("navpoint-icon");
+    var img = document.createElement("img");
+    img.src = this.getImage();
+    img.onload = () => {
+      SVGInjector(img);
+    };
+    img.style.width = this.getSize();
+    img.style.height = this.getSize();
+    pointIcon.appendChild(img);
     el.append(pointIcon);
 
     // Label

frontend/react/src/map/markers/stylesheets/navpoint.css

@@ -5,11 +5,7 @@
     gap: 10px;
 }
 .ol-navpoint-marker>.navpoint>.navpoint-icon {
-    height: 8px;
-    width: 8px;
-    background: white;
-    flex: none;
-    transform: rotate3d(0, 0, 1, 45deg);
+    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
 }
 
 .ol-navpoint-marker>.navpoint>.navpoint-main-label {
@@ -17,6 +13,8 @@
     flex-direction: column;
     font-size: 10px;
     color: white;
+    text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113);
+
 }
 
 .ol-navpoint-marker .navpoint-comment-box {
@@ -24,4 +22,6 @@
     font-style: italic;
     color: white;
     max-width: 50px;
+    text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113);
+
 }