Merge pull request #400 from freezingsaddles/ride-map-boundaries

Bound personal/hashtag ride maps

freezing/web/static/js/ride-map.js

@@ -14,19 +14,35 @@ const track_colors = [
   'rgb(0, 137, 255)', 'rgb(33, 119, 255)', 'rgb(112, 101, 255)', 'rgb(153, 83, 255)', 'rgb(185, 65, 255)',
   'rgb(212, 44, 252)', 'rgb(234, 10, 218)', 'rgb(252, 0, 179)', 'rgb(255, 0, 136)', 'rgb(255, 0, 87)',
 ];
-function create_ride_map(id, url, ride_color = null) {
-  const map = L.map(id, { scrollWheelZoom: false }).setView([38.9072, -77.0369], 9);
+function create_ride_map(id, url, ride_color = null, recenter = false) {
+  const map = L.map(id, { gestureHandling: true }).setView([38.9072, -77.0369], 9);
   const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   var tiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/' + colorMode + '_all/{z}/{x}/{y}{r}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
     subdomains: 'abcd',
     maxZoom: 20,
   }).addTo(map);
   fetch(url).then(r => r.json()).then(data => {
+    if (recenter) {
+      let minlat = 90, maxlat = -90, minlon = 180, maxlon = -180;
+      for (const { track } of data.tracks) {
+        for (const [lat, lon] of track) {
+          if (lat < minlat) minlat = lat;
+          if (lat > maxlat) maxlat = lat;
+          if (lon < minlon) minlon = lon;
+          if (lon > maxlon) maxlon = lon;
+        }
+      }
+      if (minlat < maxlat) {
+        const bounds = new L.LatLngBounds([[maxlat, maxlon], [minlat, minlon]]);
+        map.fitBounds(bounds, {padding: [20, 20]});
+      }
+    }
     data.tracks.forEach(({ team, track}, index) => {
       const color = ride_color ?? track_colors[team % track_colors.length];
       const opacity = .2 + .4 * (index + 1) / data.tracks.length;
       var polyline = L.polyline([track], { color, opacity, weight: 2 }).addTo(map);
     });
   });
+  return map;
 }

freezing/web/templates/base.html

@@ -305,7 +305,7 @@
                                     <a class="dropdown-item" href="/pointless/hashtag/donut">Doughnut Rides</a>
                                 </li>
                                 <li>
-                                    <a class="dropdown-item" href="/pointless/generic/adulting">Errandeering</a>
+                                    <a class="dropdown-item" href="/pointless/hashtag/adulting">Errandeering</a>
                                 </li>
                                 <li>
                                     <a class="dropdown-item" href="/pointless/hashtag/420">Expand Your Horizons</a>
@@ -332,7 +332,7 @@
                                     <a class="dropdown-item" href="/pointless/hashtag/fsbooks">Little Free Library</a>
                                 </li>
                                 <li>
-                                    <a class="dropdown-item" href="/pointless/generic/londonbridge">London Bridge Rides</a>
+                                    <a class="dropdown-item" href="/pointless/hashtag/londonbridge">London Bridge Rides</a>
                                 </li>
                                 <li>
                                     <a class="dropdown-item" href="/pointless/arlington">Loopy for Arlington</a>

freezing/web/templates/index.html

@@ -23,6 +23,16 @@
     font-size: 1.1rem;
 }
 
+body.map-expanded {
+  #map {
+    aspect-ratio: 1.333;
+  }
+
+  #sect-stats {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 768px) {
     #map, #cal {
         aspect-ratio: 1.333;
@@ -63,6 +73,9 @@
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
             integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
             crossorigin=""></script>
+    <!-- https://github.com/elmarquis/Leaflet.GestureHandling -->
+    <link rel="stylesheet" href="/css/leaflet-gesture-handling.min.css" />
+    <script src="/js/leaflet-gesture-handling.min.js"></script>
     <script src="/js/ride-map.js"></script>
 {% endblock %}
 {% block beforenav %}
@@ -250,6 +263,17 @@ <h3>
                 {% endif %}
             </div>
             <div id="map">
