More svg injection, removing stringed html from code

client/src/missionhandler/airbase.ts

@@ -1,13 +1,14 @@
-import * as L from 'leaflet'
+import { DivIcon } from 'leaflet';
+import { CustomMarker } from '../map/custommarker';
+import { SVGInjector } from '@tanem/svg-injector';
 
 export interface AirbaseOptions
 {
     name: string,
-    position: L.LatLng,
-    src: string
+    position: L.LatLng
 }
 
-export class Airbase extends L.Marker 
+export class Airbase extends CustomMarker
 {
     #name: string = "";
     #coalition: string = "";
@@ -19,21 +20,30 @@ export class Airbase extends L.Marker
         super(options.position, { riseOnHover: true });
 
         this.#name = options.name;
-        var icon = new L.DivIcon({
-            html: ` <div class="airbase" data-object="airbase" data-coalition="neutral">
-                        <div class="airbase-marker"> </div>
-                    </div>`, 
+    }
+
+    createIcon() {
+        var icon = new DivIcon({ 
             className: 'leaflet-airbase-marker',
             iconSize: [40, 40],
             iconAnchor: [20, 20]
             });   // Set the marker, className must be set to avoid white square
         this.setIcon(icon); 
+
+        var el = document.createElement("div");
+        el.classList.add("airbase-icon");
+        el.setAttribute("data-object", "airbase");
+        var img = document.createElement("img");
+        img.src = "/resources/theme/images/markers/airbase.svg";
+        img.onload = () => SVGInjector(img);
+        el.appendChild(img);
+        this.getElement()?.appendChild(el);
     }
 
     setCoalition(coalition: string)
     {
         this.#coalition = coalition;
-        (<HTMLElement> this.getElement()?.querySelector(".airbase")).dataset.coalition = this.#coalition;
+        (<HTMLElement> this.getElement()?.querySelector(".airbase-icon")).dataset.coalition = this.#coalition;
     }
 
     getCoalition()

client/src/missionhandler/bullseye.ts

@@ -0,0 +1,36 @@
+import { DivIcon } from "leaflet";
+import { CustomMarker } from "../map/custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+
+export class Bullseye extends CustomMarker {
+    #coalition: string = "";
+
+    createIcon() {
+        var icon = new DivIcon({ 
+            className: 'leaflet-bullseye-marker',
+            iconSize: [40, 40],
+            iconAnchor: [20, 20]
+            });   // Set the marker, className must be set to avoid white square
+        this.setIcon(icon); 
+
+        var el = document.createElement("div");
+        el.classList.add("bullseye-icon");
+        el.setAttribute("data-object", "bullseye");
+        var img = document.createElement("img");
+        img.src = "/resources/theme/images/markers/bullseye.svg";
+        img.onload = () => SVGInjector(img);
+        el.appendChild(img);
+        this.getElement()?.appendChild(el);
+    }
+
+    setCoalition(coalition: string)
+    {
+        this.#coalition = coalition;
+        (<HTMLElement> this.getElement()?.querySelector(".bullseye-icon")).dataset.coalition = this.#coalition;
+    }
+
+    getCoalition()
+    {
+        return this.#coalition;
+    }
+}

client/src/missionhandler/missionhandler.ts

@@ -1,44 +1,58 @@
-import { Marker, LatLng, Icon } from "leaflet";
+import { LatLng } from "leaflet";
 import { getInfoPopup, getMap } from "..";
 import { Airbase } from "./airbase";
-
-var bullseyeIcons = [
-    new Icon({ iconUrl: 'images/bullseye0.png', iconAnchor: [30, 30]}),
-    new Icon({ iconUrl: 'images/bullseye1.png', iconAnchor: [30, 30]}),
-    new Icon({ iconUrl: 'images/bullseye2.png', iconAnchor: [30, 30]})
-]
+import { Bullseye } from "./bullseye";
 
 export class MissionHandler
 {
-    #bullseyes      : any; //TODO declare interface
-    #bullseyeMarkers: any;
-    #airbases       : any; //TODO declare interface
-    #airbasesMarkers: {[name: string]: Airbase};
+    #bullseyes      : {[name: string]: Bullseye} = {};        
+    #airbases       : {[name: string]: Airbase} = {};
     #theatre        : string = "";
 
     constructor()
     {
-        this.#bullseyes = undefined;
-        this.#bullseyeMarkers = [
-            new Marker([0, 0], {icon: bullseyeIcons[0]}).addTo(getMap()),
-            new Marker([0, 0], {icon: bullseyeIcons[1]}).addTo(getMap()),
-            new Marker([0, 0], {icon: bullseyeIcons[2]}).addTo(getMap())
-        ]
-        this.#airbasesMarkers = {};
+
     }
 
     update(data: BullseyesData | AirbasesData | any)
     {
         if ("bullseyes" in data)
         {
-            this.#bullseyes = data.bullseyes;
-            this.#drawBullseyes();
+            for (let idx in data.bullseyes)
+            {
+                const bullseye = data.bullseyes[idx];
+                if (!(idx in this.#bullseyes))
+                    this.#bullseyes[idx] = new Bullseye([0, 0]).addTo(getMap());
+                    
+                if (bullseye.latitude && bullseye.longitude && bullseye.coalition)
+                {
+                    this.#bullseyes[idx].setLatLng(new LatLng(bullseye.latitude, bullseye.longitude)); 
+                    this.#bullseyes[idx].setCoalition(bullseye.coalition);
+                }
+            }
         }
 
         if ("airbases" in data)
         {
-            this.#airbases = data.airbases;
-            this.#drawAirbases();
+            for (let idx in data.airbases)
+            {
+                var airbase = data.airbases[idx]
+                if (this.#airbases[idx] === undefined)
+                {
+                    this.#airbases[idx] = new Airbase({
+                        position: new LatLng(airbase.latitude, airbase.longitude), 
+                        name: airbase.callsign
+                    }).addTo(getMap());
+                    this.#airbases[idx].on('contextmenu', (e) => this.#onAirbaseClick(e));
+                }
+                if (airbase.latitude && airbase.longitude && airbase.coalition)
+                {
+                    this.#airbases[idx].setLatLng(new LatLng(airbase.latitude, airbase.longitude));
+                    this.#airbases[idx].setCoalition(airbase.coalition);
+                }
+                //this.#airbases[idx].setProperties(["Runway 1: 31L / 13R", "Runway 2: 31R / 13L", "TCN: 17X", "ILS: ---" ]);
+                //this.#airbases[idx].setParkings(["2x big", "5x small"]);
+            }
         }
 
         if ("mission" in data)
@@ -58,38 +72,6 @@ export class MissionHandler
         return this.#bullseyes;
     }
 
-    #drawBullseyes()
-    {
-        for (let idx in this.#bullseyes)
-        {
-            var bullseye = this.#bullseyes[idx];
-            this.#bullseyeMarkers[idx].setLatLng(new LatLng(bullseye.latitude, bullseye.longitude)); 
-        }
-    }
-
-    #drawAirbases()
-    {
-        for (let idx in this.#airbases)
-        {
-            var airbase = this.#airbases[idx]
-            if (this.#airbasesMarkers[idx] === undefined)
-            {
-                this.#airbasesMarkers[idx] = new Airbase({
-                    position: new LatLng(airbase.latitude, airbase.longitude), 
-                    name: airbase.callsign,
-                    src: "images/airbase.png"}).addTo(getMap());
-                this.#airbasesMarkers[idx].on('contextmenu', (e) => this.#onAirbaseClick(e));
-            }
-            else
-            {
-                this.#airbasesMarkers[idx].setLatLng(new LatLng(airbase.latitude, airbase.longitude));
-                this.#airbasesMarkers[idx].setCoalition(airbase.coalition);
-                //this.#airbasesMarkers[idx].setProperties(["Runway 1: 31L / 13R", "Runway 2: 31R / 13L", "TCN: 17X", "ILS: ---" ]);
-                //this.#airbasesMarkers[idx].setParkings(["2x big", "5x small"]);
-            }
-        }
-    }
-
     #onAirbaseClick(e: any)
     {
         getMap().showAirbaseContextMenu(e, e.sourceTarget);