diff --git a/static/map.js b/static/map.js index 5b175d8..820ae2a 100644 --- a/static/map.js +++ b/static/map.js @@ -18,6 +18,7 @@ // ── Map setup (deferred to init section below) ───────────── let map; let clusterGroup; + let locateMarker = null; // ── Colour helpers ───────────────────────────────────────── function priceColor(price, min, max) { @@ -284,6 +285,41 @@ // Create map and cluster group now that the DOM is ready. map = L.map('map', { zoomControl: false }).setView([46.8, -71.2], 7); L.control.zoom({ position: 'topright' }).addTo(map); + + // ── 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 = ''; + 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: '© OpenStreetMap | Données: Régie de l\'énergie du Québec', maxZoom: 18,