Cómo crear un StoryMap gratis y sin instalar nada

StoryMap JS es una herramienta sencilla y gratuita que nos ayuda a contar historias con mapas. Las ventajas de utilizar StoryMap JS son, entre otras:

• Tiene una interfaz para crear las historias muy amigable.
• No es necesario instalar ningún programa.
• Todo el contenido se aloja en la nube.
• No es necesario programar nada, ya que es un aplicación apta para todo tipo de usuarios.

Hace poco os contábamos que también es posible crear historias con software libre utilizando  MapStore. Sin embargo StoryMap JS es diferente, ya que no requiere ninguna instalación.

¿Qué tecnología utiliza StoryMap JS?

Es una aplicación creada en JavaScript. El visor de mapas se basan en la librería Leaflet. Los mapas se basan en OpenStreetMap y se utiliza Mapbox como proveedor para realizar la geocodificación de direcciones.

¿Quién está detrás de este proyecto?

Dentro de la universidad de Northwestern en Chicago, hay una comunidad, denominada Knight Lab compuesta por diseñadores, desarrolladores, estudiantes y educadores que trabajan en experimentos diseñados para impulsar el periodismo.

El laboratorio proporciona un entorno abierto y colaborativo para explorar y conversar de forma interdisciplinaria, donde los estudiantes y profesionales aprenden juntos. Esta comunidad ha creado un conjunto de herramientas ligeras, adaptables y de código abierto para los periodistas y creadores de medios. El más popular, TimelineJS, ha sido utilizado por más de 250.000 personas para contar historias y está disponible en más de sesenta idiomas.

Creando un StoryMap

Para comenzar debemos hacer clic en el botón de la página principal Make a StoryMap:

Al hacer clic sobre el botón nos pedirá loguearnos con una cuenta de Google, de modo que podemos editar nuestros proyectos sin necesidad de recordar otras contraseñas.

El primer paso será asignar un nombre a nuestro StoryMap, en este tutorial vamos a crear una historia con los ocho mejores circuitos de carreras del mundo (el propósito es cartográfico, obviamente no pretende ser un documento técnico sobre circuitos de carreras).

Una vez ponemos el nombre se abre la interfaz del programa:

La primera pantalla que vemos es la diapositiva de la página principal, en ella aparecerá el mapa con las ubicaciones creadas en las siguientes presentaciones y el título del StoryMap.

En la presentación hay tres apartados que debemos completar:

1. Media. En este apartado incluiremos la url del elemento multimedia o subimos una imagen desde nuestro equipo. La URL de los medios puede provenir de varios servicios diferentes, incluidos YouTube, Flickr, Vimeo y Twitter.  Añadiremos el crédito del medio y el subtítulo si es necesario.
2. HEADLINE (Título) y descripción.
3. Background options: en esta apartado podemos darle color al fondo de la parte de la imagen o añadir nuestra propia imagen de fondo.

Creando diapositivas con contenido geo

Una vez completada esta información podemos comenzar a crear las ubicaciones haciendo clic en el botón Add slide:

Para comenzar a crear contenido a cada ubicación completamos las siguientes secciones:

1. Ubicación. El servicio de geocodificación de direcciones la proporciona Mapbox. Podemos añadir el nombre de una ubicación conocida o las coordenadas geográficas del lugar. Una sugerencia: en Google Maps haciendo clic con el botón derecho del ratón aparecen las coordenadas y pinchando sobre ellas se copian directamente.
2. Como en la diapositiva anterior completaremos los apartados Media, título y descripción.
3. Marker options: aquí podemos seleccionar un icono personalizado para la ubicación. Esta semana hemos publicado en Twitter un catálogo gratuito con más de 100.000 iconos:

118.894 iconos e ilustraciones de código abierto GRATIS https://t.co/g1kSRNLKge

— MappingGIS 🚀🌍 (@MappingGIS) March 28, 2022

Hemos probado a descargar un archivo svg muy apropiado denominado road_race.svg

Este sería el aspecto de una de las diapositivas en modo edición:

Y en modo previsualización se vería así:

Continuamos creando diapositivas y creando contenido en cada una de ellas hasta finalizar.

Opciones de visualización

En la parte superior izquierda de la interfaz nos encontramos con el botón Options, hacemos clic en él. En la pestaña Display nos encontramos los siguientes parámetros:

• StoryMap Size: el tamaña de nuestra historia (por defecto Width 100% Height 800).
• Language: para seleccionar el lenguaje de los controles y mensajes cuando se muestra el StoryMap.
• Fonts: podemos elegir entre 18 tipos de fuente.
• Treat As: este punto es interesante porque tenemos dos opciones:
  • Cartography: en esta opción aparecerá el icono con la ubicación que hemos establecido y una línea que conecta las ubicaciones.
  • Image: en este caso sigue apareciendo el mapa pero se eliminan los iconos de ubicación predeterminados (no así los personalizados) y la línea que conecta las ubicaciones.
• Call To Action: elegir Sí añadirá un botón en la diapositiva de bienvenida para animar a los lectores a ver la historia. También podremos personalizar el texto.

• Map Type: aquí podemos seleccionar un tipo de mapa predefinido para todas las dispositivas. Las opciones son:
  • Stamen Maps:
    • stamen:toner-lite: el valor predeterminado.
    • stamen:toner: blanco y negro de alto contraste.
    • stamen:toner-lines: solo las líneas (principalmente carreteras) del estilo Toner.
    • stamen:toner-labels: solo las etiquetas (nombres de lugares y carreteras) del estilo Toner.
    • stamen:Watercolor: una representación artística.
  • OpenStreetMap: mapas usados por OpenStreetMap.
  • Mapbox: en este caso necesitamos introducir el ID de tu mapa público de Mapbox y el token de acceso público (requiere una cuenta de MapBox).
  • Custom: podemos incluir la url de un servidor de teselas XYZ.
  • Gigapixel: la función de gigapíxeles de StoryMap no es tan fácil de usar como las otras herramientas, porque requiere exportar la imagen a teselas (se sugiere utilizar Zoomify) y posteriormente alojar las imágenes en un servidor web.  Aquí tienes más información sobre el uso de estas imágenes.

Compartir el StoryMap

En la parte superior derecha de la interfaz nos encontramos con el botón Share:

Desde esta ventana podemos compartir nuestro StoryMap en redes sociales o copiar el enlace para publicarlo en nuestra web. Al insertar el enlace en WordPress nuestro proyecto se verá así: