Mapas narrativos

Los mapas narrativos convierten un proyecto en una narrativa controlada por el desplazamiento. A medida que el lector hace scroll, el mapa vuela entre capítulos y las capas del proyecto pueden aparecer y desaparecer con fundido. La función sigue los patrones habituales de narración de MapLibre. La creación y la presentación en la aplicación se ejecutan localmente, aunque los estilos del mapa base y cualquier imagen de los capítulos se siguen descargando desde sus URLs, y la exportación HTML autónoma carga MapLibre y scrollama desde un CDN.

Abrir el constructor

Elija Proyecto → Mapa narrativo para abrir el constructor. El constructor edita una historia guardada dentro del archivo de proyecto .mappview.json, por lo que viaja con su proyecto.

!!! tip “Pruébelo al instante” Cuando la historia esté vacía, haga clic en Cargar historia de ejemplo para rellenar una gira mundial de cinco ciudades. Pulse Presentar y haga scroll para verla en acción, y después edite o sustituya los capítulos por los suyos.

Configuración de la historia

• Título / Subtítulo / Firma / Pie aparecen en el encabezado y el pie de la presentación. El pie acepta HTML en línea (por ejemplo, enlaces y créditos).
• Tema del panel cambia los paneles de capítulo entre claro y oscuro.
• Mostrar marcadores coloca un marcador en el centro de cada capítulo; elija su color.
• Minimapa insertado muestra un pequeño mapa de vista general en una esquina elegida.

Capítulos

Haga clic en Añadir capítulo para capturar la vista actual del mapa como un capítulo nuevo. Cada capítulo tiene:

• Título, Descripción (se permite HTML en línea) y una URL de imagen opcional.
• Alineación del panel: left, center, right o full.
• Animación del mapa: flyTo, easeTo o jumpTo.
• Ocultar panel mantiene la transición del mapa pero oculta el texto (útil para un momento puramente cartográfico).
• Rotar cámara gira lentamente la vista después de que la transición se asiente.

Use Fijar a la vista actual para volver a capturar la cámara tras desplazar, hacer zoom o inclinando el mapa, y el botón de chincheta del mapa para volar a un capítulo mientras edita. Reordene los capítulos con las flechas y elimínelos con el icono de papelera.

Importar y exportar capítulos

Para crear contenido fuera de MappView, use Importar / Exportar junto a Añadir capítulo:

• Exportar JSON escribe toda la historia (configuración y capítulos); Importar JSON la vuelve a leer (un archivo de proyecto .mappview.json completo también sirve).
• Exportar CSV escribe una fila por capítulo (apto para hojas de cálculo). Importar CSV sustituye los capítulos manteniendo la configuración actual de la historia.

Las columnas CSV son id, title, description, image, alignment, hidden, lng, lat, zoom, pitch, bearing, mapAnimation, rotateAnimation, onChapterEnter, onChapterExit. Las columnas se emparejan por nombre, así que el orden es flexible y solo necesita las que use; lng/lat fijan el centro del capítulo, y los ids que falten se generan al importar. Las columnas onChapterEnter/onChapterExit contienen JSON y pueden dejarse en blanco al crearlas a mano.

Efectos de capa

Bajo Al entrar y Al salir, añada fundidos de capa que se ejecutan cuando un capítulo pasa a estar activo o se deja atrás. Elija una capa del proyecto y una opacidad objetivo (y una duración de transición opcional). Así es como revela u oculta datos conforme avanza la historia.

Presentar

Haga clic en Presentar para iniciar la presentación controlada por scroll sobre el mapa en vivo. Haga scroll para moverse entre capítulos; pulse Esc o Salir para volver a la edición.

Un panel de navegación a la izquierda enumera todos los capítulos para una visión rápida; haga clic en cualquier entrada para saltar directamente a ella. Active o desactive el panel con el botón de lista junto a Salir. Los controles del mapa (navegación, pantalla completa, globo, control de capas) siguen siendo utilizables durante la presentación.

Cada tarjeta de capítulo se puede mover y redimensionar: arrastre su barra de título para reposicionarla (haga doble clic en la barra para restablecer), o arrastre la esquina inferior derecha para cambiar el tamaño, de modo que puede apartar una tarjeta y explorar el mapa que hay debajo.

Exportar a HTML

Haga clic en Exportar HTML para guardar una página .html autocontenida que reproduce la historia sin MappView. Las capas GeoJSON en memoria referenciadas por los efectos de los capítulos se incrustan para que la historia exportada se comporte como la vista previa de la aplicación. La página es un único archivo estático que puede alojar en cualquier parte (GitHub Pages, Netlify, S3 o cualquier servidor web).