Still some problems of course, but check out the latest iteration of the real-time display app.
New in this version:
- Headsigns are trimmed and included. There is still some more cleaning to do though. Headsigns are quite inconsistent and I’m trying to just pull out prominent destinations.
- Heading arrows have been dimmed and placed behind the text headings. These only show up after all of the shapes have loaded. Clearly, there are some legibility issues right now, but I think the positioning is the way I like it and legibility can maybe be resolved with color changes.
- I’ve removed the randomly placed ‘vehicle locations’ that I’d been playing with. For now ;-)
Thoughts and comments much appreciated! If you follow the link above, you’ll be taken to a page where you can select stops. Pick one or a few and hit the button that says ‘use selected stops’. Then wait for something to go wrong and then tell me about it.
Is it too bold? It has to be too bold, right? Cause I think I kind of like it a lot.
See this version of the app directly!
In any case I got a couple new things working since yesterday:
- Trigonometry: I don’t totally understand it, but it is orienting those arrows that appear after a minute to tell you which way the bus is heading.
- That tileset. Yum.
- Route numbers have been removed from the second or third appearance of each route. Is anyone reading this colorblind? Can I get some feedback on that?
Yet to accomplish:
- Still need to accommodate portrait oriented screens (I’m using CSS vmin a lot right now).
- De-emphasise departures which are not real-time.
- Vehicle locations! Make them real instead of generating them randomly ;-)
I said when I was working on the bike map that I would get around to publishing the ‘source code’, and now that I’m preparing to leave the city, I feel I ought to finally do that. So! The basic idea of this post will be a step by step instruction for how to make yourself (or your city) an updated Cincinnati Bike Map. Strictly speaking, this will work for other cities too, but please note that the map was designed for Cincinnati in 2014 and other cities in other times, with different (data) structures may simply not work well at all.
Let’s get started!
Step 1: Get the software you’ll need: QGIS, PostGIS(a PostgreSQL extension), osm2pgsql, osm2po, GRASS, PHP(for one of the scripts), and Inkscape and GIMP for the final layout. All are free and open source and run on Linux (but probably other things too).
Step 2: Update the data! A big and important step. The vector data is all from OpenStreetMap and the process of editing OSM is well documented elsewhere, so I needn’t go into it at all here.
Step 3: Go to OpenStreetMap and navigate to the area you want to download. Be generous and include at least ten extra miles on all sides of the map you’ll be making. Click the ‘export’ tab and use the ‘Overpass API’. It will prompt you to download a large .osm XML file to your computer.
Step 4: Import that data into a PostGIS database twice: once with osm2pgsql and once with osm2po. The first will bring in the OSM data as-is, with as many tags as you care to import. To do it the way I did it, you should use this osm2pgsql.style file. The second one, osm2po will slice the linear path data (the streets and stuff) into a table of routable nodes and edges. For that one, you may want to try this configuration file. If that doesn’t work, the real point of it is to include paths that bikes can use (paths, pedestrian streets, stairs, etc), which are not included by default, while leaving out the rest.
Step 5: Process the data from osm2pgsql using this SQL script. It does quite a few things, including setting (short) street labels, calculating speed in mph, setting default speeds and lane-counts for no-data streets, identifying landmark buildings, and pulling a number of features into a consistent format for better/easier rendering.
Step 6: Run this SQL script to merge the two tables you’ve imported into one table that is both routable and has all of the important attributes/tags from OSM.
Step 7: Run tarjan.php on the new/duplicate segments table. This script uses Tarjan’s Algorithm to identify edges that connected at both ends to the main street network, and those that are not, leaving the results in a boolean field on that table.
Step 8: Once the dangling edges are identified, run this SQL script to drop the minor paths that go nowhere. Major dead-ending streets will be kept. Things like driveways will be dropped.
Step 9: Get the elevation data. I used data from the USGS (use their national map tool to download). I found that of the two decent resolutions available, one was too course (I could see pixels) and the other was too fine (I could see buildings). I chose to smooth out the finer data, using a neighborhood average in GRASS. I suppose you could also go at that the other way though too, increasing the resolution and then smoothing. The point is to get an amount of detail that just looks right and doesn’t have any visible pixelation: use your gut!
Step 10: Now you have all the data ready to go in your PostGIS database, and you just need to drop it into QGIS and style it. I wish things were easy enough that I could share a simple stylesheet with you; the way QGIS does it, the style information is all bound up with information about the table. That means that if your table/database/column/everything names are different from the ones I used, you’re going to have trouble making this run smoothly. In the interest of giving something here though instead of nothing, I’ll link to the QGIS map files used to render the main and inset maps (hills, transit, and trails). These may not be directly useful, but you could look at them as XML files, and see precisely how things were styled including line widths, hex colors, etc. It may also be useful to sample colors directly from the digital version of the map using something like GIMP. Once ready, export these maps as 300+DPI rasters using the following templates: main map, 1/3 scale inset maps.
Step 11: Now we have the base maps, we’re finally ready for the layout! I did the layout in Inkscape SVG, linking to the exported raster maps which I placed in an adjacent directory. You’ll have to re-link those, but the frames should still be in the right position.
Step 12: Profit.
Well, that’s about the gist of it. … I don’t actually think that hardly covers it, but there’s not enough time in the world to document everything for an uncertain future that may or may well not contain good bike maps. And anyway, I don’t expect anyone to slavishly duplicate my approach. We’ll call it a limited edition ;-)
If someone does actually want a real update though, I’m always available to answer questions, or if you’re the type to cut right to the chase, for hire. Email me!
Well, it will also be up for a week or so after that, but tomorrow is the night with all the people and the free food. If y’all haven’t been to DAAPworks before, it’s DAAP’s senior show, and it’s actually got a lot of interesting work in the areas of transport, civic design, cartography, and architecture.
My quick run through the building today, on my way to see the cranky ogres who run the plotting machines in the photo cave, dredged up at least five truly gorgeous maps, most of those local, and two of them definitely using OSM! It’s so rarely we get to see such pretty things. Here, to whet your desires, is a map from a DAAPworks of a couple years past, not my own, that I think is just incredible.
Like this one, a lot of the maps that are most beautiful don’t actually make much sense if you think about them too hard, or even a little. But such things, maps, landscapes, transit plans, buildings, are worth seeing, I think, because they remind us of the potential for grace and beauty in all things, good, bad, or nonsensical — and perhaps also of the excitement of the mind untamed by repetitive mental labor and cautious hedging.
Just a little update on and reminder of an earlier post:
Come on down to the Macaron Bar tonight for Final Friday! My friend Ivan and I are having our first little gallery show! It’s a collaborative project, mapping out the abstract space defined by the ghostlike threads of 300+ transit GPS transponders as they trace their way around the city for a single day.
A quick and dirty cell-phone capture of a really nice looking piece.
Some of the smaller pieces start at $20 and could make a lovely little souvenir. We hope you’ll come by tonight (and I also strongly recommend the Minumentals show at the AAC tonight [and their open bar]), but the pieces should also be hanging for the next few weeks, so you can come by later if you don’t make it.
Here is the faceberk event. Yay art!