Added Marker for mission

apps/dispatch/app/(dispatch)/_components/map/BaseMaps.tsx

@@ -7,7 +7,11 @@ export const BaseMaps = () => {
 			<TileLayer
 				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-				className="invert-100"
+			/>
+			<TileLayer
+				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+				className="invert-100 grayscale"
 			/>
 		</>
 	);

apps/dispatch/app/(dispatch)/_components/map/Map.tsx

@@ -4,6 +4,7 @@ import { useMapStore } from "_store/mapStore";
 import { MapContainer } from "react-leaflet";
 import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
 import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
+import { MissionMarkers } from "(dispatch)/_components/map/MissionMarkers";
 
 export default ({}) => {
 	const { map } = useMapStore();
@@ -12,6 +13,7 @@ export default ({}) => {
 		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
 			<BaseMaps />
 			<ContextMenu />
+			<MissionMarkers />
 		</MapContainer>
 	);
 };

apps/dispatch/app/(dispatch)/_components/map/MissionMarkers.tsx

@@ -0,0 +1,72 @@
+import { MissionOptionalDefaults } from "@repo/db/zod";
+import { useMissionsStore } from "_store/missionsStore";
+import { Icon, Marker as LMarker } from "leaflet";
+import { House, Route } from "lucide-react";
+import { RefObject, useEffect, useRef, useState } from "react";
+import { Marker, Popup, useMap } from "react-leaflet";
+
+export const MissionMarker = ({
+	mission,
+}: {
+	mission: MissionOptionalDefaults;
+}) => {
+	const [zoom, setZoom] = useState(0);
+	const map = useMap();
+	const markerRef = useRef<LMarker<any>>(null);
+
+	useEffect(() => {
+		markerRef.current?.openPopup();
+
+		const handleZoom = () => {
+			setZoom(map.getZoom());
+		};
+		map.on("zoom", handleZoom);
+		return () => {
+			map.off("zoom", handleZoom);
+		};
+	}, [map]);
+
+	return (
+		<div>
+			<Marker
+				ref={markerRef}
+				position={[mission.addressLat, mission.addressLng]}
+				icon={
+					new Icon({
+						iconUrl: "/icons/MissionIcon.png",
+						iconSize: zoom < 8 ? [30, 30] : [50, 50],
+						popupAnchor: [0, 0],
+					})
+				}
+			>
+				<Popup>
+					<div className="absolute z-1000 opacity-100 pointer-events-auto w-[500px] text-white">
+						<div className="bg-amber-600 pt-2 flex gap-1">
+							<div className="p-2 bg-amber-700">
+								<House className="text-sm" />
+							</div>
+							<div className="p-2">
+								<Route />
+							</div>
+							<div className="bg-red-600 flex justify-center items-center text-2xl p-2">
+								{mission.missionCategory}
+							</div>
+						</div>
+					</div>
+				</Popup>
+			</Marker>
+		</div>
+	);
+};
+
+export const MissionMarkers = () => {
+	const { missions } = useMissionsStore();
+
+	return (
+		<>
+			{missions.map((mission) => (
+				<MissionMarker key={mission.id} mission={mission} />
+			))}
+		</>
+	);
+};