Design Review: Map Style upgrade

[danrademacher]

We have some big changes in store for the OHM basemap and we want your feedback!

As we build out one map style to work across many times and places, one of the challenges we have faced is how prominent to make roads. Many modern web maps often feature them as the most important thing. Over the course of history, that's been true at some times and in some places, but not at others.

So we wanted to rein in the roads, so to speak, and let them play along with the many other data types we have and expect to have in OHM.

Here's a quick before and after, where you can see that the roads fade back and railroads and labels are much more visible:

You can preview the map style, with timeslider and all live OHM data here: https://openhistoricalmap.github.io/mbgltimeslider-leaflet-control/demo/#8.000/48.85387/2.36481/1702,1000-2021

Because OHM is often sparse in data in many places at various times, we also tested a similar visual style using Mapbox Studio, with the full richness of OSM data. This is obviously a map only of "now" but it's helpful to imagine the future of OHM as more data gets added to the system. Here's a preview that Mapbox/OSM style. We find it useful to look at this and assess whether to "punch up" anything in our OHM style, with an eye to the future when we have more and more data on the map.

We want to get feedback from folks before we roll out this big cartographic change. Please add your comments to this github issue. Specificity is super helpful, including screenshots and direct links to the Timeslider Demo linked above, which encodes location, zoom, and selected year, so we can see exactly what you're talking about.

We'll keep this open for 2 weeks for comments, through Feb 8, and then review comments and assess design revisions before we deploy the updated map.

[danrademacher]

From Myr on Discord:

While I like the less offensive color of streets, I think intermediary (and minor) highway classes show too late and could probably be pulled forwars 2 or even 3 zoom levels

[rwelty1889]

you’ve made me start thinking about this. perhaps a medium-long term thing might be varying stylesheet profiles with different emphasis. there could, for example, be a selectable stylesheet with a focus on transportation features.

[tsinn]

That's a very timely comment, @rwelty1889! We are just starting to think about additional styles focused on certain features. More to come on this subject soon, and thanks for your note.

[DavidJDBA]

I would prefer roads be toned down somewhat; but they're hard to see in the proposed style example. Somewhere between these two extremes would suit me.

[PaulTheArchivist]

I agree with DavidJDBA's point - I find it hard to see the roads on my screen too. Perhaps some subtle colouring of at least the main roads might be a good idea?

I think Myr's point of bringing the intermediate/minor roads to a lower zoom level is also good. Though for the minor roads I think perhaps it makes sense to go just one or two levels lower to avoid the roads all merging into one in towns etc with a dense road network?

One other thing I'd suggest is to make highway=unclassified appear at the same zoom level as highway=residential - I'd consider the two to be equivalent to each other with the only difference being whether the road has residential properties along it or not. This leaves odd gaps on the map when viewing at zoom level 14. In comparison, it appears that the map layers on OSM show both identically.

[danrademacher]

Thanks for the feedback on the updated mapstyle and especially the issue of low contrast on the roads. On the one hand, our goal is to dial those back since roadways are not universally important through history. On the other hand, we still want them to be broadly perceivable.

We have done some sketches in Mapbox Studio (which uses OSM data) to test color schemes in an environment with a high amount of data density (where we hope to get with OHM in the coming years!).

These alternatives focus on colors for motorways/trunks and primary streets. Other roads are varying widths, and sticking with white with gray cases. Whichever direction we choose to go, other layers (like land cover / land use) will shift colors so they do not match the colors for the roads.

Since this is meant to be a default style to show a wide range of data across any available time, we’re looking to balance making the roads legible without making the map about roads.

Option 1 below has the roads the most contrasted, without them causing visual clutter/taking away from the rest of the map, which seems like a good balance. But we present the other three options as also being viable alternatives.

1. Purple and red w/ white cases
2. Red and orange w/ white cases
3. Purple and red w/ gray cases
4. Red and orange w/ gray cases

Here’s a single view comparison of the existing map style, the first alternative, and the 4 new alternatives (open in a new window to really see it):

[jeffreyameyer]

I'd generally avoid 1 & 3, as purple and red look like veins and arteries... I like 2, but are those tones of red & orange really the exact same as in 4? They look lighter to me.

Key reason I like 2 is that the contrast is greatest with the map background, where I feel like the roads in 4 blend in too much with the background.

That said, I'm a little less of a fan of white casing against light backgrounds. I'm not sure there are any design-forward mass market map comps (Google, Bing, Apple, etc.) that use white casings for roads.

[tsinn]

1 & 3 and 2 & 4 use different shades of purple & red and red & orange. If we use white cases, then slightly darker (but still subtle) internal colors are best. And if we use gray cases, then lighter internal colors are best. Thanks for pointing that out!

[jeffreyameyer]

No way to do the dark casings with the darker internal colors?

[tsinn]

Definitely a way to do it, but it gets more challenging. The major advantage of cases is that they provide a contrasting shade to separate the roads from other map elements with something akin to a border. When we have a mid-shade gray case behind a mid-shade red or orange road, it ends up blending together visually and becoming muddier and making the roads look wider. If we were to contrast the mid-shade red or orange roads with darker gray cases, then our major roads will probably have too much visual dominance, which we were trying to move away from. I'm trying to reach a compromise between the bold colors in the current production map and the white roads we have in the staging map. There are a handful of different opinions, and I'm iterating towards a middle ground.

[tsinn]

Here are two iterations on the red and orange style. They are both more saturated and brighter than the previous options. One version has white cases, and the other one starts with lighter gray cases and as users zoom in, the cases switch to darker gray. More saturated red and orange, white cases: https://api.mapbox.com/styles/v1/greeninfo/ckzznso6d000v14qfayw1rr8h.html?title=view&access_token=pk.eyJ1IjoiZ3JlZW5pbmZvIiwiYSI6Ik1HUWRtdEkifQ.aWQKcu787DGrDq7LN5r2iA&zoomwheel=true&fresh=true#12.88/51.50308/-0.14345

More saturated red and orange, gray cases: https://api.mapbox.com/styles/v1/greeninfo/ckzznwuu900h716kdc00h3enr.html?title=view&access_token=pk.eyJ1IjoiZ3JlZW5pbmZvIiwiYSI6Ik1HUWRtdEkifQ.aWQKcu787DGrDq7LN5r2iA&zoomwheel=true&fresh=true#12.88/51.50308/-0.14345

[alexislitvine]

In terms of aesthetics I find this new presentation very pleasant, but - and speaking as a historian, and someone working on transport networks - I am concerned about the loss of ergonomics in map editing caused by this the change. Would it be possible to have different presentations available based on the kind of info one wants to foreground? While working on the road network, for example, I'd much prefer to work on the very visible bright roads (the left one in the original post by @danrademacher) than the right-hand one. If that could be re-activated in some way while editing that would be ideal.

[rwelty1889]

i think the long term goal is to provide multiple styles. i'm doing a bunch of work on transport too right now (the NYS canal system over time) and i think there's a serious need for a transport focused version.

