different color for trals onn sattelite

bvandercar-vt · Jun 20, 2024 · f7a75f9 · f7a75f9
1 parent a048cbc
commit f7a75f9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -75,7 +75,20 @@ const overlayMaps = {
 
 control.layers(baseMaps, overlayMaps, { position: 'topleft', collapsed: false }).addTo(map)
 
-// TODO: change trails color when on sattelite view (map.on('baselayerchange')
+function setBikeTrailsStyle(isSatellite: boolean) {
+  const bikeTrails = document.getElementsByClassName('bike-trails')[0]! as HTMLElement
+  bikeTrails.classList.toggle('bike-trails-satellite', isSatellite)
+  bikeTrails.classList.toggle('bike-trails-dark', !isSatellite)
+}
+map.on('baselayerchange', (e) => {
+  const isSatellite = e.name === 'Satellite'
+  setBikeTrailsStyle(isSatellite)
+})
+
+map.on('overlayadd', () => {
+  const isSatellite = map.hasLayer(satelliteLayer)
+  setBikeTrailsStyle(isSatellite)
+})
 
 const lineStyle: PathOptions = {
   color: 'lime',

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -82,6 +82,10 @@ header {
   background-color: var(--popup-bg-color);
 }
 
-.bike-trails {
+.bike-trails-dark {
   filter: invert(100%) hue-rotate(350deg) saturate(1.5) brightness(85%) contrast(100%);
 }
+
+.bike-trails-satellite {
+  filter: invert(0%) hue-rotate(120deg) saturate(2) brightness(100%) contrast(100%);
+}