Enhance map styling and dark mode support
- 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user