Skip to content

jessicauchoa01/StoryMapJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 

Repository files navigation

StoryMapJS

Example of how to create a Story Map JS

πŸ—Ί Site of the tool:

Access this link and sign in: https://storymap.knightlab.com/

πŸš€ Start

This page will open and you must add the name of your application:

start

🎨 Styling first page

After that, style your first page with the most important information about your story. You can add a title, a description, a photo or video, and customize the page. Below is a simple example:

editFirstPage

🎞 YouTube video

In the example below, we added our first point using geographic coordinates. But don't be scared, we'll add a pin directly to the map later. This time our media will be a YouTube video:

youtubeVideo

πŸ“· Adding photo

To add a photo the path is the same, you need to indicate the folder where your file is (or if you prefer, add a URL to an image from the internet).

addingPhoto

πŸ“ Pin with name

Now we will add a point using the name of the place. You can also change the background color of your slide by following these steps:

AddingBackground

πŸ”— URL

To reference web pages is super simple, follow the steps below:

AddingLink

πŸ“€ Share your Story Map JS

To share your story map, click on the share button and copy the link:

Share

MORE

You can download the symbols at: https://www.svgrepo.com/ or use https://inkscape.org/pt/ to create your own symbols.

For the text, I used https://www.lipsum.com/feed/html to create lorem ipsum, use your text and enjoy the experience.

The images used here were downloaded from: https://www.washingtonpost.com/world/2024/02/08/maps-volcano-eruption-iceland-grindavik/

About

Example of how to create a js story map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published