filters saved in the URL

.gitignore

@@ -2,3 +2,4 @@
 /result
 *.db
 .direnv/
+/prixdugaz

go.mod

@@ -1,4 +1,4 @@
-module github.com/polen/prixdugaz
+module github.com/Polensky/prixdugaz
 
 go 1.25.0
 

static/map.js

@@ -4,20 +4,54 @@
 (function () {
   'use strict';
 
-  let currentFuel   = 'regular';
-  let currentRegion = '';
-  let clusterMode   = 'avg'; // 'min' | 'avg' | 'max'
-  let showCostco    = true;
+  // ── URL param helpers ──────────────────────────────────────
+  function getParams() {
+    return new URLSearchParams(window.location.search);
+  }
+
+  function updateURL() {
+    const p = new URLSearchParams();
+    if (currentFuel   !== 'regular') p.set('fuel', currentFuel);
+    if (currentRegion !== '')        p.set('region', currentRegion);
+    if (clusterMode   !== 'avg')     p.set('cluster', clusterMode);
+    if (!showCostco)                 p.set('costco', '0');
+    const slider = document.getElementById('price-slider');
+    if (slider && parseFloat(slider.value) < parseFloat(slider.max)) {
+      p.set('price', slider.value);
+    }
+    if (map) {
+      const c = map.getCenter();
+      p.set('lat',  c.lat.toFixed(5));
+      p.set('lng',  c.lng.toFixed(5));
+      p.set('zoom', map.getZoom());
+    }
+    const qs = p.toString();
+    history.replaceState(null, '', qs ? '?' + qs : window.location.pathname);
+  }
+
+  // Read initial state from URL params (fall back to defaults).
+  const _p          = getParams();
+  let currentFuel   = ['regular','super','diesel'].includes(_p.get('fuel')) ? _p.get('fuel') : 'regular';
+  let currentRegion = _p.get('region') || '';
+  let clusterMode   = ['min','avg','max'].includes(_p.get('cluster')) ? _p.get('cluster') : 'avg';
+  let showCostco    = _p.get('costco') !== '0';
+  let _initPrice    = _p.has('price') ? parseFloat(_p.get('price')) : null;
+  let _initLat      = _p.has('lat')   ? parseFloat(_p.get('lat'))   : null;
+  let _initLng      = _p.has('lng')   ? parseFloat(_p.get('lng'))   : null;
+  let _initZoom     = _p.has('zoom')  ? parseInt(_p.get('zoom'), 10) : null;
+
   let allStations   = window.__stations || [];
   let allMarkers    = [];
   let visibleSet    = new Set();
   let minPrice = 0, maxPrice = 300;
   let sliderTimer   = null;
+  let mapMoveTimer  = null;
   const stationDeltas = window.__deltas || {};
 
   // ── Map setup (deferred to init section below) ─────────────
   let map;
   let clusterGroup;
+  let locateMarker = null;
 
   // ── Colour helpers ─────────────────────────────────────────
   function priceColor(price, min, max) {
@@ -220,13 +254,14 @@
     document.getElementById('region-select').addEventListener('change', function () {
       currentRegion = this.value;
       rebuildMarkers(true);
+      updateURL();
     });
 
     document.getElementById('price-slider').addEventListener('input', function () {
       const val = parseFloat(this.value);
       document.getElementById('slider-label').textContent = val.toFixed(1) + '¢/L';
       clearTimeout(sliderTimer);
-      sliderTimer = setTimeout(() => applyPriceFilter(val), 80);
+      sliderTimer = setTimeout(() => { applyPriceFilter(val); updateURL(); }, 80);
     });
 
     document.querySelectorAll('.cluster-btn').forEach(btn => {
@@ -236,6 +271,7 @@
         document.querySelectorAll('.cluster-btn').forEach(b =>
           b.classList.toggle('active', b.dataset.mode === clusterMode));
         if (allStations.length) clusterGroup.refreshClusters();
+        updateURL();
       });
     });
 
@@ -246,14 +282,39 @@
         document.querySelectorAll('.fuel-btn[data-fuel]').forEach(b =>
           b.classList.toggle('active', b.dataset.fuel === currentFuel));
         rebuildMarkers();
+        updateURL();
       });
     });
 
     document.getElementById('costco-toggle').addEventListener('change', function () {
       showCostco = this.checked;
       rebuildMarkers();
+      updateURL();
     });
 
