Follow

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 doesn't 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, which I'll explain here.  Unfortunately, it is involved, and not for the meek, but it is something you can do.

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.

You can use Google Drive (http://drive.google.com or the Mac/Windows software version that puts a folder on your computer). Whichever one you use, find the "KnightLabStoryMap" folder in the top of your Google Drive, and in it, you'll find another folder called "public". In there you'll find a folder for each storymap you've made, named as you chose when you created it. In *that* folder, you'll find a file called "draft.json" (there may be others, but don't worry about them.

MAKE A COPY OF THIS FILE AND SAVE IT SOMEWHERE BEFORE YOU EDIT IT. 

Open the 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 familar 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": "http://maps.gstatic.com/intl/en_us/mapfiles/ms/micons/blue-pushpin.png"
}, 

 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.

When you're done, safe the file and put it back in Google Drive. Go back to your StoryMap editor and reload it. If you did everything right, you won't see any difference on the editor overview page, but if you switch to the "preview" mode, you'll see the lines going the way you want them to.

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 Comments

Please sign in to leave a comment.
Powered by Zendesk