but we also need to spent some time talking about road classification through history. applying the current system (which is UK derived) in the US has been messy. once you start going back in time, just what should you be doing (same deal with the definition of what's a city, town or village.)

richard

On 2/24/22 5:59 PM, alexislitvine wrote:

In terms of aesthetics I find this new presentation very pleasant, but - and speaking as a historian, and someone working on transport networks - I am concerned about the loss of ergonomics in map editing caused by this the change. Would it be possible to have different presentations available based on the kind of info one wants to foreground? While working on the road network, for example, I'd much prefer to work on the very visible bright roads (the left one in the original post by @danrademacher https://github.com/danrademacher) than the right-hand one. If that could be re-activated in some way while editing that would be ideal.

— Reply to this email directly, view it on GitHub https://github.com/OpenHistoricalMap/issues/issues/328#issuecomment-1050344377, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5ED4DPOPDKHV42H3R46GLU42Z35ANCNFSM5MZYAKRQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

-- @.*** Averill Park Networking - GIS & IT Consulting OpenStreetMap - PostgreSQL - Linux Java - Web Applications - Search

[helgouj]

At an urban scale the new presentation (with more saturated red and orange, gray cases) is making it easier to read data and the background without being visually overloaded. However at a larger scale (a country for example) the transport networks is not really visible. The structure and the hierarchy of those networks are key elements and the new presentation doesn't highlight those features, so it's more confusing in this case. Defining a different color range and/or line width according to the zoom level can be explored (e.g. once we zoon out the primary roads will be more saturated and wider, the residential one can become darker while keeping the same width ). And of course having different presentations available will be to most ideal option for the long term goal.

[tsinn]

Based on a Discord comment from Lemente, I've created an additional style with red cases and orange cases.

at a low zoom level (large scale map) (I am assuming the screenshot is at the right dpi) the grey outline tends to make red and orange hardly identifiable for me (and I have a very good vision, as well as a good calibrated monitor) fix idea : use darker red and orange outline to keep line colours different enough

https://api.mapbox.com/styles/v1/greeninfo/cl02k009i000514n4grx311p0.html?title=view&access_token=pk.eyJ1IjoiZ3JlZW5pbmZvIiwiYSI6Ik1HUWRtdEkifQ.aWQKcu787DGrDq7LN5r2iA&zoomwheel=true&fresh=true#13/51.51387/-0.13558

[tsinn]

Thank you all for the great feedback! I have pushed the version with slightly more saturated red and orange highways with white cases to our staging site. I'm glad we were able to iterate from the original proposals to find a style that is both clean and balanced. If we step back a bit and look at the beginning of the cartographic process, before we even began to style OHM data, we first pulled together a bunch of historical map styles that we could use as inspiration for the first OHM base map. We ultimately settled on a style that was influenced by early to mid-20th century road maps, specifically this 1950 map by Alexander Gross. It's a beautiful map that evokes a particular historical style, and it's been a great reference for our OHM cartography. As we continued to build out our cartography with many different points, line, and polygon layers across many zoom levels, we received a Github issue describing how the highly saturated red and orange highways were overemphasized, especially when zoomed in on cities. The many shades of red and orange we used were overzealous and made the road system appear more confusing. This critique makes sense. When viewing the 1950 road map by Gross, it's important to remember that it's a static map created at a single zoom level with a limited number of layers symbolized. It works great at a national level, but may not work as well for a local city view. So, with that, we pushed all roads to white with gray cases. Different levels of roads (highway, residential, etc.) had different widths. This was a major change, as noted by a handful of contributors, so this new style that I just pushed to staging is a compromise, where we're bringing back red and orange for highways, but desaturated from the original road atlas style.

Here are a few direct responses to a few comments that we've received both here in comments and in Discord - again, thank you for the feedback!

I think intermediary (and minor) highway classes show too late and could probably be pulled forwars 2 or even 3 zoom levels

I've tried to match up zoom levels with Mapbox's Streets style, so hopefully this is an improvement.

I'd generally avoid 1 & 3, as purple and red look like veins and arteries...

Fair point. Design is subjective, and this particular point hadn't resonated with me. Purple continues to be a controversial color in cartography (I happen to love it), and it can be an interesting addition to a map. Some inspiration for that approach can be seen here.

I'm not sure there are any design-forward mass market map comps (Google, Bing, Apple, etc.) that use white casings for roads.

It's a bit outside the box, but cartographically, I find it to be a very clean roads border. And there's good precedent in the Mapbox Streets style.

However at a larger scale (a country for example) the transport networks is not really visible.

Yes, and this is somewhat by design. From a cartographic perspective, I prefer to see a map, especially one at many zoom levels where details can reveal themselves as you zoom in, that somewhat mimics satellite imagery. When zoomed very far out, I would expect to see the difference between water and land, and on land, the difference in land cover / land use types. I would not expect to be able to distinguish different road classifications, for example. I am following that approach in this base map design.

i think the long term goal is to provide multiple styles. i'm doing a bunch of work on transport too right now (the NYS canal system over time) and i think there's a serious need for a transport focused version.

Yes! We're working towards the idea of multiple styles for OHM. Vanessa's woodblock map style is the first example, but there will be more, for sure. Our biggest challenge (and opportunity) with the OHM base map is to try to make an aesthetically pleasing and balanced map that works for many purposes and applications. This tends to push cartography to a more subtle place for individual layers, because we don't want one type of layer to dominate all the others. If we built a map for a transportation historian that emphasized roads, railroads, ferry lines, and airports, how would the ecological historian react to those style choices? It's important to remember we're building a map for countless applications and making it beautiful at the same time. It's tricky, but also inspiring.

Thank you all, again, for all your contributions and feedback!

[danrademacher]

We just deployed the final version of the map style to production