The Isle of Alameda

The best way to learn how to make your own maps is to map someplace familiar. The place I live, Alameda, is an island in the San Francisco Bay, but existing maps don’t do it justice.

So as part of my Fun With Maps project I set out to disentangle Alameda from the urban sprawl that surrounds it and, using open source data, make a cleaner map that captures the windblown isolation of a real island.

My starting point was Open Street Map (OSM), the wikipedia of the mapping world. Here is what Alameda looks like in OSM:

The Open Street Maps view of Alameda

Uck! What a mess. The orange outline shows the boundary of Alameda proper, but I am only interested in the main island. So to begin I select a tight rectangle around the island and export that as an SVG file:

Initial import of SVG vector paths

When I import this file into NodeBox and ungroup it I have nothing but 37,688 individual vector paths. There is no metadata; from here on out I have to reverse engineer everything myself.

My first step is to get rid of that corner of Oakland and all the gunk outside the main island. To do this I find the island’s outline path; feeding that into a Delete node removes everything outside it. I am now down to 24,024 paths.

Now the real sifting begins. I take a tour of my data by making a quick NodeBox movie: I slice 100 paths at a time and shift the starting point with each frame. When I hit play the result is moving spotlight which reveals how the paths are ordered.

Fortunately there is a discernible order. The land features (low tide boundaries, lagoons, airport runways, etc.) are in one section, building footprints in the next, streets after that, labels after that. I have only to pause the movie, note the index where one section ends and the next begins, and separate it all into distinct piles.

I now discover that there are 20,199 individual structures on the island: houses, detached garages, businesses, apartment buildings, etc. Even if you strip away all other paths, the building outlines alone nicely trace the overall shape of the island and even local features like lagoons and streets. The negative space around buildings is eloquent.

Building outlines reveal the shapes of streets and lagoons

Now that everything is organized into piles, I have only to toss what I don’t need (e.g. labels) and color the rest according to my own tastes. Here is the final result, a proper island:

My final version of The Isle of Alameda

If you don’t want to reverse engineer your own map using only SVG paths, there are alternatives. Mapzen is a commercial site which packages open source street map data and does much of the dirty work for you. They charge for polished products and high-volume data, but small amounts of data for personal projects are often free.

Like many recent open source mapping tools, Mapzen exports data in a format called GeoJSON. GeoJSON is just an ordinary JSON file with a standardized structure that associates metadata with boundary paths in a consistent way.

I created a Mapzen account and downloaded Alameda OSM data to check it out. Some features did come with metadata that allowed me to identify fire stations, hospitals, gas stations, schools, etc.) but the coverage was spotty. This is the problem with open source data: it’s free but often incomplete.

The abundance of open source mapping data, and tools like OSM and Mapzen, allow anyone to make their own maps. The possibilities, both for business and personal uses, are endless. In my next installment of Fun With Maps, I will learn how to tap into U.S. Census data and apply it to my own maps to reveal hidden patterns.