+    // ── Locate-me button ───────────────────────────────────
+    var locateBtn = document.getElementById('locate-btn');
+    if (locateBtn) {
+      locateBtn.addEventListener('click', function () {
+        if (!navigator.geolocation) return;
+        navigator.geolocation.getCurrentPosition(function (pos) {
+          var latlng = [pos.coords.latitude, pos.coords.longitude];
+          map.setView(latlng, 14);
+          if (locateMarker) {
+            locateMarker.setLatLng(latlng);
+          } else {
+            var dotIcon = L.divIcon({
+              html: '<div class="locate-dot"><div class="locate-dot-pulse"></div><div class="locate-dot-inner"></div></div>',
+              className: '',
+              iconSize: [20, 20],
+              iconAnchor: [10, 10],
+            });
+            locateMarker = L.marker(latlng, { icon: dotIcon, pane: 'locatePane' }).addTo(map);
+          }
+        });
+      });
+    }
+
     // ── Mobile filter panel toggle ─────────────────────────
     var filterToggle  = document.getElementById('filter-toggle');
     var sliderPanel   = document.getElementById('slider-panel');
@@ -282,10 +343,18 @@
   const loadingEl = document.getElementById('loading');
   try {
     // Create map and cluster group now that the DOM is ready.
-    map = L.map('map', { zoomControl: false }).setView([46.8, -71.2], 7);
+    const initCenter = (_initLat !== null && _initLng !== null) ? [_initLat, _initLng] : [46.8, -71.2];
+    const initZoom   = _initZoom !== null ? _initZoom : 7;
+    map = L.map('map', { zoomControl: false }).setView(initCenter, initZoom);
+    map.createPane('locatePane').style.zIndex = 650;
     L.control.zoom({ position: 'topright' }).addTo(map);
+    var lastUpdatedText = (document.getElementById('last-updated') || {}).textContent || '';
+    var lastUpdatedMobile = document.getElementById('last-updated-mobile');
+    if (lastUpdatedMobile && lastUpdatedText) {
+      lastUpdatedMobile.textContent = lastUpdatedText;
+    }
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> | Données: <a href="https://regieessencequebec.ca">Régie de l\'énergie du Québec</a>',
+      attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> | Données: <a href="https://regieessencequebec.ca">Régie de l\'énergie du Québec</a>' + (lastUpdatedText ? ' | ' + lastUpdatedText : ''),
       maxZoom: 18,
     }).addTo(map);
 
@@ -324,11 +393,46 @@
 
     loadingEl.style.display = 'none';
 
+    // Apply initial state from URL params to UI controls.
+    if (currentFuel !== 'regular') {
+      document.querySelectorAll('.fuel-btn[data-fuel]').forEach(b =>
+        b.classList.toggle('active', b.dataset.fuel === currentFuel));
+    }
+    if (clusterMode !== 'avg') {
+      document.querySelectorAll('.cluster-btn').forEach(b =>
+        b.classList.toggle('active', b.dataset.mode === clusterMode));
+    }
+    if (!showCostco) {
+      const ct = document.getElementById('costco-toggle');
+      if (ct) ct.checked = false;
+    }
+    if (currentRegion) {
+      const rs = document.getElementById('region-select');
+      if (rs) rs.value = currentRegion;
+    }
+
     rebuildMarkers();
+
+    // Override slider value from URL after rebuildMarkers set it.
+    if (_initPrice !== null) {
+      const slider = document.getElementById('price-slider');
+      if (slider && _initPrice < parseFloat(slider.max)) {
+        slider.value = _initPrice;
+        document.getElementById('slider-label').textContent = _initPrice.toFixed(1) + '¢/L';
+        applyPriceFilter(_initPrice, false);
+      }
+    }
+
     map.addLayer(clusterGroup);
 
     bindControls();
 
+    // Update URL on map move/zoom.
+    map.on('moveend zoomend', function () {
+      clearTimeout(mapMoveTimer);
+      mapMoveTimer = setTimeout(updateURL, 200);
+    });
+
     // Expose for use after htmx page-swap back to the map page.
     window.__mapInvalidate = function () {
       setTimeout(() => map.invalidateSize(), 50);

static/style.css

@@ -13,7 +13,7 @@
 }
 
 /* ── Layout ─────────────────────────────────────────── */
-html, body { height: 100%; margin: 0; padding: 0; }
+html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
 
 /* ── Top nav ─────────────────────────────────────────── */
 #topnav {
@@ -47,6 +47,17 @@ html, body { height: 100%; margin: 0; padding: 0; }
   color: var(--primary-foreground);
 }
 #topnav nav a svg { flex-shrink: 0; }
