ISSUE #1484: Show route info on heatmap

Author: robiningelbrecht

package-lock.json

@@ -6,9 +6,5 @@
     "tailwindcss": "^4.1.13",
     "webpack": "^5.102.1",
     "webpack-cli": "^6.0.1"
-  },
-  "dependencies": {
-    "@turf/helpers": "^7.3.1",
-    "@turf/point-to-line-distance": "^7.3.1"
   }
 }

package.json

@@ -73,6 +73,10 @@
         filter: grayscale(100%) brightness(75%);
     }
 
+    .leaflet-popup-content-wrapper .leaflet-popup-content{
+        @apply text-base! m-0! leading-none!;
+    }
+
     .leaflet-control--fly-to-places {
         @apply rounded-sm border-2 border-black/[.3] bg-white bg-clip-padding divide-y divide-grey-yo;
 

public/css/dist/tailwind.min.css

@@ -1063,6 +1063,9 @@
       max-width: 96rem;
     }
   }
+  .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
   .-mx-4 {
     margin-inline: calc(var(--spacing) * -4);
   }
@@ -1866,9 +1869,6 @@
   .w-\[200px\] {
     width: 200px;
   }
-  .w-\[300px\] {
-    width: 300px;
-  }
   .w-\[rem\] {
     width: rem;
   }
@@ -1881,9 +1881,6 @@
   .w-full {
     width: 100%;
   }
-  .w-md {
-    width: var(--container-md);
-  }
   .max-w-\(--breakpoint-sm\) {
     max-width: var(--breakpoint-sm);
   }
@@ -4427,6 +4424,13 @@
     -webkit-filter: grayscale(100%) brightness(75%);
     filter: grayscale(100%) brightness(75%);
   }
+  .leaflet-popup-content-wrapper .leaflet-popup-content {
+    margin: calc(var(--spacing) * 0) !important;
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+    --tw-leading: 1 !important;
+    line-height: 1 !important;
+  }
   .leaflet-control--fly-to-places {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;

public/css/tailwind.css

@@ -1,6 +1,5 @@
 import {DataTableStorage, FilterManager} from "../filters";
-import { pointToLineDistance } from "@turf/point-to-line-distance";
-import { point, lineString } from "@turf/helpers";
+import { pointToLineDistance, point, lineString } from "../../libraries/turf";
 
 class HeatmapDrawer {
     constructor(wrapper, config, modalManager) {
@@ -80,9 +79,9 @@ class HeatmapDrawer {
         });
 
         const html = `
-            <div class="max-h-[200px] overflow-y-auto">
-                <div class="text-sm">${nearby.length} nearby route(s):</div>
-                 <ul class="divide-default w-[300px] divide-y divide-gray-200">
+            <div class="m-4 text-sm max-h-[200px] overflow-y-auto">
+                <div class="font-medium">${nearby.length} nearby route(s):</div>
+                 <ul class="divide-default divide-y divide-gray-200">
                     ${nearby.map(entry => `
                      <li class="py-2">
                       <a href="#" class="block truncate font-medium text-blue-600 hover:underline" data-model-content-url="/activity/${entry.route.id}.html"> ${entry.route.name} </a>