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 = leaflet.map(mapEl, { zoomControl: true });
|
||||||
map.setView([20, 0], 2);
|
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
|
leaflet
|
||||||
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
.tileLayer(tileUrl, {
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
attribution: '© OpenStreetMap contributors'
|
subdomains: ['a', 'b', 'c', 'd'],
|
||||||
|
attribution: isDark
|
||||||
|
? '© OpenStreetMap contributors © CARTO'
|
||||||
|
: '© OpenStreetMap contributors'
|
||||||
})
|
})
|
||||||
.addTo(map);
|
.addTo(map);
|
||||||
markersLayer = leaflet.layerGroup().addTo(map);
|
markersLayer = leaflet.layerGroup().addTo(map);
|
||||||
@@ -318,3 +331,30 @@
|
|||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
{/if}
|
{/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