fixed marker first overlapping when rendered

apps/dispatch/app/_components/SmartPopup.tsx

@@ -2,7 +2,7 @@ import { cn } from "helpers/cn";
 import { RefAttributes, useEffect, useImperativeHandle } from "react";
 import { createContext, Ref, useContext, useState } from "react";
 import { Popup, PopupProps, useMap } from "react-leaflet";
-import { Popup as LPopup } from "leaflet";
+import { Popup as LPopup, popup } from "leaflet";
 
 const PopupContext = createContext({
 	anchor: "topleft",
@@ -97,6 +97,7 @@ export const SmartPopup = (
 			wrapperClassName?: string;
 		},
 ) => {
+	const [showContent, setShowContent] = useState(false);
 	const { smartPopupRef, id, className, wrapperClassName } = props;
 
 	const [anchor, setAnchor] = useState<
@@ -115,7 +116,10 @@ export const SmartPopup = (
 	const map = useMap();
 
 	useEffect(() => {
-		setTimeout(handleConflict, 50);
+		setTimeout(() => {
+			handleConflict();
+			setShowContent(true);
+		}, 50); // wait for marker to be positioned by leaflet, then check for conflicts, for now no better solution
 		map.on("zoom", handleConflict);
 
 		return () => {
@@ -124,12 +128,13 @@ export const SmartPopup = (
 	}, [map, anchor]);
 
 	return (
-		<Popup {...props} className={cn("relative", wrapperClassName)}>
+		<Popup {...props} className={cn("relative", wrapperClassName)} interactive>
 			<div
 				className={cn(
 					"pointer-events-auto bg-base-100 relative",
 					anchor.includes("right") && "-translate-x-full",
 					anchor.includes("bottom") && "-translate-y-full",
+					!showContent && "opacity-0 pointer-events-none",
 					className,
 				)}
 			>

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

@@ -12,7 +12,12 @@ export default ({}) => {
 	const { map } = useMapStore();
 
 	return (
-		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
+		<MapContainer
+			className="flex-1"
+			center={map.center}
+			zoom={map.zoom}
+			fadeAnimation={false}
+		>
 			<BaseMaps />
 			<SearchElements />
 			<ContextMenu />

apps/dispatch/app/globals.css

@@ -8,10 +8,6 @@
 	--color-rescuetrack-highlight: #ff4500;
 }
 
-.leaflet-fade-anim .leaflet-popup {
-	transition: opacity 0s !important;
-}
-
 .leaflet-popup-tip-container {
 	display: none;
 }