Saltar a contenido

🗺️ Proyecto Final – Web Mapping Interactivo tipo “Marketplace Geográfico”

Objetivo

Desarrollar una aplicación web de cartografía interactiva que combine:

  • Visualización espacial (mapa interactivo).

  • Visualización estructurada (listado/cuadrícula de elementos).

  • Filtrado dinámico.

  • Navegación entre vista general y vista detalle.

La experiencia de usuario debe ser comparable conceptualmente a plataformas como Airbnb (sin necesidad de replicar diseño).

Temática (libre)

Cada estudiante deberá elegir una temática geolocalizada. Ejemplos:

  • Alojamientos turísticos

  • Inmuebles en venta

  • Restaurantes

  • Espacios de coworking

  • Sitios de escalada

  • Bibliotecas

  • Museos

  • Árboles singulares

  • Proyectos arquitectónicos

  • Instalaciones deportivas

Requisito: los datos deben estar en GeoJSON o Vector Tiles y contener propiedades suficientes para permitir filtrado.

Requisitos funcionales obligatorios

Página principal (Home)

Debe contener:

Layout dividido

  • Un panel con:
    • Cuadrícula o listado de elementos.
  • Un mapa interactivo.

El layout debe ser responsive.

Sincronización mapa ↔ listado

Debe implementarse:

  1. Hover sobre elemento del listado

    • El elemento correspondiente en el mapa debe:

      • Cambiar estilo (color, tamaño o símbolo)

      • O mostrar un tooltip temporal

  2. Click sobre elemento del listado

    • Redirige a la página de detalle del elemento.

  3. Click sobre elemento del mapa

    • Mostrar popup con:

      • Nombre

      • Imagen (miniatura opcional)

      • Descripción corta

    • Si se hace click dentro del popup → navegar a la página de detalle.

Filtros dinámicos

Debe existir un sistema de filtros que afecte simultáneamente:

  • El listado

  • Los elementos visibles en el mapa

Ejemplos:

  • Rango de precio

  • Categoría

  • Tipo

  • Rating

  • Provincia / ciudad

  • Dificultad (si es escalada)

  • Etc.

Los filtros deben aplicarse:

  • Sin recargar la página.

Página de detalle del elemento

Cada elemento debe tener su propia página.

Debe incluir:

  • Título

  • Una o varias imágenes

  • Descripción extensa

  • Información adicional estructurada

  • Mapa centrado en la localización del elemento

  • Enlace para volver a la página principal

El mapa de detalle debe:

  • Mostrar marcador o geometría del elemento.

  • Estar correctamente centrado y con zoom apropiado.

Requisitos técnicos mínimos

Datos

  • Formato: GeoJSON o Vector tiles

  • Mínimo: 20 elementos

  • Debe contener propiedades adecuadas para:

    • Filtrado

    • Visualización en listado

    • Visualización en popup

    • Página de detalle

Tecnologías sugeridas

  • HTML5

  • CSS (Flexbox o Grid)

  • JavaScript

  • Librería de mapas:

    • MapLibre GL JS (recomendado)

    • Leaflet

Opcional:

  • Bootstrap

  • Tailwind

  • Vite

Arquitectura mínima esperada

Se espera:

  • Separación clara de:

    • Datos

    • Lógica

    • Presentación

  • Código organizado en módulos.

  • No todo en un único archivo JS.

  • Uso correcto de eventos.

  • No duplicar lógica de filtrado.

🧮 RÚBRICA DE EVALUACIÓN (3 pts)

1️⃣ Funcionalidad obligatoria (1,8 puntos)

1.1 Sincronización mapa ↔ listado (0,7 puntos)

Debe existir:

  • Hover listado → resaltado en mapa
  • Click listado → navegación a detalle
  • Click mapa → popup con enlace
Nivel Descripción Puntuación
Excelente Implementación completa y consistente 0,7
Adecuado Funciona con pequeñas inconsistencias 0,5
Parcial Solo funciona en una dirección 0,3
Deficiente No funcional 0

1.2 Sistema de filtros dinámicos (0,7 puntos)

Debe afectar simultáneamente:

  • Mapa
  • Listado

Sin recarga de página.

Nivel Descripción Puntuación
Excelente Filtrado coherente y robusto 0,7
Adecuado Funciona pero con limitaciones 0,5
Parcial Solo afecta a mapa o listado 0,3
Deficiente No funcional 0

1.3 Página de detalle (0,4 puntos)

Debe incluir:

  • Imagen(es)
  • Descripción
  • Mapa centrado
  • Enlace de retorno
Nivel Descripción Puntuación
Completa Bien integrada y funcional 0,4
Básica Funcional pero simple 0,25
Incompleta Faltan elementos clave 0

2️⃣ UX y calidad de interacción (0,6 puntos)

Se evalúa:

  • Claridad visual
  • Estados hover / activo
  • Diseño usable
  • Responsive real
  • Coherencia visual mapa ↔ listado
Nivel Descripción Puntuación
Excelente UX clara y cuidada 0,6
Correcta Funcional pero básica 0,4
Mejorable Usable pero poco trabajada 0,2
Deficiente Problemas graves de usabilidad 0

3️⃣ Calidad técnica mínima (0,3 puntos)

Se evalúa:

  • Código comprensible
  • Sin errores en consola
  • No duplicación innecesaria de lógica
  • Uso razonable de la librería cartográfica
Nivel Descripción Puntuación
Correcto Código limpio y sin errores 0,3
Aceptable Funciona pero mejorable 0,2
Básico Desorganizado pero operativo 0,1
Deficiente Problemas técnicos relevantes 0

4️⃣ Valor añadido / Extensiones (0,3 puntos)

Puntuación reservada para estudiantes que vayan más allá de lo exigido.

Ejemplos:

  • Clustering dinámico
  • Filtro espacial por bounding box
  • Ordenación dinámica del listado
  • Animaciones suaves
  • Persistencia de estado
  • Mejora visual avanzada
  • Carga desde API
  • Optimización de rendimiento
  • Accesibilidad trabajada
Nivel Descripción Puntuación
Relevante Extensión significativa y bien implementada 0,3
Menor Mejora adicional simple 0,1
No aplica Sin mejoras adicionales 0

📊 Resumen de ponderación

Bloque Puntos
Funcionalidad 1,8
UX / Interacción 0,6
Técnica mínima 0,3
Valor añadido 0,3
TOTAL 3,0

🎯 Para obtener la máxima puntuación (3,0)

El proyecto debe:

  • Cumplir todos los requisitos funcionales sin fallos.
  • Tener filtros coherentes que afecten mapa y listado.
  • Presentar una experiencia de usuario clara y cuidada.
  • No mostrar errores en consola.
  • Incorporar al menos una mejora relevante respecto a lo exigido.