localisation

static/map.js

@@ -255,6 +255,29 @@
       rebuildMarkers();
     });
 
+    // ── 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');
@@ -284,44 +307,11 @@
   try {
     // Create map and cluster group now that the DOM is ready.
     map = L.map('map', { zoomControl: false }).setView([46.8, -71.2], 7);
+    map.createPane('locatePane').style.zIndex = 650;
     L.control.zoom({ position: 'topright' }).addTo(map);
-
+    var lastUpdatedText = (document.getElementById('last-updated') || {}).textContent || '';
-    // ── Locate-me control ──────────────────────────────────
-    var LocateControl = L.Control.extend({
-      options: { position: 'bottomright' },
-      onAdd: function () {
-        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
-        var btn = L.DomUtil.create('a', '', container);
-        btn.href = '#';
-        btn.title = 'Ma position';
-        btn.setAttribute('role', 'button');
-        btn.setAttribute('aria-label', 'Ma position');
-        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:auto"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><circle cx="12" cy="12" r="8" stroke-dasharray="2 4"/></svg>';
-        L.DomEvent.on(btn, 'click', function (e) {
-          L.DomEvent.preventDefault(e);
-          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 {
-              locateMarker = L.circleMarker(latlng, {
-                radius: 10,
-                color: '#fff',
-                weight: 3,
-                fillColor: '#2563eb',
-                fillOpacity: 1,
-              }).addTo(map);
-            }
-          });
-        });
-        return container;
-      },
-    });
-    new LocateControl().addTo(map);
     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);
 

static/style.css

@@ -128,15 +128,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;

templates/map.html

@@ -66,7 +66,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>