Awesome old publicity photos that seem to feature a helpful TTC guide explaining the system map to Betty Draper. Also, the illustrations around the map itself are kind of incredible. The newfangled subway has only been open for three years at this point in time.
Compare to this similarly amazing TTC photo from 1966.
Source: torontohistory/Tumblr – site no longer active
I got an request from an anon last week which asked:
“Hey! Could you do a video tutorial on how to bypass Illustrator’s annoying round corners effect in case of 45 degrees? It would be a lifesaver!”
Now, while you’re not going to get a video tut out of me – I don’t have the resources, time or know-how to produce one of those – I can and will share my battle-tested personal approach to this problem.
As our anonymous friend says, the “Round Corners” effect in Adobe Illustrator is essentially broken when it comes to making transit maps. Because of the way it measures the “radius” of curves, it produces unexpected (and useless) results on curves that aren’t a bog-standard 90 degrees. I wrote in depth about this problem on my design blog a while back: I suggest you head over and read the article if you want to fully understand the issue at hand here.
The other problem with the effect is that it applies the same radius to every curve along the entire length of the path, which isn’t always what you want: a route line might be the outside line (a larger radius) at one corner, but the inside curve at another (a smaller radius).
So I’ve long since given up trying to fight the inadequacies of the “Round Corners” filter, and instead generate all my curves manually from a “master set” of curves that I create at the beginning of a project.
STEP 1 above shows a pretty standard initial set-up: four concentric circles that are aligned to the grid that’s being used by the map. Here, we’ve got a 10-point grid, and the four circles have radiuses of 10, 20, 30 and 40 points. The line thickness is 8pt, so there’s a nice 2pt gap between each route line. When you’re setting up your master curves, be sure to create enough circles to account for the maximum number of adjacent route lines you’ll have on your map. Often, it’s only two or three, but for my map of TGV Routes in France, I had to set up a staggering eighteen!
STEP 2: From here, it’s a simple matter to use Illustrator’s Scissor tool (shortcut: “C” key) on the existing anchor points in each circle to split them up into four 90-degree segments. I’ve moved one set of 90-degree curves away from the others so you can see what you should have. Keep this set for when you need 90-degree curves, then duplicate it so we can use what we’ve already created to create a new 45-degree set.
STEP 3: Draw a line using the Line Segment Tool (shortcut: “” key) that passes through the centre point of all the circles and crosses all the paths at a 45-degree angle. (Hint: start at the centre point and hold down the Option/Alt key – to extend the line equally in each direction from that point – and the Shift key – to constrain the line to 45-degree angles).
Use the Rotate tool to make a duplicate of this line that’s rotated 90 degrees. Select both lines and press Cmd/Ctrl-5 to turn them into guides. Make your guides visible (Cmd/Ctrl-;) and turn on Illustrator’s Smart Guides (Cmd/Ctrl-U). Then use the Scissor tool to cut each of your route lines where it crosses these new guide lines. The Smart Guides will help a lot by giving you feedback when you’re positioned correctly over the guides: a little “intersect” tool-tip (just visible in the STEP 3 screenshot at top right) will appear near the cursor. Click to cut when you see this and you’ll be golden. Repeat for each line you need to cut. You don’t need to have any paths selected to cut, just position your cursor, click and Illustrator is clever enough to work out what you need. You only need to cut these 45-degree points because we already cut the 90-degree points in STEP 2.
STEP 4 show the result. Again, I’ve moved one set of curves away from the others to show you what you should have: eight complete sets of 45-degree curves, ready for use on your map!
STEP 5 shows a common scenario where three separate routes go around a 45-degree curve together. Draw them so the separate segments for each line touch, but there’s absolutely no need to join the lines at this stage.
A note: If Illustrator took a leaf out of CAD software and included a “Fillet” effect, we could forego this entire workaround. You’d simply select each segment of a route line, invoke the filter, set a curve radius (an actual, proper radius!), and the software would then create the curve accurately and join the lines seamlessly for you, each and every time. After 17 versions of Illustrator, I’m really not holding out hope for this functionality any time soon, however…
Another note: decide which of your curve radiuses represents a “standard” curve and always use that curve when a single route goes around a corner. Then, decide what happens when you have two curves: do you use the next size up or down for that curve? And so on for each combination of curves. Always apply your curves according to the rules you set here – this is what gives your map consistency and visual flow. Don’t cheat and use a smaller or non-standard curve to make things fit!
Here, I’ve decided to use the three largest curves for my three route lines (I often feel that the smallest radius can be a bit tight and look ungainly, so I only use it when I really have to), and I’ve pasted in the appropriate curves from my master set (I’ve changed their colour to magenta to make them easier to see and place correctly).
STEP 6: It’s always easier to align the curves to the horizontal or vertical line segment first. Again, this is easier if you have Illustrator’s Smart Guides on. Drag the curves over by one of the left points, holding down the Cmd/Ctrl key as you do. This ensures that Illustrator provides you with the correct visual feedback that things have aligned properly. Be warned: sometimes, Illustrator reports that things are aligned when they’re not. Be sure to zoom in enough and check things out if you suspect things aren’t quite right.
STEP 7: Now align the right points of the curves with the 45-degree segment, by holding down the Cmd/Ctrl key and the Shift key (to constrain the movement) as you drag across. Again, Smart Guides will give you feedback when things are aligned.
STEP 8: Now that the curves are in the right place, you simply have to align the end points of all the line segments with the end points of the curves, then join everything together. Fortunately, Illustrator’s Join command s a lot less finicky than it used to be. You can now just use the “black arrow” Selection tool to select each segment and hit Cmd/Ctrl-J to join them all together in a logical progression. You used to have to select individual end points, two at a time, and tell Illustrator to join just those segments!
An approach I like to use is to leave all this curve work until the routes are substantially laid out. Then I place all my curves, delete the original straight line segments, and simply join all the remaining curves together. Because they’re positioned accurately, you know you’re going to get nice straight lines between each and every one of them! And it saves having to tediously move end points around until things line up before you join things together.
That’s it! If anything’s unclear, drop me a line or leave a comment and I’ll try to clear things up for you.
STEP 9 shows the finished result: beautifully nested 45-degree curves with no unnecessary additional points. Perfectly executed and reproducible across the entire map!
—-
UPDATE: January 2014: The latest update to Adobe Illustrator CC (version 17.1) basically makes this tip redundant through the introduction of “Live Corners”. If you’re making transit maps with Illustrator, this alone is a reason to upgrade to CC. Read my post about using Live Corners here.
Beautiful vintage match box cover with a little map showing the location of the “Fuji Restaurant” in Hiroshima relative to the nearby streetcar line.
Source: maraid/Flickr
While researching yesterday’s post about Pittsburgh’s light rail map, I came across this, the full system map – showing light rail, BRT (busways) and buses – produced by the Port Authority of Allegheny County and available on their website.
That’s right: the map image has been sliced up into multiple .png files and placed into an HTML table. A table with a staggering fifty-one separate cells. It’s like a time warp back to 1996 or something.
To view the map in more detail, you have to click on one of those cells and a (slightly) enlarged version of that tiny slice of the county comes up for further viewing, as seen in the second picture above. A list of routes that runs through that section also comes up: you can click again to view individual maps and schedules for that line. To see where a route goes outside your current tiny square, you have to close the pop-up and then click on an adjacent area.
Of course, you can also click an area of the map which has no routes shown at all, just to view that wide open nothingness in greater detail (third picture). Useful!
Is this really the best way for customers to view a system map, one tiny little square at a time? It’s almost impossible to follow a route from one end to the other or even really make sense of the map at all (it’s not legible at the overview size). A downloadable PDF of this map with embedded hyperlinks to further route information (linking back to the website) would be a far better way to distribute this information, but that’s not even an option: this clunky, antiquated “Web 1.0” interface is the only way this system map can be accessed.
Source: Port Authority of Allegheny County website – link fortunately no longer active
Submitted by Dan Daly, who says:
Here is the Pittsburgh light rail map. I would love to hear your thoughts on it. In my opinion it is kinda useless not because of it’s design but because it only covers the light rail. Very little of the urban part of the city is actually covered in this map. If the busways were fully included with station names and the links to the T stops it would be much more useful for someone trying to find their way around the city.
Transit Maps says:
It seems a little unfair to me to single out this one particular light rail map for not showing other transit modes when there are plenty of other maps that do exactly the same thing – my own city of Portland, Oregon makes no reference to bus services on its MAX light rail map. Generally, an overall system map will include all modes of transit – a light rail map like this is then also offered to show this particular mode in full detail without the clutter of the other modes.
So while I can’t really find fault with the scope of this map, I certainly can with the execution. It’s another example of the frustratingly average transit map design seen throughout much of the United States – uninspired typography, dull, unexciting colour choices and poor/strange informational hierarchy.
I especially take issue with the way that stations with high-level platforms are given so much more visual prominence over low-level platforms, with both a bigger station marker and larger, bolder labelling. While it’s good to know whether you’re boarding on the level or via stairs (the light rail trains in Pittsburgh have two front doors, one at each level), it doesn’t justify giving one type of station so much more visual emphasis over the other. Apart from the different platform heights, there’s no difference between these stations – the larger, bolder type should really be reserved for interchange or terminus stations only.
The other thing I’ve long disliked about this map is the weird jog that the Red Line takes through Fallowfield station, which “breaks” the line into two segments at that point. For the longest time, I thought this meant that riders had to change trains here or something, but it just seems to be an unnecessary design element casing that confusion.
The inclusion of busways on this map seem like a complete afterthought: only one busway actually interfaces with the light rail (and even this isn’t made clear with the stations closer to downtown), and the minuscule green route line shown for the West Busway just seems insultingly pathetic.
Our rating: Relentlessly mediocre. Two stars.
Source: Port Authority of Allegheny County website – link no longer active
For a long period of time, the San Francisco Municipal Railway, (commonly shortened to just “Muni”) used pretty much exactly the same map in their brochures. It seems that each year, they’d simply make any amendments required – addition of new routes, deletion of old ones, etc. – and then reprint the brochure/map in a new colour combination.
The earliest example I can find, from 1952, uses a sombre two-color palette of black and red, mostly tinted down to greys and pinks. However, by 1970, the map had evolved into this gloriously garish three-colour purple, yellow and black vision that suits the post-Summer of Love San Francisco perfectly.
The map shows all Muni streetcar, coach and cable car services, but with no visible mode differentiation – express services are shown with a dashed line. However, the map’s actually pretty clean and easy to follow: route termini are clearly shown by route numbers in large circles, and there’s enough smaller numbers along each route to allow you to follow them from one end to the other.
Also of note: basic fare is just 20 cents!
Our rating: Groovy, man! A psychedelic re-imagining of a long-serving and functional map. Four stars.
Source: Eric Fischer/Flickr
Simply enormous map at the Estació de Barcelona-Sants, showing both the Metro and commuter rail networks. It’s made up of twenty-eight square screens, each of which looks pretty big in their own right!
Source: fredajude/Flickr – link no longer active
Submitted by Peter Dovak, who says:
Spotted a new schematic installed at Pentagon City Metro station in Washington this week. I’m not sure if this is experimental or what, but I’ve never seen such detailed line info at a station here before. Not a huge fan of the execution, though, the labels are awful skewed!
Transit Maps says:
In the limited space allowed here, angled station labels are pretty much the only workable option. It’s actually not dissimilar to the established framework used for line maps on the New York Subway (and many other cities), although they usually only show the one route, not four. The white pointer lines passing through the Orange Line to join station dots to names are not ideal, but are again a product of the space limitations.
Even though you can only catch Yellow and Blue Line trains from this platform, the map also shows the Green and Orange Lines. In principle, this is fair enough – the lines share physical track and stations for much of what is shown on this map, although this is what also leads to such a complex and convoluted looking map.
However, I personally believe that a strip map like this should only show stations that can be reached directly with trains that serve the station the sign is at: in this case, that’s just Blue and Yellow Line trains. Transfers to other lines could be shown as the Red Line is here: with a small coloured dot. While I believe it is possible to transfer to the Orange and Green lines at any of the stations they share with the Blue or Yellow Lines, it’s really preferable to do so only at the major interchange stations, and the placement of transfer dots should reflect this.
Introducing the level of complexity that this strip map has leads people to expect that it shows everything they need to navigate their way around the system (in effect, competing with the actual system map). However, the information shown here is incomplete: there’s absolutely no reference on this map to the Green Line’s leg from L’Enfant Plaza to Southern Avenue, nor the Orange Line’s leg from Rosslyn to Vienna. According to this map, they simply don’t exist. Yet the branch of the Orange Line to New Carrollton (which doesn’t share any track with the Blue Line) is shown in full detail.
Finally, if this approach is continued into the future, then the whole map is just going to have to be redone when the Silver Line is opened, further increasing the complexity.
A system as simple as Glasgow’s (one loop of track with a mere 15 stations) lends itself well to a minimalist design approach. Indeed, the current official map is pretty darn simple itself.
However, this neat little two-colour poster from Glasgow-based creative agency, Verboten, definitely takes a very different approach to that minimalism. It eschews any attempt at geography, dispensing with the River Clyde completely (although the gaps between the groups of stations give away its location for those in the know). Red lines lead way from large station dots to the corresponding station names, as well as a handy list of nearby points of interest (but not connections to other rail services).
For me, these connecting lines are the weakest point of the poster, being overly busy in some cases (Bridge St, for example) for a “minimalist” poster. I’m also not fond of the way that the lines for Cessnock and Kinning Park cross over each other: Cessnock could easily fit under Ibrox and negate the need for the crossover at all.
The “G” logo is a clever idea: reminiscent of the new “S” logo that the subway has adopted without being derivative of it. I just wish the “G” was centred a little better in the circle (it seems too far to the left to me).
Our rating: Despite my minor quibbles, this is still a very attractive interpretation of this venerable transit system. I especially like the interesting colour palette: soft, yet still dynamic at the same time. Three stars.
Source: Verboten Creative website – site no longer active
