feat: Enhance map controls and overlay visibility in project map components

src/app/globals.css

@@ -92,5 +92,66 @@ body {
 
 /* Map controls positioning */
 .leaflet-control-container .leaflet-top.leaflet-right {
-	top: 80px !important; /* Account for floating header */
+	top: 10px !important; /* Position closer to top for project page */
+	right: 10px !important;
+}
+
+/* Style the layer control to make it prettier */
+.leaflet-control-layers {
+	border-radius: 6px !important;
+	border: 1px solid rgba(0, 0, 0, 0.1) !important;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+	background: rgba(255, 255, 255, 0.95) !important;
+	backdrop-filter: blur(8px) !important;
+	-webkit-backdrop-filter: blur(8px) !important;
+	font-family: inherit !important;
+	font-size: 13px !important;
+	min-width: 180px !important;
+	max-width: 220px !important;
+}
+
+.leaflet-control-layers-toggle {
+	background-color: #3b82f6 !important;
+	color: white !important;
+	border-radius: 4px !important;
+	width: 30px !important;
+	height: 30px !important;
+	border: none !important;
+	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
+	transition: all 0.2s ease !important;
+	font-size: 16px !important;
+	line-height: 1 !important;
+}
+
+.leaflet-control-layers-toggle:hover {
+	background-color: #2563eb !important;
+	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
+	transform: scale(1.05) !important;
+}
+
+.leaflet-control-layers-list {
+	border-radius: 4px !important;
+	padding: 6px !important;
+}
+
+.leaflet-control-layers-base label,
+.leaflet-control-layers-overlays label {
+	padding: 4px 8px !important;
+	border-radius: 3px !important;
+	margin: 1px 0 !important;
+	transition: background-color 0.2s ease !important;
+	cursor: pointer !important;
+	font-size: 12px !important;
+	line-height: 1.3 !important;
+}
+
+.leaflet-control-layers-base label:hover,
+.leaflet-control-layers-overlays label:hover {
+	background-color: rgba(59, 130, 246, 0.08) !important;
+}
+
+.leaflet-control-layers input[type="radio"],
+.leaflet-control-layers input[type="checkbox"] {
+	margin-right: 6px !important;
+	transform: scale(0.9) !important;
 }

src/app/projects/[id]/page.js

@@ -580,6 +580,7 @@ export default function ProjectViewPage() {
 								showLayerControl={true}
 								mapHeight="h-80"
 								defaultLayer="Polish Geoportal Orthophoto"
+								showOverlays={false}
 							/>
 						</CardContent>
 					</Card>

src/components/ui/LeafletMap.js

@@ -142,6 +142,7 @@ export default function EnhancedLeafletMap({
 	defaultLayer = "OpenStreetMap",
 	activeOverlays = [],
 	onViewChange,
+	showOverlays = true,
 }) {
 	useEffect(() => {
 		fixLeafletIcons();
@@ -175,7 +176,7 @@ export default function EnhancedLeafletMap({
 						</BaseLayer>
 					))}
 							{/* Overlay Layers */}
-					{mapLayers.overlays && mapLayers.overlays.map((layer, index) => (
+					{showOverlays && mapLayers.overlays && mapLayers.overlays.map((layer, index) => (
 						<Overlay
 							key={`overlay-${index}`}
 							checked={layer.checked}

src/components/ui/ProjectMap.js

@@ -20,6 +20,7 @@ export default function ProjectMap({
 	showLayerControl = true,
 	mapHeight = "h-64",
 	defaultLayer = "OpenStreetMap",
+	showOverlays = true,
 }) {
 	const [coords, setCoords] = useState(null);
 
@@ -101,7 +102,7 @@ export default function ProjectMap({
 				)}
 			</div>
 			<div
-				className={`w-full ${mapHeight} rounded-lg overflow-hidden border border-gray-200`}
+				className={`w-full ${mapHeight} rounded-lg border border-gray-200`}
 			>
 				<DynamicMap
 					center={[coords.lat, coords.lng]}
@@ -155,6 +156,7 @@ export default function ProjectMap({
 					]}
 					showLayerControl={showLayerControl}
 					defaultLayer={defaultLayer}
+					showOverlays={showOverlays}
 				/>
 			</div>
 			<div className="flex items-center justify-between">