We’re creating a project on Latinx cultures in the Catskill Mountains and are evaluating using CurateScape (we hope to be able to adopt it!).
One issue we’re having consistently is with the rendering of maps in terrain view. Since this is a project about a mountainous region – the Catskills – being able to show the topography is important to us.
If you visit the testing site at the url below and click around on the Story Map (especially drilling down through the larger clusters), eventually the map will fail to render. Switch to Street view and it renders properly.
This is a known issue with the Stamen Design terrain map tiles. It’s even apparent on the company’s demo site.
One potential fix would be to edit the maxNativeZoom level for the terrain tiles in javascripts/providers.js.
Lowering the number from 16 to 12 or 13 would probably fix the issue for your project, though the tiles would then scale up and lose some resolution. (The coverage seems to vary depending on location, so there’s not much I can do to create a one-size-fits-all fix that would work for every project.)
We’re also looking at adding support for user-defined Mapbox tiles (and other alternative tile sets), but there’s no timeline for that right now.
Happy new year, and thank you for this solution, which does work, although at the cost you noted of losing some resolution as well as the geographical data like street names that would have appeared when zoom levels higher than the maxNativeZoom level are auto-scaled rather than loaded.
I think we may need to revert to street view, although we’ll regret the loss of the topographical representation that is key to our project’s location in the Catskill Mountains.
Down the road, perhaps I could add a function automatically switching the map tiles from “terrain” to “street” past a certain zoom level. I expect this would be pretty simple to implement, although I don’t yet have the familiarity with JavaScript and Leaflet to do it. Does it strike you as feasible?
Also, you would probably want to set maxNativeZoom back to the default.
This is not necessarily a complete solution since it results in the unnecessary loading of multiple duplicate street layers. But it might give you an idea of the user experience.
Alternately, in the same place, you could add something like the following, which checks to see if you’ve reached the max zoom level and then loads the alternate tiles.
if (data.defaultLayer == "STAMEN_TERRAIN") {
map.on("zoomend", (z) => {
if (map.getZoom() == z.sourceTarget._layersMaxZoom) {
carto_voyager.addTo(map);
}
});
}
In this case you might want to set maxZoom and maxNativeZoom to the same value in providers.js.
Here is what I ended up adding to the theme. This will fill in the gaps in terrain map coverage with the street map tiles. I removed the maxNativeZoom settings from providers.js to ensure that the results line up and don’t look too janky.
The solution you’ve incorporated into the theme’s code will allow us to retain use of the terrain map. Thank you for doing this; while many Curatescape projects focus on urban history, having the option of a working terrain map for projects like ours that deal with rural spaces is excellent. Have a great day!
