design.estate/dees-catalog-geo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-05 16:50:51 +00:00
parent 32454a7d19
commit 54999a52b7
6 changed files with 275 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@@ -1,5 +1,14 @@
# Changelog # Changelog
## 2026-02-05 - 1.3.0 - feat(dees-geo-map)
Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation
- Replace hard-coded colors with cssManager.bdTheme(...) across component styles to enable automatic light/dark theming
- When mapStyle is 'osm', switch between CartoDB Voyager (light) and CartoDB Dark Matter (dark) vector basemaps
- Subscribe to domtools.themeManager.themeObservable to update the map style at runtime and unsubscribe on disconnectedCallback
- Add a traffic-aware routing toggle in the navigation panel and expose callbacks (onTrafficToggle, getTrafficEnabled) to wire UI state to the trafficController
- Integrate traffic toggle state into navigation controller callbacks and simplify traffic controller render usage
## 2026-02-05 - 1.2.0 - feat(map) ## 2026-02-05 - 1.2.0 - feat(map)
Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction

20
readme.hints.md
View File

@@ -260,6 +260,26 @@ The component uses a CSS Grid layout with sidebars that **push** the map (not ov
- `z-index: 10` - Header toolbar - `z-index: 10` - Header toolbar
- `z-index: 5` - Map overlays (traffic legend, feature count) - `z-index: 5` - Map overlays (traffic legend, feature count)
### Dark/Light Theme Support
The component fully supports automatic dark/light theme switching:
**UI Elements Theming:**
- All UI elements (toolbar, panels, search, navigation) use `cssManager.bdTheme()` for automatic color switching
- Pattern: `cssManager.bdTheme('lightValue', 'darkValue')` - first arg is light theme, second is dark
**Map Tiles Theming:**
- When `mapStyle="osm"` (default), the map automatically switches between:
- **Light theme**: CartoDB Voyager GL (vector tiles) - clean, detailed style
- **Dark theme**: CartoDB Dark Matter GL (vector tiles) - sleek dark style
- Theme changes are detected via `domtools.themeManager.themeObservable`
- No API key required for CartoDB basemaps
**Semantic Colors (unchanged by theme):**
- Navigation markers: Green (#22c55e) for start, Red (#ef4444) for end
- Route line: Blue (#3b82f6) with dark outline (#1e40af)
- Traffic congestion: Green → Yellow → Orange → Red → Dark Red (universal traffic colors)
### Shadow DOM & Terra-Draw Drawing Fix ### Shadow DOM & Terra-Draw Drawing Fix
Terra-draw's event listeners normally intercept map events through MapLibre's canvas element. In Shadow DOM contexts, these events are scoped locally and don't propagate correctly, causing terra-draw handlers to fail while MapLibre's drag handlers continue working. Terra-draw's event listeners normally intercept map events through MapLibre's canvas element. In Shadow DOM contexts, these events are scoped locally and don't propagate correctly, causing terra-draw handlers to fail while MapLibre's drag handlers continue working.

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog-geo', name: '@design.estate/dees-catalog-geo',
version: '1.2.0', version: '1.3.0',
description: 'A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools' description: 'A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools'
} }

265
ts_web/elements/00componentstyles.ts
View File

@@ -1,4 +1,4 @@
import { css } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
/** /**
* Shared component styles for geo components * Shared component styles for geo components
@@ -103,8 +103,8 @@ export const toolbarStyles = css`
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
padding: 8px; padding: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -120,7 +120,7 @@ export const toolbarStyles = css`
.toolbar-divider { .toolbar-divider {
height: 1px; height: 1px;
margin: 4px 0; margin: 4px 0;
background: var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.tool-button { .tool-button {
@@ -133,13 +133,13 @@ export const toolbarStyles = css`
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.tool-button:hover { .tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
} }
.tool-button.active { .tool-button.active {
@@ -170,8 +170,8 @@ export const searchStyles = css`
.search-input-wrapper { .search-input-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -187,7 +187,7 @@ export const searchStyles = css`
justify-content: center; justify-content: center;
width: 36px; width: 36px;
height: 36px; height: 36px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
flex-shrink: 0; flex-shrink: 0;
} }
@@ -202,14 +202,14 @@ export const searchStyles = css`
padding: 0 12px 0 0; padding: 0 12px 0 0;
border: none; border: none;
background: transparent; background: transparent;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px; font-size: 13px;
font-family: inherit; font-family: inherit;
outline: none; outline: none;
} }
.search-input::placeholder { .search-input::placeholder {
color: rgba(255, 255, 255, 0.4); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
} }
.search-spinner { .search-spinner {
@@ -224,7 +224,7 @@ export const searchStyles = css`
.search-spinner svg { .search-spinner svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -243,15 +243,15 @@ export const searchStyles = css`
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.search-clear:hover { .search-clear:hover {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.search-clear svg { .search-clear svg {
@@ -266,8 +266,8 @@ export const searchStyles = css`
right: 0; right: 0;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -285,7 +285,7 @@ export const searchStyles = css`
padding: 10px 12px; padding: 10px 12px;
cursor: pointer; cursor: pointer;
transition: background-color 0.1s ease; transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
} }
.search-result:last-child { .search-result:last-child {
@@ -294,25 +294,25 @@ export const searchStyles = css`
.search-result:hover, .search-result:hover,
.search-result.highlighted { .search-result.highlighted {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
} }
.search-result-name { .search-result-name {
font-size: 13px; font-size: 13px;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3; line-height: 1.3;
} }
.search-result-type { .search-result-type {
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize; text-transform: capitalize;
} }
.search-no-results { .search-no-results {
padding: 12px; padding: 12px;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 13px; font-size: 13px;
} }
`; `;
@@ -323,8 +323,8 @@ export const searchStyles = css`
export const navigationStyles = css` export const navigationStyles = css`
.navigation-panel { .navigation-panel {
width: 300px; width: 300px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -337,7 +337,7 @@ export const navigationStyles = css`
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.nav-header-icon { .nav-header-icon {
@@ -357,14 +357,14 @@ export const navigationStyles = css`
.nav-header-title { .nav-header-title {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
} }
.nav-mode-selector { .nav-mode-selector {
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.nav-mode-btn { .nav-mode-btn {
@@ -377,15 +377,15 @@ export const navigationStyles = css`
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
color: rgba(255, 255, 255, 0.6); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.nav-mode-btn:hover { .nav-mode-btn:hover {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: rgba(255, 255, 255, 0.9); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
} }
.nav-mode-btn.active { .nav-mode-btn.active {
@@ -398,6 +398,67 @@ export const navigationStyles = css`
height: 16px; height: 16px;
} }
/* Traffic toggle in navigation panel */
.nav-traffic-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-traffic-toggle-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
.nav-traffic-toggle-label svg {
width: 14px;
height: 14px;
color: var(--geo-tool-active, #0084ff);
}
.nav-traffic-toggle-btn {
position: relative;
width: 36px;
height: 20px;
border: none;
border-radius: 10px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.2)')};
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0;
}
.nav-traffic-toggle-btn.active {
background: var(--geo-tool-active, #0084ff);
}
.toggle-track {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
}
.nav-traffic-toggle-btn.active .toggle-thumb {
transform: translateX(16px);
}
.nav-inputs { .nav-inputs {
padding: 12px; padding: 12px;
display: flex; display: flex;
@@ -437,10 +498,10 @@ export const navigationStyles = css`
width: 100%; width: 100%;
height: 36px; height: 36px;
padding: 0 36px 0 12px; padding: 0 36px 0 12px;
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
border-radius: 6px; border-radius: 6px;
background: rgba(0, 0, 0, 0.2); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px; font-size: 13px;
font-family: inherit; font-family: inherit;
outline: none; outline: none;
@@ -452,7 +513,7 @@ export const navigationStyles = css`
} }
.nav-input::placeholder { .nav-input::placeholder {
color: rgba(255, 255, 255, 0.4); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
} }
.nav-input.has-value { .nav-input.has-value {
@@ -472,14 +533,14 @@ export const navigationStyles = css`
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.nav-set-map-btn:hover { .nav-set-map-btn:hover {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: rgba(255, 255, 255, 0.9); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
} }
.nav-set-map-btn.active { .nav-set-map-btn.active {
@@ -505,13 +566,13 @@ export const navigationStyles = css`
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: rgba(255, 255, 255, 0.4); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
cursor: pointer; cursor: pointer;
transition: color 0.15s ease; transition: color 0.15s ease;
} }
.nav-input-clear:hover { .nav-input-clear:hover {
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.nav-input-clear svg { .nav-input-clear svg {
@@ -526,8 +587,8 @@ export const navigationStyles = css`
right: 0; right: 0;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.98)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px; border-radius: 6px;
z-index: 20; z-index: 20;
} }
@@ -539,7 +600,7 @@ export const navigationStyles = css`
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
transition: background-color 0.1s ease; transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
} }
.nav-search-result:last-child { .nav-search-result:last-child {
@@ -548,12 +609,12 @@ export const navigationStyles = css`
.nav-search-result:hover, .nav-search-result:hover,
.nav-search-result.highlighted { .nav-search-result.highlighted {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
} }
.nav-search-result-name { .nav-search-result-name {
font-size: 12px; font-size: 12px;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3; line-height: 1.3;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -562,7 +623,7 @@ export const navigationStyles = css`
.nav-search-result-type { .nav-search-result-type {
font-size: 10px; font-size: 10px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize; text-transform: capitalize;
} }
@@ -602,12 +663,12 @@ export const navigationStyles = css`
} }
.nav-action-btn.secondary { .nav-action-btn.secondary {
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.nav-action-btn.secondary:hover { .nav-action-btn.secondary:hover {
background: rgba(255, 255, 255, 0.15); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.15)')};
} }
.nav-action-btn svg { .nav-action-btn svg {
@@ -622,8 +683,8 @@ export const navigationStyles = css`
gap: 16px; gap: 16px;
padding: 12px; padding: 12px;
background: rgba(0, 132, 255, 0.1); background: rgba(0, 132, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.nav-summary-item { .nav-summary-item {
@@ -632,7 +693,7 @@ export const navigationStyles = css`
gap: 6px; gap: 6px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
} }
.nav-summary-item svg { .nav-summary-item svg {
@@ -650,7 +711,7 @@ export const navigationStyles = css`
display: flex; display: flex;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
cursor: pointer; cursor: pointer;
} }
@@ -660,7 +721,7 @@ export const navigationStyles = css`
} }
.nav-step:hover { .nav-step:hover {
background: rgba(255, 255, 255, 0.05); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
} }
.nav-step-icon { .nav-step-icon {
@@ -670,8 +731,8 @@ export const navigationStyles = css`
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 6px; border-radius: 6px;
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
font-size: 14px; font-size: 14px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -683,14 +744,14 @@ export const navigationStyles = css`
.nav-step-instruction { .nav-step-instruction {
font-size: 13px; font-size: 13px;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.4; line-height: 1.4;
margin-bottom: 2px; margin-bottom: 2px;
} }
.nav-step-distance { .nav-step-distance {
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
} }
.nav-error { .nav-error {
@@ -716,7 +777,7 @@ export const navigationStyles = css`
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 16px; padding: 16px;
color: rgba(255, 255, 255, 0.6); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 13px; font-size: 13px;
} }
@@ -729,7 +790,7 @@ export const navigationStyles = css`
.nav-empty-steps { .nav-empty-steps {
padding: 16px 12px; padding: 16px 12px;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 12px; font-size: 12px;
} }
@@ -739,7 +800,7 @@ export const navigationStyles = css`
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.nav-back-btn { .nav-back-btn {
@@ -750,15 +811,15 @@ export const navigationStyles = css`
height: 32px; height: 32px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
flex-shrink: 0; flex-shrink: 0;
} }
.nav-back-btn:hover { .nav-back-btn:hover {
background: rgba(255, 255, 255, 0.2); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.2)')};
} }
.nav-back-btn svg { .nav-back-btn svg {
@@ -774,7 +835,7 @@ export const navigationStyles = css`
gap: 6px; gap: 6px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
} }
.nav-directions-summary svg { .nav-directions-summary svg {
@@ -784,7 +845,7 @@ export const navigationStyles = css`
} }
.nav-directions-separator { .nav-directions-separator {
color: rgba(255, 255, 255, 0.4); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
margin: 0 4px; margin: 0 4px;
} }
@@ -852,12 +913,12 @@ export const navigationStyles = css`
.nav-traffic-text { .nav-traffic-text {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.nav-traffic-delay { .nav-traffic-delay {
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-left: auto; margin-left: auto;
} }
`; `;
@@ -888,8 +949,8 @@ export const headerToolbarStyles = css`
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 8px 12px; padding: 8px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
min-height: 52px; min-height: 52px;
position: relative; position: relative;
z-index: 10; z-index: 10;
@@ -919,7 +980,7 @@ export const headerToolbarStyles = css`
.header-toolbar .toolbar-divider { .header-toolbar .toolbar-divider {
width: 1px; width: 1px;
height: 24px; height: 24px;
background: rgba(255, 255, 255, 0.15); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
margin: 0 4px; margin: 0 4px;
} }
@@ -934,13 +995,13 @@ export const headerToolbarStyles = css`
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.header-toolbar .tool-button:hover { .header-toolbar .tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
} }
.header-toolbar .tool-button.active { .header-toolbar .tool-button.active {
@@ -967,8 +1028,8 @@ export const headerToolbarStyles = css`
/* Left Sidebar - Navigation Panel */ /* Left Sidebar - Navigation Panel */
.left-sidebar { .left-sidebar {
grid-area: left-panel; grid-area: left-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-right: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border-right: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -994,8 +1055,8 @@ export const headerToolbarStyles = css`
/* Right Sidebar - Draw Panel */ /* Right Sidebar - Draw Panel */
.right-sidebar { .right-sidebar {
grid-area: right-panel; grid-area: right-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-left: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border-left: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1021,7 +1082,7 @@ export const headerToolbarStyles = css`
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.draw-panel-header-icon { .draw-panel-header-icon {
@@ -1041,7 +1102,7 @@ export const headerToolbarStyles = css`
.draw-panel-header-title { .draw-panel-header-title {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
} }
.draw-tools-grid { .draw-tools-grid {
@@ -1058,17 +1119,17 @@ export const headerToolbarStyles = css`
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
padding: 12px 8px; padding: 12px 8px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
} }
.draw-tool-button:hover { .draw-tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: rgba(255, 255, 255, 0.2); border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
} }
.draw-tool-button.active { .draw-tool-button.active {
@@ -1096,7 +1157,7 @@ export const headerToolbarStyles = css`
.draw-panel-divider { .draw-panel-divider {
height: 1px; height: 1px;
margin: 4px 12px; margin: 4px 12px;
background: rgba(255, 255, 255, 0.1); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.draw-panel-actions { .draw-panel-actions {
@@ -1112,10 +1173,10 @@ export const headerToolbarStyles = css`
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
@@ -1123,8 +1184,8 @@ export const headerToolbarStyles = css`
} }
.draw-action-button:hover { .draw-action-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: rgba(255, 255, 255, 0.2); border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
} }
.draw-action-button.active { .draw-action-button.active {
@@ -1145,7 +1206,7 @@ export const headerToolbarStyles = css`
.draw-action-button.danger:hover { .draw-action-button.danger:hover {
background: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5; color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
} }
/* Map container takes grid area */ /* Map container takes grid area */
@@ -1177,9 +1238,9 @@ export const trafficStyles = css`
padding: 0; padding: 0;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
color: var(--geo-text, #fff); color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer; cursor: pointer;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -1187,7 +1248,7 @@ export const trafficStyles = css`
} }
.traffic-toggle-btn:hover:not(:disabled) { .traffic-toggle-btn:hover:not(:disabled) {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.15)); background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
} }
.traffic-toggle-btn.active { .traffic-toggle-btn.active {
@@ -1215,7 +1276,7 @@ export const trafficStyles = css`
justify-content: center; justify-content: center;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border-radius: 50%; border-radius: 50%;
} }
@@ -1230,8 +1291,8 @@ export const trafficStyles = css`
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 6px 12px; padding: 6px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px; border-radius: 6px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -1252,7 +1313,7 @@ export const trafficStyles = css`
.traffic-status-text { .traffic-status-text {
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.7); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
} }
.traffic-error { .traffic-error {
@@ -1273,8 +1334,8 @@ export const trafficStyles = css`
/* Traffic Legend */ /* Traffic Legend */
.traffic-legend { .traffic-legend {
padding: 10px 12px; padding: 10px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9)); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1)); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
@@ -1285,7 +1346,7 @@ export const trafficStyles = css`
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -1300,7 +1361,7 @@ export const trafficStyles = css`
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.traffic-legend-color { .traffic-legend-color {
@@ -1312,8 +1373,8 @@ export const trafficStyles = css`
.traffic-legend-updated { .traffic-legend-updated {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
font-size: 10px; font-size: 10px;
color: rgba(255, 255, 255, 0.4); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
} }
`; `;

91
ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
View File

@@ -8,6 +8,7 @@ import {
type TemplateResult, type TemplateResult,
cssManager, cssManager,
css, css,
domtools,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesContextmenu } from '@design.estate/dees-catalog'; import { DeesContextmenu } from '@design.estate/dees-catalog';
import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles, trafficStyles, headerToolbarStyles } from '../../00componentstyles.js'; import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles, trafficStyles, headerToolbarStyles } from '../../00componentstyles.js';
@@ -175,41 +176,63 @@ export class DeesGeoMap extends DeesElement {
.maplibregl-ctrl-attrib { .maplibregl-ctrl-attrib {
font-size: 11px; font-size: 11px;
background: rgba(0, 0, 0, 0.5); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.5)')};
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
} }
.maplibregl-ctrl-attrib a { .maplibregl-ctrl-attrib a {
color: rgba(255, 255, 255, 0.8); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
} }
.feature-count { .feature-count {
padding: 6px 12px; padding: 6px 12px;
background: rgba(30, 30, 30, 0.9); background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px; border-radius: 6px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.7); color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
} }
`, `,
]; ];
// Map theme subscription for cleanup
private mapThemeSubscription: { unsubscribe: () => void } | null = null;
// ─── Lifecycle ────────────────────────────────────────────────────────────── // ─── Lifecycle ──────────────────────────────────────────────────────────────
public async firstUpdated() { public async firstUpdated() {
this.initializeControllers(); this.initializeControllers();
await this.initializeMap(); await this.initializeMap();
// Subscribe to theme changes to update map style
this.subscribeToThemeChanges();
} }
public async disconnectedCallback() { public async disconnectedCallback() {
await super.disconnectedCallback(); await super.disconnectedCallback();
if (this.mapThemeSubscription) {
this.mapThemeSubscription.unsubscribe();
this.mapThemeSubscription = null;
}
this.cleanup(); this.cleanup();
} }
/**
* Subscribe to theme changes via domtools
*/
private async subscribeToThemeChanges(): Promise<void> {
const domtoolsInstance = await domtools.DomTools.setupDomTools();
this.mapThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
(_goBright: boolean) => {
this.updateMapStyleForTheme();
}
);
}
public updated(changedProperties: Map<string, unknown>) { public updated(changedProperties: Map<string, unknown>) {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has('dragToDraw') && this.draw && this.map) { if (changedProperties.has('dragToDraw') && this.draw && this.map) {
@@ -293,11 +316,21 @@ export class DeesGeoMap extends DeesElement {
getMap: () => this.map, getMap: () => this.map,
// Connect traffic controller for traffic-aware routing // Connect traffic controller for traffic-aware routing
getTrafficRoute: async (start, end, mode) => { getTrafficRoute: async (start, end, mode) => {
if (this.trafficController?.supportsTrafficRouting()) { if (this.showTraffic && this.trafficController?.supportsTrafficRouting()) {
return this.trafficController.fetchRouteWithTraffic(start, end, mode); return this.trafficController.fetchRouteWithTraffic(start, end, mode);
} }
return null; return null;
}, },
// Traffic toggle callbacks
onTrafficToggle: (enabled) => {
if (enabled) {
this.trafficController?.enable();
} else {
this.trafficController?.disable();
}
this.showTraffic = enabled;
},
getTrafficEnabled: () => this.showTraffic,
}); });
this.navigationController.navigationMode = this.navigationMode; this.navigationController.navigationMode = this.navigationMode;
@@ -377,30 +410,30 @@ export class DeesGeoMap extends DeesElement {
private getMapStyle(): maplibregl.StyleSpecification | string { private getMapStyle(): maplibregl.StyleSpecification | string {
if (this.mapStyle === 'osm') { if (this.mapStyle === 'osm') {
return { // Check current theme and use appropriate tiles
version: 8, const isDarkTheme = !cssManager.goBright;
sources: {
'osm-tiles': { if (isDarkTheme) {
type: 'raster', // CartoDB Dark Matter GL vector style - high quality dark theme
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'], return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
tileSize: 256, } else {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', // CartoDB Voyager GL vector style - high quality light theme
}, return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
}, }
layers: [
{
id: 'osm-tiles',
type: 'raster',
source: 'osm-tiles',
minzoom: 0,
maxzoom: 19,
},
],
};
} }
return this.mapStyle; return this.mapStyle;
} }
/**
* Update the map style when theme changes
*/
private updateMapStyleForTheme(): void {
if (!this.map || !this.isMapReady || this.mapStyle !== 'osm') return;
const newStyle = this.getMapStyle();
this.map.setStyle(newStyle as maplibregl.StyleSpecification);
}
// ─── Terra Draw Initialization ────────────────────────────────────────────── // ─── Terra Draw Initialization ──────────────────────────────────────────────
private initializeTerraDraw() { private initializeTerraDraw() {
@@ -934,9 +967,7 @@ export class DeesGeoMap extends DeesElement {
${renderIcon('polygon')} ${renderIcon('polygon')}
</button> </button>
` : ''} ` : ''}
${showTrafficControls && this.trafficController ${this.trafficController?.render()}
? this.trafficController.render()
: ''}
<div class="toolbar-divider"></div> <div class="toolbar-divider"></div>
<button <button
class="tool-button" class="tool-button"

21
ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
View File

@@ -65,6 +65,10 @@ export interface INavigationControllerCallbacks {
end: [number, number], end: [number, number],
mode: TNavigationMode mode: TNavigationMode
) => Promise<ITrafficAwareRoute | null>; ) => Promise<ITrafficAwareRoute | null>;
/** Optional callback when traffic toggle is changed */
onTrafficToggle?: (enabled: boolean) => void;
/** Optional callback to get current traffic state */
getTrafficEnabled?: () => boolean;
} }
/** /**
@@ -832,6 +836,7 @@ export class NavigationController {
private renderPlanningView(extraClass?: string): TemplateResult { private renderPlanningView(extraClass?: string): TemplateResult {
const { isLoading, error, startPoint, endPoint } = this.navigationState; const { isLoading, error, startPoint, endPoint } = this.navigationState;
const canCalculate = startPoint && endPoint && !isLoading; const canCalculate = startPoint && endPoint && !isLoading;
const trafficEnabled = this.callbacks.getTrafficEnabled?.() ?? false;
return html` return html`
<div class="navigation-panel ${extraClass || ''}"> <div class="navigation-panel ${extraClass || ''}">
@@ -864,6 +869,22 @@ export class NavigationController {
</button> </button>
</div> </div>
<div class="nav-traffic-toggle">
<div class="nav-traffic-toggle-label">
${renderIcon('traffic')}
<span>Traffic-aware routing</span>
</div>
<button
class="nav-traffic-toggle-btn ${trafficEnabled ? 'active' : ''}"
@click=${() => this.callbacks.onTrafficToggle?.(!trafficEnabled)}
title="${trafficEnabled ? 'Disable traffic' : 'Enable traffic'}"
>
<span class="toggle-track">
<span class="toggle-thumb"></span>
</span>
</button>
</div>
<div class="nav-inputs"> <div class="nav-inputs">
${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)} ${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)}
${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)} ${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)}