From b44363824d41763280bea00dd988517c2bde9f10 Mon Sep 17 00:00:00 2001
From: James Yoo <jyoo980@gmail.com>
Date: Sat, 28 Mar 2026 14:32:41 -0700
Subject: [PATCH 1/2] Adding course preview video for DM '26

---
 pages/drumheller-marathon-26.html |   5 +
 pages/heatmap.html                | 235 ++++++++++++++++++++++++++++++
 2 files changed, 240 insertions(+)
 create mode 100644 pages/heatmap.html

diff --git a/pages/drumheller-marathon-26.html b/pages/drumheller-marathon-26.html
index cc488ee..7e6a4d5 100644
--- a/pages/drumheller-marathon-26.html
+++ b/pages/drumheller-marathon-26.html
@@ -1067,6 +1067,11 @@ <h2>USATF Certificate</h2>
                 </div>
             </div>
         </div>
+
+        <h3 class="mt-4">Course Preview</h3>
+        <div class="ratio ratio-16x9 mt-2 rounded-4 overflow-hidden">
+            <iframe src="https://www.youtube-nocookie.com/embed/aoi7lK8zl5s" title="Course Preview" allowfullscreen></iframe>
+        </div>
     </div>
 
 </section>
diff --git a/pages/heatmap.html b/pages/heatmap.html
new file mode 100644
index 0000000..3301ad4
--- /dev/null
+++ b/pages/heatmap.html
@@ -0,0 +1,235 @@
+---
+title: Run Heatmap
+permalink: /heatmap/
+layout: base
+description: A heatmap of Race Condition Running routes overlaid on Seattle's map, showing where we run most.
+---
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.15.0/dist/maplibre-gl.css" crossorigin="anonymous">
+
+<div class="container constrain-width">
+  <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
+    <h1 class="h2 mb-0">Run Heatmap</h1>
+    <div class="d-flex align-items-center gap-2 ms-auto">
+      <label class="form-label mb-0 text-nowrap" for="schedule-selector">Schedule:</label>
+      <select id="schedule-selector" class="form-select form-select-sm" style="max-width: 200px;">
+        <option value="{{ '/routes/geojson/aggregates/routes.geojson' | relative_url }}">All time</option>
+        {%- assign schedules = site.data.schedules_table | sort: 'start_date' | reverse -%}
+        {%- for sched in schedules -%}
+          {%- if sched.aggregate_geojson -%}
+            <option value="{{ sched.aggregate_geojson | relative_url }}"
+              {%- if sched.next_id == nil %} selected{%- endif -%}>
+              {{ sched.label }}
+            </option>
+          {%- endif -%}
+        {%- endfor -%}
+      </select>
+    </div>
+  </div>
+</div>
+
+<div id="map"></div>
+
+<div id="heatmap-legend" class="position-absolute bottom-0 end-0 mb-4 me-4 p-2 rounded-2 text-white small" style="background: rgba(0,0,0,0.55); pointer-events: none; z-index: 1;">
+  <div class="mb-1 fw-semibold">Route frequency</div>
+  <div class="d-flex align-items-center gap-2">
+    <div style="width:80px; height:10px; border-radius:5px; background: linear-gradient(to right, rgba(255,100,0,0.25), rgba(255,50,0,0.8), #cc0000);"></div>
+  </div>
+  <div class="d-flex justify-content-between" style="width:80px;">
+    <span>less</span>
+    <span>more</span>
+  </div>
+</div>
+
+<style>
+  body { position: relative; }
+  #map {
+    height: calc(100vh - 170px);
+    min-height: 480px;
+    width: 100%;
+  }
+  .maplibregl-popup-content {
+    background: rgba(20, 20, 20, 0.9);
+    color: #fff;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 0.85rem;
+    max-width: 220px;
+  }
+  .maplibregl-popup-tip {
+    border-top-color: rgba(20, 20, 20, 0.9) !important;
+  }
+</style>
+
+<script type="module">
+  import maplibregl from 'maplibre-gl';
+  import {Protocol} from 'pmtiles';
+  import Protobuf from 'https://unpkg.com/pbf@4.0.1/index.js';
+  import {VectorTile} from 'https://esm.run/@mapbox/vector-tile@2.0.3/index.js';
+  import tileToProtobuf from 'https://esm.run/vt-pbf@3.1.3/index.js';
+
+  const pmtilesProtocol = new Protocol();
+  maplibregl.addProtocol('pmtiles', pmtilesProtocol.tile);
+
+  // Abbreviate long street name labels on the base map tiles
+  const abbrevProtocol = 'street-abbrev';
+  const abbrevReplacements = [
+    [/\bNortheast\b/g, 'NE'], [/\bNorthwest\b/g, 'NW'],
+    [/\bSoutheast\b/g, 'SE'], [/\bSouthwest\b/g, 'SW'],
+    [/\bNorth\b/g, 'N'],      [/\bSouth\b/g, 'S'],
+    [/\bEast\b/g, 'E'],       [/\bWest\b/g, 'W'],
+    [/\bStreet\b/g, 'St'],    [/\bAvenue\b/g, 'Ave'],
+    [/\bBoulevard\b/g, 'Blvd'],[/\bRoad\b/g, 'Rd'],
+    [/\bLane\b/g, 'Ln'],      [/\bDrive\b/g, 'Dr'],
+    [/\bCourt\b/g, 'Ct'],     [/\bPlace\b/g, 'Pl'],
+  ];
+  maplibregl.addProtocol(abbrevProtocol, (request) => {
+    const url = request.url.replace(abbrevProtocol + '://', '');
+    const abbreviate = (text) =>
+      typeof text === 'string'
+        ? abbrevReplacements.reduce((s, [p, r]) => s.replace(p, r), text)
+        : text;
+    return fetch(url)
+      .then(r => r.arrayBuffer())
+      .then(buf => new VectorTile(new Protobuf(buf)))
+      .then(tile => ({
+        layers: Object.fromEntries(
+          Object.entries(tile.layers).map(([id, layer]) => [id, {
+            ...layer,
+            feature: (i) => {
+              const feat = layer.feature(i);
+              if (id === 'transportation_name' && feat.properties) {
+                for (const k of ['name', 'name_en', 'name:latin', 'name:nonlatin']) {
+                  if (feat.properties[k]) feat.properties[k] = abbreviate(feat.properties[k]);
+                }
+              }
+              return feat;
+            }
+          }])
+        )
+      }))
+      .then(tile => tileToProtobuf(tile).buffer)
+      .then(buf => ({ data: buf }));
+  });
+
+  function computeBounds(data) {
+    const bounds = new maplibregl.LngLatBounds();
+    for (const feature of (data.features || [])) {
+      const geom = feature.geometry;
+      if (!geom) continue;
+      const coords = geom.type === 'LineString' ? geom.coordinates
+        : geom.type === 'MultiLineString' ? geom.coordinates.flat()
+        : [];
+      for (const [lng, lat] of coords) bounds.extend([lng, lat]);
+    }
+    return bounds;
+  }
+
+  const SOURCE_ID = 'heatmap-routes';
+
+  function addLayers(map) {
+    // Wide soft glow — stacks visually where routes share the same path
+    map.addLayer({
+      id: 'routes-glow',
+      type: 'line',
+      source: SOURCE_ID,
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+      paint: {
+        'line-color': '#ff4500',
+        'line-width': 14,
+        'line-opacity': 0.06,
+        'line-blur': 6,
+      }
+    });
+    // Mid halo
+    map.addLayer({
+      id: 'routes-halo',
+      type: 'line',
+      source: SOURCE_ID,
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+      paint: {
+        'line-color': '#ff4500',
+        'line-width': 5,
+        'line-opacity': 0.18,
+        'line-blur': 2,
+      }
+    });
+    // Sharp core — semi-transparent so overlapping routes compound to appear denser
+    map.addLayer({
+      id: 'routes-core',
+      type: 'line',
+      source: SOURCE_ID,
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+      paint: {
+        'line-color': '#cc2200',
+        'line-width': 2,
+        'line-opacity': 0.5,
+      }
+    });
+  }
+
+  let map;
+  let popup;
+  let currentUrl = null;
+
+  async function loadData(url) {
+    const resp = await fetch(url);
+    return resp.json();
+  }
+
+  async function updateRoutes(url) {
+    if (url === currentUrl) return;
+    currentUrl = url;
+    const data = await loadData(url);
+    const src = map.getSource(SOURCE_ID);
+    if (src) {
+      src.setData(data);
+    } else {
+      map.addSource(SOURCE_ID, { type: 'geojson', data });
+      addLayers(map);
+      // Hover popup showing route name
+      map.on('mouseenter', 'routes-core', () => { map.getCanvas().style.cursor = 'pointer'; });
+      map.on('mouseleave', 'routes-core', () => {
+        map.getCanvas().style.cursor = '';
+        popup.remove();
+      });
+      map.on('mousemove', 'routes-core', (e) => {
+        const features = map.queryRenderedFeatures(e.point, { layers: ['routes-core'] });
+        if (!features.length) { popup.remove(); return; }
+        const names = [...new Set(features.map(f => f.properties.name).filter(Boolean))];
+        popup.setLngLat(e.lngLat).setHTML(
+          '<div>' + names.map(n => `<div>• ${n}</div>`).join('') + '</div>'
+        ).addTo(map);
+      });
+    }
+    const bounds = computeBounds(data);
+    if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 60, maxZoom: 14, animate: true });
+  }
+
+  async function init() {
+    const selector = document.getElementById('schedule-selector');
+
+    map = new maplibregl.Map({
+      style: "{{ '/maps/route-map-style.json' | relative_url }}",
+      container: 'map',
+      zoom: 11,
+      center: [-122.3321, 47.6062],
+    });
+
+    map.setTransformRequest((url, resourceType) => {
+      if (resourceType === 'Tile' && url.includes('openfreemap')) {
+        return { url: abbrevProtocol + '://' + url };
+      }
+    });
+
+    popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 10 });
+
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
+    map.addControl(new maplibregl.FullscreenControl(), 'top-left');
+
+    map.on('load', () => updateRoutes(selector.value));
+
+    selector.addEventListener('change', () => updateRoutes(selector.value));
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+</script>

