diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index fabc3105..9c40b7f1 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -1031,13 +1031,41 @@ nav.ol-panel> :last-child {
}
.ol-target-icon {
- background-image: url("/resources/theme/images/markers/target.svg");
height: 52px;
pointer-events: none;
width: 52px;
z-index: 9999;
}
+.ol-smoke-icon {
+ background-image: url("/resources/theme/images/markers/smoke.svg");
+ height: 52px;
+ pointer-events: none;
+ width: 52px;
+ z-index: 9999;
+ opacity: 0.8;
+}
+
+.ol-smoke-icon[data-color="white"] {
+ fill: white;
+}
+
+.ol-smoke-icon[data-color="blue"] {
+ fill: blue;
+}
+
+.ol-smoke-icon[data-color="red"] {
+ fill: red;
+}
+
+.ol-smoke-icon[data-color="green"] {
+ fill: green;
+}
+
+.ol-smoke-icon[data-color="orange"] {
+ fill: orange;
+}
+
.ol-draw-icon {
background-image: url("/resources/theme/images/markers/draw.svg");
height: 24px;
diff --git a/client/public/themes/olympus/images/markers/smoke.svg b/client/public/themes/olympus/images/markers/smoke.svg
new file mode 100644
index 00000000..4c058371
--- /dev/null
+++ b/client/public/themes/olympus/images/markers/smoke.svg
@@ -0,0 +1,133 @@
+
+
+
+
diff --git a/client/public/themes/olympus/images/markers/target - Copy.svg b/client/public/themes/olympus/images/markers/target - Copy.svg
new file mode 100644
index 00000000..7afbf612
--- /dev/null
+++ b/client/public/themes/olympus/images/markers/target - Copy.svg
@@ -0,0 +1,101 @@
+
+
+
+
diff --git a/client/public/themes/olympus/images/markers/temporary-icon.png b/client/public/themes/olympus/images/markers/temporary-icon.png
deleted file mode 100644
index 712221a0..00000000
Binary files a/client/public/themes/olympus/images/markers/temporary-icon.png and /dev/null differ
diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts
index 1d51952c..1dd906ad 100644
--- a/client/src/controls/mapcontextmenu.ts
+++ b/client/src/controls/mapcontextmenu.ts
@@ -12,6 +12,7 @@ import { ftToM } from "../other/utils";
import { GAME_MASTER } from "../constants/constants";
import { navyUnitDatabase } from "../unit/navyunitdatabase";
import { CoalitionArea } from "../map/coalitionarea";
+import { SmokeMarker } from "../map/smokemarker";
export class MapContextMenu extends ContextMenu {
#coalitionSwitch: Switch;
@@ -158,6 +159,8 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeploySmoke", (e: any) => {
this.hide();
spawnSmoke(e.detail.color, this.getLatLng());
+ var marker = new SmokeMarker(this.getLatLng(), e.detail.color);
+ marker.addTo(getMap());
});
document.addEventListener("contextMenuExplosion", (e: any) => {
diff --git a/client/src/map/smokemarker.ts b/client/src/map/smokemarker.ts
new file mode 100644
index 00000000..678912c2
--- /dev/null
+++ b/client/src/map/smokemarker.ts
@@ -0,0 +1,31 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+import { getMap } from "..";
+
+export class SmokeMarker extends CustomMarker {
+ #color: string;
+
+ constructor(latlng: LatLngExpression, color: string, options?: MarkerOptions) {
+ super(latlng, options);
+ this.setZIndexOffset(9999);
+ this.#color = color;
+ window.setTimeout(() => { this.removeFrom(getMap()); }, 300000) /* Remove the smoke after 5 minutes */
+ }
+
+ createIcon() {
+ this.setIcon(new DivIcon({
+ iconSize: [52, 52],
+ iconAnchor: [26, 52],
+ className: "leaflet-smoke-marker",
+ }));
+ var el = document.createElement("div");
+ el.classList.add("ol-smoke-icon");
+ el.setAttribute("data-color", this.#color);
+ var img = document.createElement("img");
+ img.src = "/resources/theme/images/markers/smoke.svg";
+ img.onload = () => SVGInjector(img);
+ el.appendChild(img);
+ this.getElement()?.appendChild(el);
+ }
+}