From bddb8916ba651ad9d34cf863342afa6c124f998b Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Fri, 27 Feb 2026 11:25:04 -0500
Subject: [PATCH] =?UTF-8?q?fix(map):=20evitar=20dibujado=20residual=20de?=
 =?UTF-8?q?=20marcadores=20cuando=20se=20limpia=20el=20mapa=20r=C3=A1pidam?=
 =?UTF-8?q?ente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/composables/useFlujoPrincipal.ts | 7 +++++++
 frontend/src/views/MapView.vue                | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend/src/composables/useFlujoPrincipal.ts b/frontend/src/composables/useFlujoPrincipal.ts
index 6c41e80..634ca59 100644
--- a/frontend/src/composables/useFlujoPrincipal.ts
+++ b/frontend/src/composables/useFlujoPrincipal.ts
@@ -3,6 +3,7 @@ import { useMapState } from './useMapState'
 import { useDirectionsRoute } from './useDirectionsRoute'
 import { useParadaCercana } from './useParadaCercana'
 import type { BusStop } from '@/types'
+import { useRouteStore } from '@/stores/route'
 
 export const useFlujoPrincipal = () => {
     const { limpiarMapa, registrarMarker } = useMapState()
@@ -80,6 +81,12 @@ export const useFlujoPrincipal = () => {
                 return;
             }
 
+            const routeStore = useRouteStore()
+            if (routeStore.selectedRouteId !== _ruta.id) {
+                console.log('Abortando flujo: el mapa fue limpiado o cambió de ruta.')
+                return;
+            }
+
             // ── PASO 5: Dibujar tramo relevante (azul vivo) ───────
             const idx = paradasFormateadas.findIndex(p => p.longitud === paradaCercanaFound.longitude && p.latitud === paradaCercanaFound.latitude)
             if (idx !== -1) {
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 5141d48..adc9c93 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -439,6 +439,12 @@ async function updateMapMarkers() {
   // Llamar al procesador de flujo principal, lo cual limpia el mapa y centra.
   await procesarSeleccionDeRuta(selectedRouteObj, stops as BusStop[], map.value);
   
+  // ⛔ ABORTAR SI EL USUARIO LIMPIÓ EL MAPA MIENTRAS DIBUJÁBAMOS
+  if (routeStore.selectedRouteId !== currentRequestRouteId) {
+    console.log('Abortando dibujado de paradas (la ruta fue limpiada o cambiada)');
+    return;
+  }
+
   // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa
   const { paradaCercana } = useParadaCercana();