DOCUMENTACIÓN

Cómo funciona geosevilla

Geosevilla reúne imágenes, panorámicas 360° y ortoimágenes del territorio de Sevilla, Valle del Cauca, y las ubica sobre un mapa. Esta guía recorre cada pantalla y explica las tecnologías detrás de ellas.

Mapa

La página de inicio es el explorador. Cada punto es un registro georreferenciado y su color indica el tipo de medio: imágenes 2D, vuelos de dron, ortofotos y recorridos 360°. La leyenda inferior cuenta los registros que cumplen los filtros, y el control de tiempo limita el mapa hasta un año de captura.

Panel de filtros

El panel flotante de la derecha permite buscar por título o lugar y filtrar por tipo de medio, tema y año de captura. Su lista muestra solo los registros que están dentro del encuadre actual del mapa y se actualiza al mover o acercar. Se puede ocultar con el botón lateral para dejar el mapa completo, y los filtros quedan guardados en la dirección de la página para compartir una vista.

Visor de un registro

Al elegir un registro se abre el visor sobre el mapa, con navegación al anterior y al siguiente. El panel lateral muestra código, descripción, lugar, fecha, autoría y temas, y enlaza a la ficha completa.

Visor de una fotografía del casco urbano sobre el mapa, con el panel lateral de detalle del registro. — Visor de imagen con el detalle del registro y el mapa debajo.

Capas y comparación

El botón Capas permite superponer una ortoimagen (2009 o 2026) sobre el mapa base y cambiar entre calles y satélite. En modo Comparar se enfrentan dos ortoimágenes con un divisor que se arrastra, lado a lado o arriba y abajo, para ver los cambios del casco urbano entre ambas fechas.

Menú de Capas con las opciones Ninguna, Ortoimagen 2009 y Ortoimagen 2026, y el selector de mapa base. — Menú de capas: ortoimágenes y mapa base.

Modo Comparar con el divisor sobre el mapa, etiquetas Antes 2009 y Después 2026 y las opciones de dirección. — Comparación de ortoimágenes 2009 y 2026 con divisor móvil.

Archivo y fichas

El archivo es el catálogo completo en tarjetas. Se busca por título, lugar o código, se filtra por formato, tema y año, y se ordena por fecha. Cada código sigue el patrón GS-TIPO-AÑO-NÚMERO.

Página Archivo con buscador, filtros por formato, tema y año, y tarjetas de registros. — Archivo: búsqueda, filtros y tarjetas.

La ficha de un registro presenta el medio con su visor propio, los datos de captura y una mini-localización. Las panorámicas 360° se abren quietas y se arrastran para mirar alrededor; el botón de reproducir activa la rotación automática si se desea.

Ficha de una panorámica 360° del Mirador Alto de la Cruz con controles de zoom, reproducción y pantalla completa. — Ficha de un recorrido 360° con su visor interactivo.

Rutas guiadas

Las rutas agrupan registros en un recorrido con un texto que explica qué mirar en cada parada. Sirven como puerta de entrada al archivo para quien no sabe por dónde empezar.

Detalle de una ruta con sus paradas y el texto de cada una. — Una ruta con sus paradas.

Georreferenciación

La herramienta, en /georreferenciar, es de uso interno para el equipo de curaduría. Muestra la imagen a la izquierda y el mapa en el centro; el inspector de la derecha permite:

Editar el título que verá el público, sin tocar el archivo de la imagen.
Ubicar el registro en el mapa o arrastrar su marcador, e indicar la precisión: exacta, aproximada o estimada.
Definir la orientación de la cámara para dibujar el campo de visión.
Guardar de inmediato con Guardar ahora; además hay guardado automático tras cada cambio.
Importar y exportar los datos como GeoJSON o JSON.

Herramienta de georreferenciación con la imagen, el mapa con el campo de visión y el inspector con título, ubicación y orientación. — Herramienta de georreferenciación.

Tecnologías

Todo el código se apoya en herramientas libres, salvo el hospedaje y la base de datos administrada.

APLICACIÓN

Next.js 16 (App Router): Rutas, renderizado en servidor y acciones de servidor.
React 19 y TypeScript: Interfaz y tipado de todo el código.
Tailwind CSS 4: Estilos y tokens de color para tema claro y oscuro.
shadcn/ui y Base UI: Componentes accesibles: botones, campos, selectores.
next-themes y lucide-react: Cambio de tema e iconografía.

MAPAS Y VISORES

MapLibre GL: Mapa principal, comparador de ortoimágenes y mapa de georreferenciación.
OpenFreeMap (positron): Mapa base vectorial, recoloreado con la paleta de geosevilla.
Teselas ráster (ArcGIS): Ortoimágenes 2009 y 2026 del casco urbano.
Marzipano: Visor de panorámicas 360°.

DATOS

Neon (PostgreSQL): Guarda las georreferencias y los títulos editados.
Drizzle ORM y pg: Esquema y consultas parametrizadas.
Catálogo en código: Registros base, rutas guiadas y capas ráster, versionados con el proyecto.
exifr: Lee metadatos EXIF y GPS al escanear la carpeta de medios.

DESPLIEGUE

Vercel: Hospedaje, páginas estáticas con revalidación bajo demanda.
Vercel Analytics: Métricas de uso sin cookies de seguimiento.

Datos y actualización

Los registros base viven en el código y las imágenes en la carpeta de medios. Un script de escaneo lee los metadatos EXIF (fecha, cámara y GPS cuando existe) para preparar un manifiesto con los archivos nuevos.

Las ubicaciones y los títulos que se editan en la herramienta se guardan en dos tablas de PostgreSQL, georeferences y observation_titles, y el catálogo los aplica sobre los registros base. Al guardar, el sitio invalida sus páginas estáticas para que el mapa, el archivo, las fichas y las rutas muestren el cambio al recargar.

Las ortoimágenes se leen directamente de servicios de teselas, de modo que el sitio no almacena esos mosaicos. El video se incrusta desde Vimeo, YouTube o PeerTube.

Los créditos del proyecto y de las fuentes están en Acerca.