diff --git a/src/app/globals.css b/src/app/globals.css index cfa705c..9a55f8d 100644 --- a/src/app/globals.css +++ b/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; } diff --git a/src/app/projects/[id]/page.js b/src/app/projects/[id]/page.js index e63ae86..55eab90 100644 --- a/src/app/projects/[id]/page.js +++ b/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} /> diff --git a/src/components/ui/LeafletMap.js b/src/components/ui/LeafletMap.js index f3981e2..917476f 100644 --- a/src/components/ui/LeafletMap.js +++ b/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({ ))} {/* Overlay Layers */} - {mapLayers.overlays && mapLayers.overlays.map((layer, index) => ( + {showOverlays && mapLayers.overlays && mapLayers.overlays.map((layer, index) => (