Enhance map rendering logic and user feedback
- 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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user