+.github-link {
+  margin-left: auto;
+  display: flex; align-items: center;
+  color: var(--muted-foreground);
+  padding: 5px 6px; border-radius: 6px;
+  transition: background 0.12s, color 0.12s;
+}
+.github-link:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
 
 /* ── App shell ───────────────────────────────────────── */
 #app {
@@ -59,7 +70,7 @@ html, body { height: 100%; margin: 0; padding: 0; }
 }
 
 /* ── Map page ────────────────────────────────────────── */
-#page-map { display: flex; flex-direction: column; flex: 1; position: relative; }
+#page-map { display: flex; flex-direction: column; flex: 1; position: relative; overflow: hidden; }
 #map { flex: 1; min-height: 0; }
 
 /* Slider + fuel panel */
@@ -85,6 +96,11 @@ html, body { height: 100%; margin: 0; padding: 0; }
 }
 #visible-count { margin-top: 6px; font-size: 11px; color: var(--muted-foreground); }
 
+/* Last-updated: only shown inside the mobile filter drawer */
+#last-updated-mobile {
+  display: none;
+}
+
 /* Map overlay panels — sit above the Leaflet tiles */
 .map-panel {
   background: var(--card);
@@ -117,15 +133,54 @@ html, body { height: 100%; margin: 0; padding: 0; }
   font-size: 10px; color: var(--muted-foreground);
 }
 
-#last-updated {
-  position: absolute; bottom: 24px; right: 8px;
-  padding: 5px 10px;
-  z-index: 1000; font-size: 11px;
-  color: var(--muted-foreground);
-}
-
 .pin-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
 
+#locate-btn {
+  position: absolute; bottom: 34px; right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  cursor: pointer;
+  z-index: 1000;
+}
+#locate-btn:hover { background: var(--muted); }
+
+/* Locate-me blue dot + pulse ring */
+.locate-dot {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.locate-dot-inner {
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: #2563eb;
+  border: 2.5px solid #fff;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+  z-index: 1;
+}
+.locate-dot-pulse {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #2563eb;
+  opacity: 0.35;
+  animation: locate-pulse 1.8s ease-out infinite;
+}
+@keyframes locate-pulse {
+  0%   { transform: scale(0.6); opacity: 0.5; }
+  100% { transform: scale(2.2); opacity: 0; }
+}
+
 .cluster-info-tip {
   position: relative;
   display: inline-flex;
@@ -265,6 +320,9 @@ html, body { height: 100%; margin: 0; padding: 0; }
 @media (max-width: 768px) {
   #filter-toggle { display: flex; }
 
+  #filter-toggle,
+  #locate-btn { bottom: 24px; }
+
   #slider-panel {
     position: fixed;
     top: auto; left: 0; right: 0; bottom: 0;
@@ -317,4 +375,15 @@ html, body { height: 100%; margin: 0; padding: 0; }
   .cluster-info-tip { display: none; }
   .cluster-hint { display: block; }
   .cluster-row { margin-bottom: 0; }
+
+  /* Hide Leaflet attribution bar on mobile */
+  .leaflet-control-attribution { display: none; }
+
+  /* Show last-updated inside the filter drawer */
+  #last-updated-mobile {
+    display: block;
+    margin-top: 6px;
+    font-size: 11px;
+    color: var(--muted-foreground);
+  }
 }

templates/layout.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Essence Québec</title>
+  <title>Prix du Gaz</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
@@ -51,6 +51,11 @@
           Statistiques
         </a>
       </nav>
+      <a href="https://github.com/Polensky/prixdugaz" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="GitHub">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.744 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
+        </svg>
+      </a>
     </header>
 
     <!-- ── Content area (htmx swap target) ── -->

templates/map.html

@@ -55,6 +55,7 @@
       <span id="slider-max">-</span>
     </div>
     <div id="visible-count"></div>
+    <div id="last-updated-mobile"></div>
     <div id="legend">
       <div class="legend-header" id="legend-title">Régulier (¢/L)</div>
       <div class="legend-gradient"></div>
@@ -66,7 +67,10 @@
   </div>
 
   <div id="filter-backdrop"></div>
-  <div id="last-updated" class="map-panel">{{.LastUpdated}}</div>
+  <button id="locate-btn" aria-label="Ma position" title="Ma position">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
+  </button>
+  <div id="last-updated" hidden>{{.LastUpdated}}</div>
 </div>
 
 <script>