bike trails layer

index.html

@@ -28,6 +28,7 @@ <h1>My Bike Rides</h1>
         <div id="total-stats"></div>
       </div>
     </header>
+    <div id="checkbox-overlay">Trails Layer<input id="trail-layer-checkbox" type="checkbox" /></div>
     <div id="map"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

src/main.ts

@@ -46,6 +46,18 @@ tileLayer(`https://api.maptiler.com/maps/streets-v2-dark/{z}/{x}/{y}.png?key=${M
   crossOrigin: true,
 }).addTo(map)
 
+const bikeLayer = tileLayer('http://{s}.google.com/vt/lyrs=bike&x={x}&y={y}&z={z}', {
+  maxZoom: 20,
+  subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+  opacity: 0,
+  className: 'bike-trails',
+}).addTo(map)
+
+const bikeTrailCheckbox = document.getElementById('trail-layer-checkbox')! as HTMLInputElement
+bikeTrailCheckbox.addEventListener('change', (event) => {
+  bikeLayer.setOpacity((event.currentTarget as HTMLInputElement)?.checked ? 0.5 : 0)
+})
+
 const lineStyle: PathOptions = {
   color: 'lime',
   weight: 3,

src/styles/index.css

@@ -69,3 +69,22 @@ header {
 .leaflet-popup-tip {
   background-color: var(--popup-bg-color);
 }
+
+.bike-trails {
+  filter: invert(100%) hue-rotate(350deg) saturate(1.5) brightness(85%) contrast(100%);
+}
+
+#checkbox-overlay {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 0;
+  padding: 0.2em;
+  margin: 0.1em;
+
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  color: orange;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 5px;
+}