Enhance map styling and dark mode support
Publish telemt-api gateway Docker image / test (push) Successful in 23s
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m10s

- Implemented dynamic tile layer selection based on the current theme (light/dark), improving visual consistency with the overall design.
- Updated attribution handling for the tile layer to reflect the theme, ensuring proper credit is given based on the selected tiles.
- Added custom styles for Leaflet controls to align with the shadcn/tailwind theme, enhancing the user interface and experience.
This commit is contained in:
Denozordec
2026-03-30 15:56:21 +07:00
parent e259cc09e7
commit 7f7be8e98e
+42 -2
View File
@@ -37,10 +37,23 @@
map = leaflet.map(mapEl, { zoomControl: true });
map.setView([20, 0], 2);
const isDark =
typeof document !== 'undefined' &&
document.documentElement.classList.contains('dark');
// Тёмные тайлы лучше ложатся на основной dark-дизайн панели.
const tileUrl = isDark
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
.tileLayer(tileUrl, {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
subdomains: ['a', 'b', 'c', 'd'],
attribution: isDark
? '© OpenStreetMap contributors © CARTO'
: '© OpenStreetMap contributors'
})
.addTo(map);
markersLayer = leaflet.layerGroup().addTo(map);
@@ -318,3 +331,30 @@
</Card.Content>
</Card.Root>
{/if}
<style>
/* Leaflet в shadcn/tailwind теме: подгоняем фон, радиус и контролы */
:global(.leaflet-container) {
background: transparent;
border-radius: inherit;
}
:global(.leaflet-control-zoom) {
border-radius: calc(var(--radius) * 0.5);
}
:global(.leaflet-control-zoom a),
:global(.leaflet-control-zoom a:hover) {
background: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
}
:global(.leaflet-control-attribution) {
background: transparent;
color: var(--muted-foreground);
}
:global(.leaflet-control-attribution a) {
color: var(--muted-foreground);
}
:global(.leaflet-control-attribution a:hover) {
color: var(--foreground);
}
</style>