StoryMaps crossing the International Date Line

A few people have reported to us an issue where as they create a StoryMap around the Pacific Ocean, the automatically generated line connecting dots goes from across Europe instead of taking the shorter route across the international date line.  This may or may not show up in the main authoring tool, but it does show up when you preview or publish the map.

Ultimately, this goes back to a bug in LeafletJS, the library which manages the actual map. They are still debating a proper fix, because it turns out that this is a problem that vexes digital mapmakers and doesn't have a standard solution.  The good news is that one of our intrepid StoryMapJS users has found a solution.

Unfortunately, users of the StoryMapJS authoring tool no longer have the ability to make manual edits to the StoryMap configuration file.  Therefore, almost all users will need to file a support request to get this fixed.

The good news is that it's fairly easy for us to fix, and if you don't change the actual marker locations on your slides, you can make other edits to your StoryMapJS without "losing" the fix. Be sure to send us the public URL to your StoryMap (as found in the "share" window).

For people who are manually creating StoryMapJS configuration files, or others who are curious, the original explanation of the fix is below.

In short, we have to trick the software by "wrapping" around the earth. So for "half" the points (all of them on either the east or the west side of the date line), you can change the longitude in a way that gets the map to draw correctly. To do this, you have to edit the storymap configuration file in a text editor.

First, you should wait to do this until you've put all of your points on the map.

Open the StoryMapJS configuration JSON file in a text editor. Do NOT edit it in Microsoft Word. If you don't know what this means, then unfortunately this solution is probably not for you.

When you open the file, you'll see some familiar stuff: the text of all of your slides, etc. If you aren't yet done putting your points on the map, you may want to finish that in our authoring tool before going further.

Points in the JSON file look like this (although not as neatly formatted):

"location": {
  "lat": 37.8043637, 
  "line": true, 
  "lon": 237.7288863, 
  "zoom": 14, 
  "icon": ""

 there will be some other stuff near the location which help you identify them, but what you need to do to make this fix is actually so simple that you don't need to know much. We're basically going to take advantage of how circles and geometry work: we can add or subtract 360 degrees from a longitude and it will appear on the map in the same place, but the difference in the actual latitude number will trick LeafletJS into connecting the lines the way we want them to.

So once you've BACKED UP YOUR ORIGINAL STORYMAP, opened a copy in a text editor, and found some points, you're ready

First, determine whether you have more points on the west side of the date line (the "Asian" side, where longitudes are positive numbers) or on the east side of the date line (the "American" side, where longitudes are negative numbers). Whichever set has less points is the set you'll want to edit. If you are editing points that are on the "Asian" side (positive longitudes), you'll want to subtract 360 from the longitude value. If you're editing points that are on the "American" side (negative longitudes), you'll want to add 360 to the longitude value.

Use the calculator software that is built into your computer, get the new value, and just paste it right in place of the existing longitude. Be careful not to delete and quotes, colons, braces or anything except the longitude you are changing.

Let us know if we can make these instructions more clear. Obviously we put a lot of work into making StoryMaps easy to edit, so we'd rather you didn't have to do this. But until we work out a permanent fix, this may help a few people.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


  • 0
    Knight Lab

    The TL;DR for this:

    The fix is to manually edit the longitude values in the JSON file. If you are using the StoryMap editor, Knight Lab support will have to upload the modified file for you

    Pick an East/West hemisphere and "shift" those longitude points by 360 degrees

    If you are modifying points on the "Asian" side (positive longitude numbers) then subtract 360 from each longitude value

    If you are modifying points on the "American" side (negative longitude numbers) then add 360 to each longitude value

    Only shift points on one side or the other, not both

Please sign in to leave a comment.
Powered by Zendesk