From d5af2a596e6e41ce23d19c1f03466c016734420c Mon Sep 17 00:00:00 2001
From: James Yoo <24359440+jyoo980@users.noreply.github.com>
Date: Sat, 28 Mar 2026 16:06:09 -0700
Subject: [PATCH 2/2] Removing unrelated change

---
 pages/heatmap.html | 235 ---------------------------------------------
 1 file changed, 235 deletions(-)
 delete mode 100644 pages/heatmap.html

diff --git a/pages/heatmap.html b/pages/heatmap.html
deleted file mode 100644
index 3301ad4..0000000
--- a/pages/heatmap.html
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: Run Heatmap
-permalink: /heatmap/
-layout: base
-description: A heatmap of Race Condition Running routes overlaid on Seattle's map, showing where we run most.
----
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.15.0/dist/maplibre-gl.css" crossorigin="anonymous">
-
-<div class="container constrain-width">
-  <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
-    <h1 class="h2 mb-0">Run Heatmap</h1>
-    <div class="d-flex align-items-center gap-2 ms-auto">
-      <label class="form-label mb-0 text-nowrap" for="schedule-selector">Schedule:</label>
-      <select id="schedule-selector" class="form-select form-select-sm" style="max-width: 200px;">
-        <option value="{{ '/routes/geojson/aggregates/routes.geojson' | relative_url }}">All time</option>
-        {%- assign schedules = site.data.schedules_table | sort: 'start_date' | reverse -%}
-        {%- for sched in schedules -%}
-          {%- if sched.aggregate_geojson -%}
-            <option value="{{ sched.aggregate_geojson | relative_url }}"
-              {%- if sched.next_id == nil %} selected{%- endif -%}>
-              {{ sched.label }}
-            </option>
-          {%- endif -%}
-        {%- endfor -%}
-      </select>
-    </div>
-  </div>
-</div>
-
-<div id="map"></div>
-
-<div id="heatmap-legend" class="position-absolute bottom-0 end-0 mb-4 me-4 p-2 rounded-2 text-white small" style="background: rgba(0,0,0,0.55); pointer-events: none; z-index: 1;">
-  <div class="mb-1 fw-semibold">Route frequency</div>
-  <div class="d-flex align-items-center gap-2">
-    <div style="width:80px; height:10px; border-radius:5px; background: linear-gradient(to right, rgba(255,100,0,0.25), rgba(255,50,0,0.8), #cc0000);"></div>
-  </div>
-  <div class="d-flex justify-content-between" style="width:80px;">
-    <span>less</span>
-    <span>more</span>
-  </div>
-</div>
-
-<style>
-  body { position: relative; }
-  #map {
-    height: calc(100vh - 170px);
-    min-height: 480px;
-    width: 100%;
-  }
-  .maplibregl-popup-content {
-    background: rgba(20, 20, 20, 0.9);
-    color: #fff;
-    border-radius: 6px;
-    padding: 8px 12px;
-    font-size: 0.85rem;
-    max-width: 220px;
-  }
-  .maplibregl-popup-tip {
-    border-top-color: rgba(20, 20, 20, 0.9) !important;
-  }
-</style>
-
-<script type="module">
-  import maplibregl from 'maplibre-gl';
-  import {Protocol} from 'pmtiles';
-  import Protobuf from 'https://unpkg.com/pbf@4.0.1/index.js';
-  import {VectorTile} from 'https://esm.run/@mapbox/vector-tile@2.0.3/index.js';
-  import tileToProtobuf from 'https://esm.run/vt-pbf@3.1.3/index.js';
-
-  const pmtilesProtocol = new Protocol();
-  maplibregl.addProtocol('pmtiles', pmtilesProtocol.tile);
-
-  // Abbreviate long street name labels on the base map tiles
-  const abbrevProtocol = 'street-abbrev';
-  const abbrevReplacements = [
-    [/\bNortheast\b/g, 'NE'], [/\bNorthwest\b/g, 'NW'],
-    [/\bSoutheast\b/g, 'SE'], [/\bSouthwest\b/g, 'SW'],
-    [/\bNorth\b/g, 'N'],      [/\bSouth\b/g, 'S'],
-    [/\bEast\b/g, 'E'],       [/\bWest\b/g, 'W'],
-    [/\bStreet\b/g, 'St'],    [/\bAvenue\b/g, 'Ave'],
-    [/\bBoulevard\b/g, 'Blvd'],[/\bRoad\b/g, 'Rd'],
-    [/\bLane\b/g, 'Ln'],      [/\bDrive\b/g, 'Dr'],
-    [/\bCourt\b/g, 'Ct'],     [/\bPlace\b/g, 'Pl'],
-  ];
-  maplibregl.addProtocol(abbrevProtocol, (request) => {
-    const url = request.url.replace(abbrevProtocol + '://', '');
-    const abbreviate = (text) =>
-      typeof text === 'string'
-        ? abbrevReplacements.reduce((s, [p, r]) => s.replace(p, r), text)
-        : text;
-    return fetch(url)
-      .then(r => r.arrayBuffer())
-      .then(buf => new VectorTile(new Protobuf(buf)))
-      .then(tile => ({
-        layers: Object.fromEntries(
-          Object.entries(tile.layers).map(([id, layer]) => [id, {
-            ...layer,
-            feature: (i) => {
-              const feat = layer.feature(i);
-              if (id === 'transportation_name' && feat.properties) {
-                for (const k of ['name', 'name_en', 'name:latin', 'name:nonlatin']) {
-                  if (feat.properties[k]) feat.properties[k] = abbreviate(feat.properties[k]);
-                }
-              }
-              return feat;
-            }
-          }])
-        )
-      }))
-      .then(tile => tileToProtobuf(tile).buffer)
-      .then(buf => ({ data: buf }));
-  });
-
-  function computeBounds(data) {
-    const bounds = new maplibregl.LngLatBounds();
-    for (const feature of (data.features || [])) {
-      const geom = feature.geometry;
-      if (!geom) continue;
-      const coords = geom.type === 'LineString' ? geom.coordinates
-        : geom.type === 'MultiLineString' ? geom.coordinates.flat()
-        : [];
-      for (const [lng, lat] of coords) bounds.extend([lng, lat]);
-    }
-    return bounds;
-  }
-
-  const SOURCE_ID = 'heatmap-routes';
-
-  function addLayers(map) {
-    // Wide soft glow — stacks visually where routes share the same path
-    map.addLayer({
-      id: 'routes-glow',
-      type: 'line',
-      source: SOURCE_ID,
-      layout: { 'line-cap': 'round', 'line-join': 'round' },
-      paint: {
-        'line-color': '#ff4500',
-        'line-width': 14,
-        'line-opacity': 0.06,
-        'line-blur': 6,
-      }
-    });
-    // Mid halo
-    map.addLayer({
-      id: 'routes-halo',
-      type: 'line',
-      source: SOURCE_ID,
-      layout: { 'line-cap': 'round', 'line-join': 'round' },
-      paint: {
-        'line-color': '#ff4500',
-        'line-width': 5,
-        'line-opacity': 0.18,
-        'line-blur': 2,
-      }
-    });
-    // Sharp core — semi-transparent so overlapping routes compound to appear denser
-    map.addLayer({
-      id: 'routes-core',
-      type: 'line',
-      source: SOURCE_ID,
-      layout: { 'line-cap': 'round', 'line-join': 'round' },
-      paint: {
-        'line-color': '#cc2200',
-        'line-width': 2,
-        'line-opacity': 0.5,
-      }
-    });
-  }
-
-  let map;
-  let popup;
-  let currentUrl = null;
-
-  async function loadData(url) {
-    const resp = await fetch(url);
-    return resp.json();
-  }
-
-  async function updateRoutes(url) {
-    if (url === currentUrl) return;
-    currentUrl = url;
-    const data = await loadData(url);
-    const src = map.getSource(SOURCE_ID);
-    if (src) {
-      src.setData(data);
-    } else {
-      map.addSource(SOURCE_ID, { type: 'geojson', data });
-      addLayers(map);
-      // Hover popup showing route name
-      map.on('mouseenter', 'routes-core', () => { map.getCanvas().style.cursor = 'pointer'; });
-      map.on('mouseleave', 'routes-core', () => {
-        map.getCanvas().style.cursor = '';
-        popup.remove();
-      });
-      map.on('mousemove', 'routes-core', (e) => {
-        const features = map.queryRenderedFeatures(e.point, { layers: ['routes-core'] });
-        if (!features.length) { popup.remove(); return; }
-        const names = [...new Set(features.map(f => f.properties.name).filter(Boolean))];
-        popup.setLngLat(e.lngLat).setHTML(
-          '<div>' + names.map(n => `<div>• ${n}</div>`).join('') + '</div>'
-        ).addTo(map);
-      });
-    }
-    const bounds = computeBounds(data);
-    if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 60, maxZoom: 14, animate: true });
-  }
-
-  async function init() {
-    const selector = document.getElementById('schedule-selector');
-
-    map = new maplibregl.Map({
-      style: "{{ '/maps/route-map-style.json' | relative_url }}",
-      container: 'map',
-      zoom: 11,
-      center: [-122.3321, 47.6062],
-    });
-
-    map.setTransformRequest((url, resourceType) => {
-      if (resourceType === 'Tile' && url.includes('openfreemap')) {
-        return { url: abbrevProtocol + '://' + url };
-      }
-    });
-
-    popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 10 });
-
-    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
-    map.addControl(new maplibregl.FullscreenControl(), 'top-left');
-
-    map.on('load', () => updateRoutes(selector.value));
-
-    selector.addEventListener('change', () => updateRoutes(selector.value));
-  }
-
-  document.addEventListener('DOMContentLoaded', init);
-</script>