Estrategia de búsqueda geoespacial que actualiza los resultados automáticamente basándose en las coordenadas de los límites visibles de un mapa.
Al mover o hacer zoom, se dispara una consulta para mostrar solo los elementos contenidos en el área visualizada. Común en aplicaciones de mapas como Airbnb o Google Maps.
// Filtro de bounds con React y Leaflet/Google Maps import { useMap, useMapEvents } from 'react-leaflet'; function BusquedaPorBounds({ onBoundsChange }) { const map = useMap(); useMapEvents({ moveend: () => { const bounds = map.getBounds(); // Obtener coordenadas del área visible const filtro = { norte: bounds.getNorth(), sur: bounds.getSouth(), este: bounds.getEast(), oeste: bounds.getWest() }; onBoundsChange(filtro); }, zoomend: () => { // También al hacer zoom const bounds = map.getBounds(); onBoundsChange({ norte: bounds.getNorth(), sur: bounds.getSouth(), este: bounds.getEast(), oeste: bounds.getWest() }); } }); return null; } // Backend: Query con bounds (PostGIS/PostgreSQL) // SELECT * FROM lugares // WHERE latitud BETWEEN :sur AND :norte // AND longitud BETWEEN :oeste AND :este; // Con Prisma y extensión PostGIS const lugares = await prisma.$queryRaw` SELECT * FROM lugares WHERE ST_Within( ubicacion, ST_MakeEnvelope(${oeste}, ${sur}, ${este}, ${norte}, 4326) ) `; // Checkbox "Buscar mientras muevo el mapa" const [searchAsMove, setSearchAsMove] = useState(true); const handleBoundsChange = (bounds) => { if (searchAsMove) { buscarEnArea(bounds); } };
