diff --git a/public/index.html b/public/index.html index 95aa33d..22b4ebb 100644 --- a/public/index.html +++ b/public/index.html @@ -22,9 +22,9 @@ - - - + + + @@ -81,27 +81,27 @@
- - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/map.js b/public/map.js index dff58be..0b4c83b 100644 --- a/public/map.js +++ b/public/map.js @@ -175,6 +175,10 @@ if (filters.hashLabels && !_renderingMarkers) renderMarkers(); }); + map.on('resize', () => { + if (!_renderingMarkers) renderMarkers(); + }); + markerLayer = L.layerGroup().addTo(map); routeLayer = L.layerGroup().addTo(map); diff --git a/test-e2e-playwright.js b/test-e2e-playwright.js index 7050b05..dd1df7a 100644 --- a/test-e2e-playwright.js +++ b/test-e2e-playwright.js @@ -298,6 +298,23 @@ async function run() { assert(custJs.includes('Live Map') || custJs.includes('live map') || custJs.includes('📡'), 'Live slider should have live-related label'); }); + // Test 16: Map re-renders markers on resize (decollision recalculates) + await test('Map re-renders on resize', async () => { + await page.goto(`${BASE}/#/map`, { waitUntil: 'networkidle' }); + await page.waitForSelector('.leaflet-container', { timeout: 10000 }); + await page.waitForTimeout(2000); + // Count markers before resize + const beforeCount = await page.$$eval('.leaflet-marker-icon, .leaflet-interactive', els => els.length); + // Resize viewport + await page.setViewportSize({ width: 600, height: 400 }); + await page.waitForTimeout(1500); + // Markers should still be present after resize (re-rendered, not lost) + const afterCount = await page.$$eval('.leaflet-marker-icon, .leaflet-interactive', els => els.length); + assert(afterCount > 0, `Should have markers after resize, got ${afterCount}`); + // Restore + await page.setViewportSize({ width: 1280, height: 720 }); + }); + // Summary const passed = results.filter(r => r.pass).length; const failed = results.filter(r => !r.pass).length;