diff --git a/frontend/react/public/images/markers/navpoint-tgt.svg b/frontend/react/public/images/markers/navpoint-tgt.svg
new file mode 100644
index 00000000..7f7cd846
--- /dev/null
+++ b/frontend/react/public/images/markers/navpoint-tgt.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/frontend/react/public/images/markers/navpoint.svg b/frontend/react/public/images/markers/navpoint.svg
new file mode 100644
index 00000000..b9075e11
--- /dev/null
+++ b/frontend/react/public/images/markers/navpoint.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/frontend/react/src/map/drawings/drawingsmanager.ts b/frontend/react/src/map/drawings/drawingsmanager.ts
index 4210ca1a..ccb208a0 100644
--- a/frontend/react/src/map/drawings/drawingsmanager.ts
+++ b/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);
}
diff --git a/frontend/react/src/map/markers/navpointmarker.ts b/frontend/react/src/map/markers/navpointmarker.ts
index f7092794..2ffba311 100644
--- a/frontend/react/src/map/markers/navpointmarker.ts
+++ b/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
diff --git a/frontend/react/src/map/markers/stylesheets/navpoint.css b/frontend/react/src/map/markers/stylesheets/navpoint.css
index a3e30eb9..52cd8082 100644
--- a/frontend/react/src/map/markers/stylesheets/navpoint.css
+++ b/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);
+
}
\ No newline at end of file