Skip to content

NUKnightLab/StoryMapJS

Folders and files

NameName
Last commit message
Last commit date
Dec 21, 2017
Jun 5, 2018
Oct 19, 2018
Mar 23, 2021
Jul 26, 2022
Jan 31, 2024
Jun 24, 2014
May 30, 2020
Mar 8, 2021
Oct 3, 2016
Oct 6, 2016
Jan 24, 2024
Dec 7, 2023
Jun 13, 2022
Feb 1, 2024
Mar 25, 2021
May 31, 2017
Sep 24, 2015
Oct 24, 2016
Aug 21, 2023
Aug 21, 2023
Dec 11, 2023
Aug 21, 2023
Feb 1, 2024
Jan 24, 2024
Dec 18, 2013
May 14, 2021
Jul 19, 2014
Apr 6, 2017
Feb 27, 2015
Jun 19, 2020
Jan 24, 2024
Oct 6, 2023
May 3, 2019
May 31, 2017
Apr 5, 2016
Dec 7, 2023
Jun 1, 2015
Jun 1, 2015
Jan 31, 2024
Feb 1, 2024
Jun 21, 2018
Jun 19, 2020
Oct 2, 2023
Jan 13, 2021
Mar 25, 2021
Mar 25, 2021
Sep 15, 2023

Repository files navigation

StoryMapJS: Maps that tell stories.

StoryMapJS is a simple tool to help you tell stories with maps. If you're not a programmer, you don't need to spend much time on the GitHub page—instead, go StoryMapJS

If you want information on creating JSON with your own code and embedding it, see the "Advanced" documentation on the StoryMap website.

Development

See DEVELOPMENT.md to get setup for local development of StoryMap.

Contributing language translations

StoryMap's older sibling, TimelineJS has proven internationally popular, in part because users have contributed translation support for dozens of languages. StoryMap is also ready to be used in languages other than English, but once again, we'll need your help.

For each language, we need a simple file with a name like *xx*.js, where xx is the two letter code for the language. (Technically, it's the ISO 639-1 code—you can find a list of them on Wikipedia.) The file defines a Javascript object with language specific translations. To make one for your language, copy one of the existing files (like this one for Spanish) and edit the quoted strings. Please don't change the "keys"—the unquoted strings. If you know how to use GitHub to make a pull request, that's the best way to submit it to us. If that's not your thing, you can add a comment to this support thread and upload your translation as an attachment.

GigaPixel

Images are rendered so when set to be map_as_image the entire image is shown. When set as cartography the zoom will set so that all the markers fit.

Points are set to only display on mouseover in image mode, but you can set map_as_image to false in the config options to always show the points. The points are hidden when the intent is an image so that nothing obstructs the image the viewer is looking at. Looking at a painting is hard with a bunch of points on it.

Map Options

To disable connecting lines on maps use the StoryMap options: "Treat as Image" (as opposed to the default, "Treat as Cartography")

More config options available to do what you want with the line:

line_follows_path:      true,		// Map history path follows default line, if false it will connect previous and current only
line_color:             "#c34528",,
line_color_inactive:    "#CCC",
line_join:              "miter",
line_weight:            3,
line_opacity:           0.80,
line_dash:              "5,5",
show_lines:             true,
show_history_line:      true,

To disable zoom calculation/edit zoom level set calculate_zoom to false in the config options.

Images can now be used in place of map pins. Use image inside the location object and include a url to use. use_custom_markers also has to be set to true in the story map options. Same goes for custom icons except you need icon inside the location object and include a url to use.

Troubleshooting

Users may be directed to our userinfo page to help with troubleshooting. This page provides information about the user's account and saved storymaps. The endpoint is https://storymap.knightlab.com/userinfo/