From fc0c6b1b1f83325dc1a58418523a792907d9a712 Mon Sep 17 00:00:00 2001 From: lokeshramchand-ctrl Date: Wed, 25 Jun 2025 03:15:58 +0530 Subject: [PATCH 1/9] Refresh --- src/App.tsx | 7 +- src/components/UI/Dock.css | 56 ---- src/components/UI/Dock.tsx | 205 -------------- src/components/UI/Homepage/homepage.css | 270 +++++++++++++++++++ src/components/UI/Homepage/homepage.tsx | 65 +++++ src/components/{ => UI/Map}/OpenLayerMap.tsx | 6 +- src/components/UI/Map_page.css | 84 ------ src/components/UI/Map_page.tsx | 64 ----- 8 files changed, 340 insertions(+), 417 deletions(-) delete mode 100644 src/components/UI/Dock.css delete mode 100644 src/components/UI/Dock.tsx create mode 100644 src/components/UI/Homepage/homepage.css create mode 100644 src/components/UI/Homepage/homepage.tsx rename src/components/{ => UI/Map}/OpenLayerMap.tsx (97%) delete mode 100644 src/components/UI/Map_page.css delete mode 100644 src/components/UI/Map_page.tsx diff --git a/src/App.tsx b/src/App.tsx index 62a9ac8..c231777 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,7 @@ import './App.css' -import OpenLayerMap from './components/OpenLayerMap'; -import OpenLayerEsri from './components/OpenLayerEsri'; -import LegiScanAPI from './components/LegiScanAPI'; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import OpenLayerMap from './components/UI/Map/OpenLayerMap'; function App() { @@ -13,8 +11,7 @@ return ( } /> } /> - } /> - } /> + ); diff --git a/src/components/UI/Dock.css b/src/components/UI/Dock.css deleted file mode 100644 index d2c3bd7..0000000 --- a/src/components/UI/Dock.css +++ /dev/null @@ -1,56 +0,0 @@ -.dock-outer { - margin: 0 0.5rem; - display: flex; - max-width: 100%; - align-items: center; -} - -.dock-panel { - position: absolute; - bottom: 0.5rem; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: flex-end; - width: fit-content; - gap: 1rem; - border-radius: 1rem; - background-color: #060010; - border: 1px solid #222; - padding: 0 0.5rem 0.5rem; -} - -.dock-item { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 10px; - background-color: #060010; - border: 1px solid #222; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - cursor: pointer; - outline: none; -} - -.dock-icon { - display: flex; - align-items: center; - justify-content: center; -} - -.dock-label { - position: absolute; - top: -1.5rem; - left: 50%; - width: fit-content; - white-space: pre; - border-radius: 0.375rem; - border: 1px solid #222; - background-color: #060010; - padding: 0.125rem 0.5rem; - font-size: 0.75rem; - color: #fff; - transform: translateX(-50%); -} \ No newline at end of file diff --git a/src/components/UI/Dock.tsx b/src/components/UI/Dock.tsx deleted file mode 100644 index a16e807..0000000 --- a/src/components/UI/Dock.tsx +++ /dev/null @@ -1,205 +0,0 @@ -"use client"; -import "./Dock.css"; - -import { - motion, - MotionValue, - useMotionValue, - useSpring, - useTransform, - type SpringOptions, - AnimatePresence, -} from "framer-motion"; -import React, { - Children, - cloneElement, - useEffect, - useMemo, - useRef, - useState, -} from "react"; - - -export type DockItemData = { - icon: React.ReactNode; - label: React.ReactNode; - onClick: () => void; - className?: string; -}; - -export type DockProps = { - items: DockItemData[]; - className?: string; - distance?: number; - panelHeight?: number; - baseItemSize?: number; - dockHeight?: number; - magnification?: number; - spring?: SpringOptions; -}; - -type DockItemProps = { - className?: string; - children: React.ReactNode; - onClick?: () => void; - mouseX: MotionValue; - spring: SpringOptions; - distance: number; - baseItemSize: number; - magnification: number; -}; - -function DockItem({ - children, - className = "", - onClick, - mouseX, - spring, - distance, - magnification, - baseItemSize, -}: DockItemProps) { - const ref = useRef(null); - const isHovered = useMotionValue(0); - - const mouseDistance = useTransform(mouseX, (val) => { - const rect = ref.current?.getBoundingClientRect() ?? { - x: 0, - width: baseItemSize, - }; - return val - rect.x - baseItemSize / 2; - }); - - const targetSize = useTransform( - mouseDistance, - [-distance, 0, distance], - [baseItemSize, magnification, baseItemSize] - ); - const size = useSpring(targetSize, spring); - - return ( - isHovered.set(1)} - onHoverEnd={() => isHovered.set(0)} - onFocus={() => isHovered.set(1)} - onBlur={() => isHovered.set(0)} - onClick={onClick} - className={`dock-item ${className}`} - tabIndex={0} - role="button" - aria-haspopup="true" - > - {Children.map(children, (child) => - cloneElement(child as React.ReactElement, { }) - )} - - ); -} - -type DockLabelProps = { - className?: string; - children: React.ReactNode; -}; - -function DockLabel({ children, className = "", ...rest }: DockLabelProps) { - const { isHovered } = rest as { isHovered: MotionValue }; - const [isVisible, setIsVisible] = useState(false); - - useEffect(() => { - const unsubscribe = isHovered.on("change", (latest) => { - setIsVisible(latest === 1); - }); - return () => unsubscribe(); - }, [isHovered]); - - return ( - - {isVisible && ( - - {children} - - )} - - ); -} - -type DockIconProps = { - className?: string; - children: React.ReactNode; -}; - -function DockIcon({ children, className = "" }: DockIconProps) { - return
{children}
; -} - -export default function Dock({ - items, - className = "", - spring = { mass: 0.1, stiffness: 150, damping: 12 }, - magnification = 70, - distance = 200, - panelHeight = 68, - dockHeight = 256, - baseItemSize = 50, -}: DockProps) { - const mouseX = useMotionValue(Infinity); - const isHovered = useMotionValue(0); - - const maxHeight = useMemo( - () => Math.max(dockHeight, magnification + magnification / 2 + 4), - [magnification, dockHeight] - ); - const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]); - const height = useSpring(heightRow, spring); - - return ( - - { - isHovered.set(1); - mouseX.set(pageX); - }} - onMouseLeave={() => { - isHovered.set(0); - mouseX.set(Infinity); - }} - className={`dock-panel ${className}`} - style={{ height: panelHeight }} - role="toolbar" - aria-label="Application dock" - > - {items.map((item, index) => ( - - {item.icon} - {item.label} - - ))} - - - ); -} diff --git a/src/components/UI/Homepage/homepage.css b/src/components/UI/Homepage/homepage.css new file mode 100644 index 0000000..d585671 --- /dev/null +++ b/src/components/UI/Homepage/homepage.css @@ -0,0 +1,270 @@ +.homepage-container { + min-height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + overflow: hidden; + position: relative; + font-family: 'Arial', sans-serif; + } + + /* Particles Background */ + .particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + } + + .particle { + position: absolute; + width: 3px; + height: 3px; + background: rgba(255, 255, 255, 0.7); + border-radius: 50%; + top: 100%; + left: calc(var(--i, 0) * 7%); + animation: particleRise 6s ease-in-out infinite; + } + + .particle:nth-child(1) { left: 5%; } + .particle:nth-child(2) { left: 15%; } + .particle:nth-child(3) { left: 25%; } + .particle:nth-child(4) { left: 35%; } + .particle:nth-child(5) { left: 45%; } + .particle:nth-child(6) { left: 55%; } + .particle:nth-child(7) { left: 65%; } + .particle:nth-child(8) { left: 75%; } + .particle:nth-child(9) { left: 85%; } + .particle:nth-child(10) { left: 95%; } + .particle:nth-child(11) { left: 10%; } + .particle:nth-child(12) { left: 30%; } + .particle:nth-child(13) { left: 50%; } + .particle:nth-child(14) { left: 70%; } + .particle:nth-child(15) { left: 90%; } + + @keyframes particleRise { + 0% { + transform: translateY(0) scale(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + transform: translateY(-100vh) scale(1); + opacity: 0; + } + } + + /* Navigation Styles */ + .navigation { + display: flex; + justify-content: center; + gap: 2rem; + padding: 2rem 0; + position: relative; + z-index: 10; + } + + .nav-item { + color: white; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + padding: 0.8rem 1.5rem; + border-radius: 25px; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + transition: all 0.3s ease; + + /* Initial state for animation */ + transform: translateY(-50px); + opacity: 0; + + /* Animation */ + animation: slideInDown 0.6s ease-out forwards; + } + + .nav-item:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); + } + + .nav-item:active { + transform: translateY(-1px); + transition: all 0.1s ease; + } + + @keyframes slideInDown { + to { + transform: translateY(0); + opacity: 1; + } + } + + /* Hero Section */ + .hero-section { + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + position: relative; + z-index: 5; + } + + .hero-content { + transform: scale(0.8); + opacity: 0; + animation: scaleIn 1s ease-out 0.5s forwards; + } + + .hero-circle { + width: 250px; + height: 250px; + border-radius: 50%; + background: conic-gradient(from 0deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff, #ff006e); + display: flex; + justify-content: center; + align-items: center; + position: relative; + animation: rotate 8s linear infinite; + } + + .inner-circle { + width: 200px; + height: 200px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); + display: flex; + justify-content: center; + align-items: center; + border: 2px solid rgba(255, 255, 255, 0.3); + } + + .core { + width: 80px; + height: 80px; + border-radius: 50%; + background: radial-gradient(circle, #ffffff, #e0e0e0); + box-shadow: + inset 0 0 15px rgba(0, 0, 0, 0.1), + 0 0 30px rgba(255, 255, 255, 0.6); + animation: pulse 2.5s ease-in-out infinite alternate; + } + + @keyframes scaleIn { + to { + transform: scale(1); + opacity: 1; + } + } + + @keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + @keyframes pulse { + from { transform: scale(1); } + to { transform: scale(1.1); } + } + + /* Title Section */ + .title-section { + text-align: center; + position: relative; + z-index: 5; + margin-top: 2rem; + } + + .main-title { + font-size: 4rem; + font-weight: 900; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + } + + .title-word { + display: block; + background: linear-gradient(45deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientShift 4s ease-in-out infinite, slideInUp 0.8s ease-out forwards; + + /* Initial state */ + transform: translateY(50px); + opacity: 0; + } + + @keyframes slideInUp { + to { + transform: translateY(0); + opacity: 1; + } + } + + @keyframes gradientShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + } + + /* Responsive Design */ + @media (max-width: 768px) { + .navigation { + flex-wrap: wrap; + gap: 1rem; + padding: 1.5rem 1rem; + } + + .nav-item { + font-size: 1rem; + padding: 0.6rem 1.2rem; + } + + .hero-circle { + width: 180px; + height: 180px; + } + + .inner-circle { + width: 140px; + height: 140px; + } + + .core { + width: 60px; + height: 60px; + } + + .main-title { + font-size: 2.5rem; + } + } + + @media (max-width: 480px) { + .navigation { + gap: 0.5rem; + } + + .nav-item { + padding: 0.5rem 1rem; + font-size: 0.9rem; + } + + .main-title { + font-size: 2rem; + } + } \ No newline at end of file diff --git a/src/components/UI/Homepage/homepage.tsx b/src/components/UI/Homepage/homepage.tsx new file mode 100644 index 0000000..e8c12be --- /dev/null +++ b/src/components/UI/Homepage/homepage.tsx @@ -0,0 +1,65 @@ +import React, { useEffect, useRef } from 'react'; +import './Homepage.css'; + +const Homepage = () => { + const containerRef = useRef(null); + + useEffect(() => { + // Trigger animations after component mounts + if (containerRef.current) { + containerRef.current.classList.add('loaded'); + } + }, []); + + // Navigation handler + const handleNavClick = (section) => { + console.log(`Navigating to: ./components/${section.toLowerCase()}`); + }; + + return ( +
+ {/* Background Particles */} +
+ {[...Array(15)].map((_, i) => ( +
+ ))} +
+ + {/* Navigation */} + + + {/* Hero Section */} +
+
+
+
+
+
+
+
+
+ + {/* Title Section */} +
+

+ San Diego + Redefined +

+
+ +
+ ); +}; + +export default Homepage; \ No newline at end of file diff --git a/src/components/OpenLayerMap.tsx b/src/components/UI/Map/OpenLayerMap.tsx similarity index 97% rename from src/components/OpenLayerMap.tsx rename to src/components/UI/Map/OpenLayerMap.tsx index 94eea53..b8ec282 100644 --- a/src/components/OpenLayerMap.tsx +++ b/src/components/UI/Map/OpenLayerMap.tsx @@ -6,9 +6,9 @@ import { OSM } from 'ol/source'; import { fromLonLat } from 'ol/proj'; import { Coordinate } from 'ol/coordinate'; import VectorLayer from 'ol/layer/Vector'; -import { layerConfigs } from './Methods/Layers'; -import { loadAndRenderGeoJsonLayer } from './Methods/GeoJson_Load' -import { addMarker } from './Methods/Marker'; +import { layerConfigs } from '../../Methods/Layers'; +import { loadAndRenderGeoJsonLayer } from '../../Methods/GeoJson_Load' +import { addMarker } from '../../Methods/Marker'; const OpenLayersMap = () => { const [term, setTerm] = useState(''); diff --git a/src/components/UI/Map_page.css b/src/components/UI/Map_page.css deleted file mode 100644 index ac68790..0000000 --- a/src/components/UI/Map_page.css +++ /dev/null @@ -1,84 +0,0 @@ -/* Full height setup */ -html, body, #root { - margin: 0; - padding: 0; - height: 100%; - width: 100%; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background-color: #f0f2f5; -} - -/* Page container with space for navbar and sidebar */ -.container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - height: 100vh; - padding-top: 80px; /* Reserve space for a top bar */ - padding-left: 240px; /* Reserve space for a sidebar if needed */ - box-sizing: border-box; -} - -/* Card-like map container */ -.map-container { - width: 700px; - height: 700px; - background-color: white; - border-radius: 20px; - box-shadow: 0 10px 20px rgba(0,0,0,0.05); - border: 1px solid #e0e0e0; - overflow: hidden; - position: relative; -} - -/* The actual OpenLayers map inside the container */ -.map { - width: 700px; - height: 700px; - -} -.submit { - background: linear-gradient(135deg, #007AFF, #0051D5); /* iOS blue gradient */ - color: white; - padding: 12px 28px; - border: none; - border-radius: 12px; - font-size: 16px; - font-weight: 500; - cursor: pointer; - box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3); - transition: all 0.2s ease-in-out; - outline: none; -} - -.submit:hover { - background: linear-gradient(135deg, #005AE0, #0042B1); - transform: translateY(-2px); - box-shadow: 0 10px 18px rgba(0, 122, 255, 0.4); -} - -.submit:active { - transform: translateY(1px); - box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2); -} - -.input-field { - width: 80%; - padding: 12px 16px; - font-size: 16px; - border: 1px solid #d1d1d6; - border-radius: 12px; - outline: none; - margin-bottom: 20px; - background-color: #f9f9f9; - color: #333; - transition: border 0.2s, box-shadow 0.2s; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.input-field:focus { - border-color: #007AFF; - box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); - background-color: #fff; -} diff --git a/src/components/UI/Map_page.tsx b/src/components/UI/Map_page.tsx deleted file mode 100644 index 6741dd3..0000000 --- a/src/components/UI/Map_page.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useEffect, useRef } from 'react'; -import { Map, View } from 'ol'; -import TileLayer from 'ol/layer/Tile'; -import { OSM } from 'ol/source'; -import { fromLonLat } from 'ol/proj'; -import './Map_page.css'; -import Dock from './Dock'; -// ✅ Make sure these are imported from 'react-icons/vsc' -import { VscHome, VscArchive, VscAccount, VscSettingsGear } from 'react-icons/vsc'; - -const Map_page = () => { - const mapRef = useRef(null); - const mapDivRef = useRef(null); - - useEffect(() => { - if (!mapRef.current) { - const map = new Map({ - target: mapDivRef.current as HTMLDivElement, - layers: [new TileLayer({ source: new OSM() })], - view: new View({ - center: fromLonLat([-117.1611, 32.7157]), // Default to San Diego - zoom: 10, - }), - }); - mapRef.current = map; - } - }, []); - - const items = [ - { icon: , label: 'Home', onClick: () => alert('Home!') }, - { icon: , label: 'Archive', onClick: () => alert('Archive!') }, - { icon: , label: 'Profile', onClick: () => alert('Profile!') }, - { icon: , label: 'Settings', onClick: () => alert('Settings!') }, - ]; - - return ( - <> -
-
-
-
- -
- - -
- - -
- - ); -}; - -export default Map_page; -- 2.39.5 From 1c4cf0b8d4c599cde319d5d41ceac14bdb4ed646 Mon Sep 17 00:00:00 2001 From: lokeshramchand-ctrl Date: Wed, 25 Jun 2025 18:38:22 +0530 Subject: [PATCH 2/9] Fixed Viewport --- src/components/UI/Map/OpenLayerMap.css | 27 + src/components/UI/Map/OpenLayerMap.tsx | 677 +++++++++++++++++++------ 2 files changed, 552 insertions(+), 152 deletions(-) create mode 100644 src/components/UI/Map/OpenLayerMap.css diff --git a/src/components/UI/Map/OpenLayerMap.css b/src/components/UI/Map/OpenLayerMap.css new file mode 100644 index 0000000..ea0bacd --- /dev/null +++ b/src/components/UI/Map/OpenLayerMap.css @@ -0,0 +1,27 @@ +html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +#root { + width: 100%; + height: 100%; +} + +/* For your map container specifically */ +.map-container { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +/* Ensure OL map gets proper dimensions */ +.ol-viewport { + width: 100% !important; + height: 100% !important; +} \ No newline at end of file diff --git a/src/components/UI/Map/OpenLayerMap.tsx b/src/components/UI/Map/OpenLayerMap.tsx index b8ec282..f02c4ae 100644 --- a/src/components/UI/Map/OpenLayerMap.tsx +++ b/src/components/UI/Map/OpenLayerMap.tsx @@ -7,33 +7,42 @@ import { fromLonLat } from 'ol/proj'; import { Coordinate } from 'ol/coordinate'; import VectorLayer from 'ol/layer/Vector'; import { layerConfigs } from '../../Methods/Layers'; -import { loadAndRenderGeoJsonLayer } from '../../Methods/GeoJson_Load' +import { loadAndRenderGeoJsonLayer } from '../../Methods/GeoJson_Load'; import { addMarker } from '../../Methods/Marker'; const OpenLayersMap = () => { const [term, setTerm] = useState(''); - const [address, setAddress] = useState(); + const [address, setAddress] = useState(); const [layerVisibility, setLayerVisibility] = useState>({}); const [searchCompleted, setSearchCompleted] = useState(false); + const [sidebarOpen, setSidebarOpen] = useState(true); + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + + // Check for mobile view + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + if (window.innerWidth >= 768) { + setSidebarOpen(true); + } + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); // Submit Button Logic const submitForm = async (event: React.FormEvent) => { - // Preventing the page from reloading event.preventDefault(); const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`); const json = await response.json(); - console.log(json); setAddress(json); - console.log(address); setSearchCompleted(true); - - // Initialize all layers as visible + const initialVisibility = Object.fromEntries( layerConfigs.map(layer => [layer.topic, true]) ); setLayerVisibility(initialVisibility); - - alert(term); } const mapDivRef = useRef(null); @@ -50,11 +59,11 @@ const OpenLayersMap = () => { const toggleLayer = (layerTopic: string) => { const layerRef = layerRefs.current[layerTopic]; const isCurrentlyVisible = layerVisibility[layerTopic]; - + if (layerRef.current) { layerRef.current.setVisible(!isCurrentlyVisible); } - + setLayerVisibility(prev => ({ ...prev, [layerTopic]: !isCurrentlyVisible @@ -88,7 +97,7 @@ const OpenLayersMap = () => { })); markerLayerRef.current = addMarker(coords, mapRef.current!, markerLayerRef.current); - + layerConfigs.forEach((layerConfig) => { const url = layerConfig.getUrl(lon, lat, layerConfig.radius); const ref = layerRefs.current[layerConfig.topic]; @@ -102,171 +111,535 @@ const OpenLayersMap = () => { } }, [address]); - // UI return ( -
- {/* Sidebar */} -
+ {/* Google Fonts Link */} + + + + + {/* Header */} +
-

