feasible to add slugify to Storymaps?
JackDougherty opened this issue · 6 comments
@ilyankou - I liked your slugify solution in Leaflet Point Map with Sidebar so much that I wonder if it's feasible for you to add it to Leaflet Storymaps. One reason is that CTH is going to want to add some internal links in long storymaps, to help people see connections between chapters at the beginning and end.
If feasible, let me know if you recommend linking it to the chapter title (which may not be unique) or to the chapter row number (1, 2, 3..., if the code tracks those). Also, your estimated time to add this code.
The straightforward way would be to add internal container IDs to the hash, as each row/chapter in the spreadsheet (= each container) has a unique ID in spite of marker/title presence. I pushed the changes, see how you like it. These IDs will not necessarily correspond to numbers you see in the numbered markers because some rows/chapters share a marker.
On map load, it checks hash and scrolls to that container if it exists. I set the animation to last for 2000 ms (2 seconds).
@ilyankou - I love this solution but want to make sure I correctly describe how it works. When I created a new chapter (row #12 in the spreadsheet) to demonstrate the feature, it turns out the hashtag for this chapter is #10 (not #12 as I expected). Is this because the check to see if the container exists looks to see if the first column (chapter title) is filled? That would explain the numbering because our demo has two blank chapter titles on purpose. Or, did you intend the code to count a row if any text appears in it?
Our first chapter is in row 2 of the spreadsheet. We ignore row 1 as it is a header row that gives names to columns. Hence our first chapter is in reality in row 1. As you know, computers count from 0, so the the first row of our data has an id 0. Hence everything is shifted by two.
1 | My | header
2 | First | marker => markers[ (0) -> {First Marker}, (1) -> {Second Marker} ]
3 | Second | Marker
Thanks for this clear explanation. To make it more understandable for our humble readers, would you consider adding "+2" to the code so that the numerical hashtags correspond to the spreadsheet rows? Or would that screw up the code in some way that I do not see?
I added +2 when setting hash, and -2 when reading it for the first time, so what you see in the URL window should now correspond to row numbers in the spreadsheet. I didn't change anything in the code to avoid accidentally breaking things as scrolling/height calculations are based on IDs (so the first chapter, located in row 2 of the spreadsheet, still has an HTML id of #container0, although the users sees 2 in the URL).
Perfect! thank you