Compare commits
2 commits
1c4cf0b8d4
...
058e0b6f0d
| Author | SHA1 | Date | |
|---|---|---|---|
| 058e0b6f0d | |||
| e288bf94f5 |
1 changed files with 109 additions and 204 deletions
|
|
@ -129,40 +129,39 @@ const OpenLayersMap = () => {
|
|||
|
||||
<style>
|
||||
{`
|
||||
/* Fix for black borders */
|
||||
body, html, #root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Map container fixes */
|
||||
.map-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Layer list improvements */
|
||||
.layer-item {
|
||||
padding: 8px 12px;
|
||||
margin: 2px 0;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
/* Fix for black borders */
|
||||
body, html, #root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Map container fixes */
|
||||
.map-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Layer list improvements */
|
||||
.layer-item {
|
||||
padding: 8px 12px;
|
||||
margin: 2px 0;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
|
@ -196,50 +195,21 @@ const OpenLayersMap = () => {
|
|||
/* Responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: absolute !important;
|
||||
width: 280px !important;
|
||||
left: ${sidebarOpen ? '0' : '-280px'};
|
||||
z-index: 1000;
|
||||
transition: left 0.3s ease;
|
||||
height: calc(100vh - 72px) !important;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: none !important;
|
||||
left: ${sidebarOpen ? '16px' : '-280px'};
|
||||
height: calc(100vh - 96px) !important;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
padding: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px !important;
|
||||
left: ${sidebarOpen ? '0' : '-260px'};
|
||||
}
|
||||
|
||||
.coordinate-display {
|
||||
bottom: 16px !important;
|
||||
left: 16px !important;
|
||||
right: 16px !important;
|
||||
width: auto !important;
|
||||
left: ${sidebarOpen ? '8px' : '-260px'};
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
|
@ -247,83 +217,42 @@ const OpenLayersMap = () => {
|
|||
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderBottom: '1px solid #e9ecef',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: 'none',
|
||||
boxShadow: 'none',
|
||||
padding: '0 32px',
|
||||
height: '72px',
|
||||
borderRadius: '60px',
|
||||
minHeight: '72px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
zIndex: 1000,
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px'
|
||||
}}>
|
||||
{/* Mobile menu button - hidden on desktop */}
|
||||
<button
|
||||
className="mobile-menu-btn"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
style={{
|
||||
display: 'none',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '20px',
|
||||
cursor: 'pointer',
|
||||
padding: '8px',
|
||||
color: '#2c3e50'
|
||||
}}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 4px 12px rgba(44, 62, 80, 0.15)'
|
||||
}}>
|
||||
<span style={{
|
||||
color: 'white',
|
||||
fontSize: '18px',
|
||||
fontWeight: '700'
|
||||
}}>M</span>
|
||||
</div>
|
||||
<span className="header-title" style={{
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
color: '#2c3e50',
|
||||
letterSpacing: '-0.5px'
|
||||
}}>
|
||||
MapExplorer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Navigation - hidden on mobile */}
|
||||
{/* Navigation - centered with white container */}
|
||||
<nav className="nav-buttons" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
gap: '8px',
|
||||
borderRadius: '60px',
|
||||
backgroundColor: '#ffffff',
|
||||
padding: '8px',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
|
||||
border: '1px solid #e9ecef'
|
||||
}}>
|
||||
{['Home', 'Map', 'About', 'Contact'].map((item, index) => (
|
||||
<button
|
||||
key={item}
|
||||
style={{
|
||||
padding: '12px 20px',
|
||||
backgroundColor: index === 1 ? '#2c3e50' : 'transparent',
|
||||
backgroundColor: index === 1 ? '#000000' : 'transparent',
|
||||
color: index === 1 ? 'white' : '#495057',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
fontSize: '14px',
|
||||
|
||||
borderRadius: '60px',
|
||||
fontWeight: '500',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
|
|
@ -334,62 +263,54 @@ const OpenLayersMap = () => {
|
|||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px'
|
||||
}}>
|
||||
<button style={{
|
||||
padding: '10px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
border: 'none',
|
||||
borderRadius: '10px',
|
||||
cursor: 'pointer',
|
||||
color: '#6c757d',
|
||||
fontSize: '16px',
|
||||
transition: 'all 0.3s ease',
|
||||
}}>
|
||||
🔔
|
||||
</button>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
background: 'linear-gradient(135deg, #6c757d 0%, #8b949e 100%)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 3px 8px rgba(108, 117, 125, 0.15)',
|
||||
}}>
|
||||
U
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
height: 'calc(100vh - 72px)',
|
||||
width: '100vw',
|
||||
overflow: 'hidden',
|
||||
position: 'relative'
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Sidebar with responsive behavior */}
|
||||
{/* Floating Sidebar */}
|
||||
<div className="sidebar custom-scrollbar" style={{
|
||||
position: 'absolute',
|
||||
top: '24px',
|
||||
left: '24px',
|
||||
bottom: '24px',
|
||||
width: '360px',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRight: '1px solid #e9ecef',
|
||||
padding: '24px',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
boxShadow: '4px 0 16px rgba(0,0,0,0.06)',
|
||||
flexShrink: 0
|
||||
boxShadow: '#000000 0px 4px 12px rgba(44, 62, 80, 0.1)',
|
||||
zIndex: 100,
|
||||
border: '1px solid rgba(0,0,0,0.08)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: sidebarOpen ? 'translateX(0)' : 'translateX(-400px)'
|
||||
}}>
|
||||
{/* Sidebar toggle button */}
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '-48px',
|
||||
top: '24px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundColor: '#ffffff',
|
||||
border: '1px solid #e9ecef',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
|
||||
zIndex: 101
|
||||
}}
|
||||
>
|
||||
{sidebarOpen ? '❮' : '❯'}
|
||||
</button>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -399,12 +320,11 @@ const OpenLayersMap = () => {
|
|||
<div style={{
|
||||
width: '8px',
|
||||
height: '32px',
|
||||
background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
|
||||
borderRadius: '4px'
|
||||
background: '#000000',
|
||||
}} />
|
||||
<h3 style={{
|
||||
margin: '0',
|
||||
color: '#2c3e50',
|
||||
color: '#000000',
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
letterSpacing: '-0.3px'
|
||||
|
|
@ -417,7 +337,6 @@ const OpenLayersMap = () => {
|
|||
<div className="search-container" style={{
|
||||
background: 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)',
|
||||
padding: '20px',
|
||||
borderRadius: '16px',
|
||||
marginBottom: '24px',
|
||||
border: '1px solid #e9ecef',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.04)'
|
||||
|
|
@ -432,9 +351,10 @@ const OpenLayersMap = () => {
|
|||
width: '100%',
|
||||
padding: '14px 16px',
|
||||
border: '1px solid #dee2e6',
|
||||
borderRadius: '12px',
|
||||
marginBottom: '12px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '60px',
|
||||
color: '#000000',
|
||||
fontFamily: "'Poppins', sans-serif",
|
||||
backgroundColor: 'white',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.04)',
|
||||
|
|
@ -448,11 +368,11 @@ const OpenLayersMap = () => {
|
|||
style={{
|
||||
width: '100%',
|
||||
padding: '14px',
|
||||
background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
|
||||
background: '#000000',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
borderRadius: '60px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
fontFamily: "'Poppins', sans-serif",
|
||||
|
|
@ -460,7 +380,7 @@ const OpenLayersMap = () => {
|
|||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
|
||||
}}
|
||||
>
|
||||
🔍 Search Location
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -475,7 +395,7 @@ const OpenLayersMap = () => {
|
|||
}}>
|
||||
<h4 style={{
|
||||
margin: '0',
|
||||
color: '#495057',
|
||||
color: '#000000',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
|
|
@ -483,10 +403,11 @@ const OpenLayersMap = () => {
|
|||
</h4>
|
||||
<span style={{
|
||||
background: 'linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%)',
|
||||
color: '#6c757d',
|
||||
color: '#000000',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '12px',
|
||||
fontSize: '12px',
|
||||
borderRadius: '60px',
|
||||
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
|
||||
}}>
|
||||
|
|
@ -504,8 +425,7 @@ const OpenLayersMap = () => {
|
|||
background: layerVisibility[layer.topic]
|
||||
? 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)'
|
||||
: 'white',
|
||||
border: `1px solid ${layerVisibility[layer.topic] ? '#2c3e50' : '#e9ecef'}`,
|
||||
borderRadius: '12px',
|
||||
border: `1px solid ${layerVisibility[layer.topic] ? '#000000' : '#e9ecef'}`,
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: layerVisibility[layer.topic]
|
||||
? '0 4px 8px rgba(44, 62, 80, 0.1)'
|
||||
|
|
@ -514,7 +434,7 @@ const OpenLayersMap = () => {
|
|||
}}>
|
||||
<span style={{
|
||||
fontSize: '14px',
|
||||
color: '#2c3e50',
|
||||
color: '#000000',
|
||||
flex: 1,
|
||||
marginRight: '12px',
|
||||
fontWeight: '500'
|
||||
|
|
@ -539,13 +459,13 @@ const OpenLayersMap = () => {
|
|||
position: 'absolute',
|
||||
cursor: 'pointer',
|
||||
top: 0,
|
||||
borderRadius: '60px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: layerVisibility[layer.topic]
|
||||
? 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)'
|
||||
: '#dee2e6',
|
||||
borderRadius: '26px',
|
||||
transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -554,12 +474,12 @@ const OpenLayersMap = () => {
|
|||
<span style={{
|
||||
position: 'absolute',
|
||||
content: '',
|
||||
borderRadius: '60px',
|
||||
height: '20px',
|
||||
width: '20px',
|
||||
left: layerVisibility[layer.topic] ? '25px' : '3px',
|
||||
bottom: '3px',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '50%',
|
||||
transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)'
|
||||
}} />
|
||||
|
|
@ -572,9 +492,9 @@ const OpenLayersMap = () => {
|
|||
fontSize: '12px',
|
||||
color: '#adb5bd',
|
||||
fontStyle: 'italic',
|
||||
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.05)'
|
||||
}}>
|
||||
Search first
|
||||
|
|
@ -587,31 +507,17 @@ const OpenLayersMap = () => {
|
|||
|
||||
{/* Map Container */}
|
||||
<div className="map-container" style={{
|
||||
flex: 1,
|
||||
position: 'relative',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: '#ffffff',
|
||||
zIndex: 1,
|
||||
}}>
|
||||
{/* Overlay for mobile when sidebar is open */}
|
||||
{isMobile && sidebarOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
zIndex: 999,
|
||||
transition: 'opacity 0.3s ease'
|
||||
}}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div ref={mapDivRef} style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '0',
|
||||
overflow: 'hidden'
|
||||
}} />
|
||||
|
||||
|
|
@ -621,10 +527,9 @@ const OpenLayersMap = () => {
|
|||
position: 'absolute',
|
||||
bottom: '24px',
|
||||
left: '24px',
|
||||
background: 'rgba(44, 62, 80, 0.9)',
|
||||
background: '#000000',
|
||||
color: 'white',
|
||||
padding: '12px 16px',
|
||||
borderRadius: '12px',
|
||||
fontSize: '13px',
|
||||
fontFamily: "'Poppins', monospace",
|
||||
fontWeight: '500',
|
||||
|
|
|
|||
Loading…
Reference in a new issue