search

NUKnightLab / StoryMapJS

Maps that tell stories.
https://storymap.knightlab.com/
Other
177 stars 48 forks source link

Legacy Mapbox StoryMaps cannot be edited #408

Open JoeGermuska opened 6 years ago

JoeGermuska commented 6 years ago

I believe this traces back to the closing of #400 (which fixed #274)

I have an old map in my account which I just mess with for testing. When I go to open it now, I get an error

https://github.com/NUKnightLab/StoryMapJS/issues/new

The old map_type was mapbox:censusreporter.map-j9q076fv When this goes through EditorMap.js it hits an error (at line 306) because this value doesn't match expectations about how values beginning with mapbox: should be structured.

https://github.com/NUKnightLab/StoryMapJS/blob/8b72cd31b66b592f3844e739e167f5efaab11eb7/static/js/EditorMap.js#L284-L320

I believe this also came up in Zendesk #5944.

The fix would be to include a branch when the map_type begins with mapbox: to preserve old behavior while supporting the new form of the URL they provide.

JoeGermuska commented 6 years ago

Note: while we're in this code, we may actually want to revisit the solution to #274. I see now that Mapbox presents a different URL much more prominently than the one we're currently configured to accept.

In the Mapbox studio interface, when you click on "share and use", this is the default view: image

That most prominent URL doesn't work, which is kind of at odds with how our systems often work (by making sense of the easy-to-find URL instead of adding burden to the user)

To find the fields we currently need in the authoring UI, one has to click on "Use", and then scroll to the bottom of the "web" option (which, at least, is first). Only after scrolling will they see the values we need.

I would propose that we recognize URLs like the one above, at least in the authoring tool. With a regular expression, we could parse the URL above into the necessary components. Here's the logical part of it; I haven't gone to plug it into the actual authoring app:

url = 'https://api.mapbox.com/styles/v1/nuknightlab/cjl6w8oio0agu2sltd04tp1kx.html?fresh=true&title=true&access_token=pk.eyJ1IjoibnVrbmlnaHRsYWIiLCJhIjoieUpRU1FOWSJ9.f7Z1min5DNfTPBIb7RbnGA#11.0/39.290000/-76.500000/0'
var parts = url.match('api.mapbox.com/styles/v1/(.+?)/(.+?)\.html.+access_token=(.+?)#');
style_url = "mapbox://styles/" + parts[1] + "/" + parts[2]
access_token = parts[3]