+                <div class="leaflet-control-container d-none d-xl-block">
+                    <div class="leaflet-top leaflet-right">
+                        <div class="leaflet-bar leaflet-control">
+                            <a id="expand-map"
+                               class="leaflet-control-expand"
+                               href="#"
+                               role="button"
+                               title="Toggle full size">↹</a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {# djlint:off H021 #}
@@ -299,7 +323,13 @@ <h3>
 {% block foot %}
     <script>
 $(() => {
-    create_ride_map('map', '/api/all/trackmap.json');
+    const map = create_ride_map('map', '/api/all/trackmap.json');
+    $('#expand-map').click(e => {
+      e.preventDefault();
+      $('body').toggleClass('map-expanded');
+      map.invalidateSize();
+      $('#map')[0].scrollIntoView({block: 'center'});
+    })
 });
     </script>
 {% endblock %}

freezing/web/templates/pointless/hashtag.html

@@ -7,6 +7,9 @@
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
             integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
             crossorigin=""></script>
+    <!-- https://github.com/elmarquis/Leaflet.GestureHandling -->
+    <link rel="stylesheet" href="/css/leaflet-gesture-handling.min.css" />
+    <script src="/js/leaflet-gesture-handling.min.js"></script>
     <script src="/js/ride-map.js"></script>
 {% endblock %}
 {% block content %}
@@ -124,7 +127,7 @@ <h3 class="accordion-header">
     <script type="text/javascript">
 $(function() {
 	$('#map-button').one('click', () => {
-		create_ride_map('map', '/api/all/trackmap.json?hashtag={{data.hashtag_notag}}');
+		create_ride_map('map', '/api/all/trackmap.json?hashtag={{data.hashtag_notag}}', null, true);
 	});
 });
     </script>

freezing/web/templates/user/rides.html

@@ -12,6 +12,9 @@
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
             integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
             crossorigin=""></script>
+    <!-- https://github.com/elmarquis/Leaflet.GestureHandling -->
+    <link rel="stylesheet" href="/css/leaflet-gesture-handling.min.css" />
+    <script src="/js/leaflet-gesture-handling.min.js"></script>
     <script src="/js/ride-map.js"></script>
     <script type="text/javascript">
       // Load the Visualization API and the corechart package.
@@ -83,6 +86,14 @@ <h2 class="clearfix">
                    role="tab"
                    data-bs-toggle="tab">My Rides</a>
             </li>
+            <li role="presentation" class="nav-item">
+                <a href="#map"
+                   id="map-link"
+                   class="nav-link"
+                   aria-controls="map"
+                   role="tab"
+                   data-bs-toggle="tab">My Ride Map</a>
+            </li>
             <li role="presentation" class="nav-item">
                 <a href="#profile"
                    class="nav-link"
@@ -97,14 +108,6 @@ <h2 class="clearfix">
                    role="tab"
                    data-bs-toggle="tab">My Weekly Points</a>
             </li>
-            <li role="presentation" class="nav-item">
-                <a href="#map"
-                   id="map-link"
-                   class="nav-link"
-                   aria-controls="map"
-                   role="tab"
-                   data-bs-toggle="tab">My Ride Map</a>
-            </li>
         </ul>
         <!-- Tab panes -->
         <div class="tab-content">
@@ -272,7 +275,7 @@ <h2 class="clearfix">
 		});
 
 		$('#map-link').one('click', () => {
-			create_ride_map('map', '/api/my/trackmap.json', 'red');
+			create_ride_map('map', '/api/my/trackmap.json', 'red', true);
 		});
 	});
     </script>

freezing/web/views/general.py

@@ -38,16 +38,13 @@ class AccessDenied(RuntimeError):
 # When a hashtag has a "/pointless/*" route instead of "/pointless/hashtag/*".
 # Many of the generic leaderboards ought to be pure hashtag leaderboards.
 custom_tag_pages = {
-    "adulting": "generic/adulting",
     "civilwarmarker": "civilwarhistory",
     "civilwarstreet": "civilwarhistory",
     "coffeeride": "coffeeride",
     "decasleaze": "generic/decasleaze",
     "foodrescue": "foodrescue",
-    "freezingerrands": "generic/adulting",
     "fsrealsuppleride": "generic/suppleride",
     "kidical": "kidmiles",
-    "londonbridge": "generic/londonbridge",
     "rosshillloop": "rosshillloop",
     "withkid": "pointlesskids",
 }

leaderboards/hashtag.yml

@@ -13,6 +13,16 @@ tags:
        find and photograph the vehicles WHILE on a bike ride. Use the hashtag <code>#abc</code> and post to the forum.
     rank_by_rides: True
 
+  - tag: adulting
+    alt: freezingerrands
+    name: Errandeering
+    description: |
+      Pointless prize for doing stuff on your bike you might be tempted to do in your car.
+      Grocery store, post office, pharmacy dentist, manicurist, gym, farmers market, dry cleaning, bike shop, library, etc.
+      Commutes, coffee rides, kid pick up / drop off do not count.
+      Tag rides with <code>#adulting</code> or <code>#freezingerrands</code>.
+    rank_by_rides: True
+
   - tag: bob
     name: Baby on Board
     description: |
@@ -143,6 +153,13 @@ tags:
       to the public. Tag with <code>#LakeFinder</code>.
     rank_by_rides: True
 
+  - tag: londonbridge
+    name: London Bridge
+    description: |
+      Number of rides where you fell 😨🚲😱 (tagged with <code>#londonbridge</code>).
+    url: https://www.bikearlingtonforum.com/forums/topic/ww-london-bridge-pointless-prize-log/
+    rank_by_rides: True
+
   - tag: oldGeorge
     name: Old Georgetown Bike Lane
     description: |