light mode semi-functional
This commit is contained in:
SarayuJ3
@@ -5,6 +5,42 @@
|
||||
import { themeState } from '$lib/states/theme.svelte';
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
|
||||
function addMapLayers(map: any, isLight: boolean) {
|
||||
if (!map.getSource('study-locations')) {
|
||||
map.addSource('study-locations', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: UMD_LOCATIONS.map(loc => ({
|
||||
type: 'Feature',
|
||||
geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },
|
||||
properties: { name: loc.name }
|
||||
}))
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!map.getLayer('study-locations-labels')) {
|
||||
map.addLayer({
|
||||
id: 'study-locations-labels',
|
||||
type: 'symbol',
|
||||
source: 'study-locations',
|
||||
layout: {
|
||||
'text-field': ['get', 'name'],
|
||||
'text-size': 13,
|
||||
'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
|
||||
'text-radial-offset': 1,
|
||||
'text-justify': 'center'
|
||||
},
|
||||
paint: {
|
||||
'text-color': isLight ? '#1e1e2e' : '#ffffff',
|
||||
'text-halo-color': isLight ? '#ffffff' : '#000000',
|
||||
'text-halo-width': 2
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let mapContainer: HTMLDivElement | undefined = $state();
|
||||
let mapInstance: any = $state();
|
||||
|
||||
@@ -25,98 +61,73 @@
|
||||
|
||||
$effect(() => {
|
||||
if (mapInstance) {
|
||||
const style = themeState.isLight
|
||||
const isLight = themeState.isLight;
|
||||
const style = isLight
|
||||
? 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
|
||||
: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
|
||||
untrack(() => { mapInstance.setStyle(style); });
|
||||
untrack(() => {
|
||||
mapInstance.setStyle(style);
|
||||
mapInstance.once('style.load', () => addMapLayers(mapInstance, isLight));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
if (!browser || !mapContainer) return;
|
||||
onMount(() => {
|
||||
if (!browser || !mapContainer) return;
|
||||
|
||||
const { Map, NavigationControl } = await import('maplibre-gl');
|
||||
let map: any;
|
||||
|
||||
const map = new Map({
|
||||
container: mapContainer,
|
||||
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
|
||||
center: [-76.9425, 38.9859], // UMD McKeldin Mall
|
||||
zoom: 16.5,
|
||||
pitch: 0,
|
||||
bearing: 0,
|
||||
attributionControl: false
|
||||
});
|
||||
(async () => {
|
||||
const { Map, NavigationControl } = await import('maplibre-gl');
|
||||
|
||||
map.addControl(new NavigationControl({
|
||||
visualizePitch: true
|
||||
}), 'bottom-right');
|
||||
map = new Map({
|
||||
container: mapContainer!,
|
||||
style: themeState.isLight
|
||||
? 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
|
||||
: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
|
||||
center: [-76.9425, 38.9859],
|
||||
zoom: 16.5,
|
||||
pitch: 0,
|
||||
bearing: 0,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
mapInstance = map;
|
||||
map.addControl(new NavigationControl({ visualizePitch: true }), 'bottom-right');
|
||||
mapInstance = map;
|
||||
|
||||
map.on('load', () => {
|
||||
map.addSource('study-locations', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: UMD_LOCATIONS.map(loc => ({
|
||||
type: 'Feature',
|
||||
geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },
|
||||
properties: { name: loc.name }
|
||||
}))
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: 'study-locations-labels',
|
||||
type: 'symbol',
|
||||
source: 'study-locations',
|
||||
layout: {
|
||||
'text-field': ['get', 'name'],
|
||||
'text-size': 13,
|
||||
'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
|
||||
'text-radial-offset': 1,
|
||||
'text-justify': 'center'
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#ffffff',
|
||||
'text-halo-color': '#000000',
|
||||
'text-halo-width': 2
|
||||
}
|
||||
});
|
||||
});
|
||||
map.on('load', () => addMapLayers(map, themeState.isLight));
|
||||
})();
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
map?.remove();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="absolute inset-0 z-0 bg-crust transition-colors duration-500">
|
||||
<div bind:this={mapContainer} class="absolute inset-0 z-0 {themeState.isLight ? 'mix-blend-normal opacity-100 filter brightness-105 contrast-125 grayscale' : 'mix-blend-luminosity opacity-90'} transition-all duration-500" style="width: 100%; height: 100%;"></div>
|
||||
<!-- Color Screen Wash -->
|
||||
<div class="absolute inset-0 pointer-events-none {themeState.isLight ? 'mix-blend-screen bg-white opacity-20' : 'mix-blend-color bg-crust opacity-100'} z-10 transition-all duration-500"></div>
|
||||
<div bind:this={mapContainer} class="absolute inset-0 z-0 {themeState.isLight ? 'opacity-100' : 'mix-blend-luminosity opacity-90'} transition-all duration-500" style="width: 100%; height: 100%;"></div>
|
||||
{#if !themeState.isLight}
|
||||
<div class="absolute inset-0 pointer-events-none mix-blend-color bg-crust opacity-100 z-10 transition-all duration-500"></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.maplibregl-ctrl-group) {
|
||||
background: rgba(15, 23, 42, 0.8) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
border-left: 2px solid var(--color-neon-primary) !important;
|
||||
box-shadow: var(--shadow-glow-primary) !important;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
background: var(--color-panel-glass) !important; /* already switches per theme */
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent) !important;
|
||||
box-shadow: var(--shadow-glow-primary) !important;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(.maplibregl-ctrl-group button) {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
:global(.maplibregl-ctrl-group button:last-child) {
|
||||
border-bottom: none !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-surface1) 20%, transparent) !important;
|
||||
}
|
||||
:global(.maplibregl-ctrl-icon) {
|
||||
filter: invert(1) opacity(0.8) !important;
|
||||
filter: opacity(0.8) !important;
|
||||
filter: drop-shadow(0 0 1px #000000) !important;
|
||||
}
|
||||
:global(.maplibregl-ctrl-group button:hover) {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
if (val === 'default') {
|
||||
mapState.flyHome();
|
||||
} else if (val) {
|
||||
const loc = UMD_LOCATIONS.find(l => l.name === val);
|
||||
const loc = UMD_LOCATIONS.find((l: { name: string; lat: number; lng: number }) => l.name === val);
|
||||
if (loc) {
|
||||
mapState.flyTo(loc.lng, loc.lat, 18);
|
||||
}
|
||||
|
||||
@@ -43,15 +43,21 @@
|
||||
color: #585b70 !important;
|
||||
}
|
||||
|
||||
.light-theme border-white {
|
||||
.light-theme .border-white {
|
||||
border-color: rgba(88, 91, 112, 0.1);
|
||||
}
|
||||
|
||||
.light-theme .border-white\/5,
|
||||
.light-theme .border-white\/10,
|
||||
.light-theme .border-white\/20 {
|
||||
border-color: rgba(88, 91, 112, 0.15);
|
||||
}
|
||||
|
||||
@utility glass-panel {
|
||||
background-color: var(--color-panel-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent);
|
||||
}
|
||||
|
||||
@utility text-glow {
|
||||
|
||||
Reference in New Issue
Block a user