- Map Layers -

- - {/* Search Form */} -
- setTerm(e.target.value)} - type="text" - placeholder="Enter address to search" + {/* Mobile menu button - hidden on desktop */} + -
- {/* Layer Toggle List */} -
-

- Available Layers ({layerConfigs.length}) -

- - {layerConfigs.map((layer) => ( -
M +
+ + MapExplorer + +
+ + {/* Navigation - hidden on mobile */} + + +
+ +
+ U +
+
+
+ + {/* Main Content */} +
+ {/* Sidebar with responsive behavior */} +
+
+
+

+ Map Controls +

+
+ + {/* Search Form */} +
+
+ setTerm(e.target.value)} + type="text" + placeholder="Search for any location..." + style={{ + width: '100%', + padding: '14px 16px', + border: '1px solid #dee2e6', + borderRadius: '12px', + marginBottom: '12px', + fontSize: '14px', + fontFamily: "'Poppins', sans-serif", + backgroundColor: 'white', + boxShadow: '0 2px 4px rgba(0,0,0,0.04)', + transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', + boxSizing: 'border-box', + outline: 'none' + }} + /> + +
+
+ + {/* Layer Toggle List */} +
+
- - {formatLayerName(layer.topic)} + Data Layers + + + {layerConfigs.length} - - {searchCompleted && ( -
- - -
- - {/* Map Container */} -
-
- - {clickedCoordinate && ( -
- Coordinates: {clickedCoordinate[0].toFixed(2)} / {clickedCoordinate[1].toFixed(2)} + )} +
+ ))}
- )} +
+ + {/* Map Container */} +
+ {/* Overlay for mobile when sidebar is open */} + {isMobile && sidebarOpen && ( +
setSidebarOpen(false)} + /> + )} + +
+ + {/* Coordinate Display */} + {clickedCoordinate && ( +
+ 📍 Coordinates: {clickedCoordinate[0].toFixed(4)}, {clickedCoordinate[1].toFixed(4)} +
+ )} +
); -}; +} export default OpenLayersMap; \ No newline at end of file -- 2.39.5 From e288bf94f56904d56e8dd871897b267e46ddcec3 Mon Sep 17 00:00:00 2001 From: lokeshramchand-ctrl Date: Wed, 25 Jun 2025 22:51:12 +0530 Subject: [PATCH 3/9] Refresh --- src/components/UI/Map/OpenLayerMap.tsx | 277 +++++++++---------------- 1 file changed, 93 insertions(+), 184 deletions(-) diff --git a/src/components/UI/Map/OpenLayerMap.tsx b/src/components/UI/Map/OpenLayerMap.tsx index f02c4ae..57a1262 100644 --- a/src/components/UI/Map/OpenLayerMap.tsx +++ b/src/components/UI/Map/OpenLayerMap.tsx @@ -129,40 +129,39 @@ const OpenLayersMap = () => {