fixed wrong env var, added base maps

apps/dispatch/app/_components/map/_components/createCustomMarker.tsx

@@ -0,0 +1,83 @@
+const getOperatorColor = (operator: string) => {
+	switch (operator) {
+		case "ADAC":
+		case "ÖAMTC":
+		case "ANWB":
+			return "#d5b500";
+		case "BMI":
+			return "#FF5900";
+		case "DRF":
+		case "ARA":
+		case "NHC":
+			return "#eb0000";
+		case "JLR":
+			return "#050073";
+		case "BUND":
+			return "#334811";
+		case "Rega":
+			return "#ED0000";
+		case "AAA":
+			return "#164070";
+		case "Air Zermatt":
+			return "#0094d4";
+		case "INAER":
+			return "#e96b22";
+		case "Heli Austria":
+			return "#009de2";
+		case "Air Glaciers":
+			return "#004680";
+		case "Wucher":
+			return "#F97514";
+		case "SHS":
+			return "#c50014";
+		case "Schenk Air":
+			return "black";
+		case "LAR":
+			return "#ED174F";
+		case "AAD":
+			return "#7F1B24";
+		default:
+			return "gray";
+	}
+};
+
+export const createCustomMarker = async (operator: string) => {
+	const canvas = document.createElement("canvas");
+	canvas.width = 30; // Breite des Markers
+	canvas.height = 30; // Höhe des Markers
+	const ctx = canvas.getContext("2d");
+
+	const color = getOperatorColor(operator);
+	if (ctx) {
+		// Erstelle den farbigen Kreis
+		ctx.fillStyle = color;
+		ctx.beginPath();
+		ctx.arc(15, 15, 10, 0, Math.PI * 2);
+		ctx.fill();
+
+		// Füge den weißen Rand hinzu
+		ctx.strokeStyle = ["ADAC", "ÖAMTC", "ANWB"].includes(operator) ? "black" : "white"; // Randfarbe
+		ctx.lineWidth = ["ADAC", "ÖAMTC", "ANWB"].includes(operator) ? 1 : 2; // Dicke des Randes
+		ctx.stroke(); // Zeichne den Rand
+
+		const img = new Image();
+		img.src = ["ADAC", "ÖAMTC", "ANWB"].includes(operator)
+			? "/icons/Station_Icon_black.svg"
+			: "/icons/Station_Icon.svg";
+
+		await new Promise<void>((resolve, reject) => {
+			img.onload = () => {
+				ctx.drawImage(img, 8, 8, 15, 15); // Draw icon on the canvas
+				resolve(); // Resolve the promise when the image loads
+			};
+
+			img.onerror = () => {
+				reject(new Error("Image failed to load.")); // Handle image load failure
+			};
+		});
+	} else {
+		console.error("Canvas context is not initialized.");
+	}
+
+	return canvas.toDataURL(); // Return the image data URL after the marker is created
+};