Enhance map rendering logic and user feedback
Publish telemt-api gateway Docker image / test (push) Successful in 24s
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m14s

- Introduced a new state for map status to provide user feedback on map loading and rendering issues.
- Implemented retry logic for rendering the map, improving robustness when Leaflet or map layers are not initialized.
- Added visual indicators for map status, enhancing user experience by clearly communicating the state of the map and its data.
This commit is contained in:
Denozordec
2026-03-30 15:47:19 +07:00
parent 3703421dd8
commit e259cc09e7
+18 -1
View File
@@ -23,6 +23,8 @@
let map: Leaflet.Map | null = null; let map: Leaflet.Map | null = null;
let markersLayer: Leaflet.LayerGroup | null = null; let markersLayer: Leaflet.LayerGroup | null = null;
let mapPointsCount = $state(0); let mapPointsCount = $state(0);
let mapStatus = $state<string | null>(null);
let renderAttempts = $state(0);
async function ensureLeaflet() { async function ensureLeaflet() {
if (leaflet) return; if (leaflet) return;
@@ -52,6 +54,7 @@
function renderMap() { function renderMap() {
initMap(); initMap();
mapPointsCount = 0; mapPointsCount = 0;
mapStatus = null;
// GeoIP для City сейчас идёт в координатах уровня city, // GeoIP для City сейчас идёт в координатах уровня city,
// поэтому группируем по округлённым координатам. // поэтому группируем по округлённым координатам.
@@ -106,11 +109,20 @@
mapPointsCount = points.length; mapPointsCount = points.length;
if (points.length === 0) { if (points.length === 0) {
map?.invalidateSize(); map?.invalidateSize();
mapStatus = 'Нет точек с валидными координатами';
return; return;
} }
// Если карта/слой ещё не готовы — хотя бы покажем счётчик точек. // Если карта/слой ещё не готовы — хотя бы покажем счётчик точек.
if (!leaflet || !map || !markersLayer) return; if (!leaflet || !map || !markersLayer) {
mapStatus = !leaflet ? 'Leaflet не загружен' : !map ? 'Leaflet map не создан' : 'LayerGroup не готов';
if (renderAttempts < 5) {
renderAttempts++;
setTimeout(() => renderMap(), 150);
}
return;
}
renderAttempts = 0;
markersLayer.clearLayers(); markersLayer.clearLayers();
for (const p of points) { for (const p of points) {
@@ -221,6 +233,11 @@
Точек на карте: {mapPointsCount} Точек на карте: {mapPointsCount}
</div> </div>
{/if} {/if}
{#if mapStatus}
<div class="px-4 pb-3 pt-0 text-xs text-muted-foreground">
{mapStatus}
</div>
{/if}
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
{:else} {:else}