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.

AboutJohn Cartan

I am a designer, inventor, and writer currently working as a Senior Design Architect in the Oracle User Experience Emerging Technologies group.


  1. Hi John,
    Open Street Map data’s super-fun to play around with isn’t it! I’ve been using it to build realistic 3d environments in Unreal Engine. I use JOSM to edit it, and clean it up. Then I use a tweaked version of the plugin to import it into the engine and dynamically generate the mesh data.
    Inspired by your beautiful map, I thought I’d run Alameda through my workflow and see what happens. Unsurprisingly, the wireframe ( ) looks pretty much the same as your SVG outline. That’s about 800k points and 450k triangles, but modern GPUs can sling that around without too many issues.
    So I added some other bits and pieces, and “a bit” of glow and, hey presto; the Tron-alike Alameda 3000!
    More shots here;

    As you say; it would be cool to layer some more interesting data on top of this. I’m looking forward to what Fun With Maps you come up with next!

  2. Ed,

    This is way cool! If you’d like to work directly with my SVG data instead of a PNG let me know.

    Alameda has more Victorians than anywhere else in the Bay Area except San Francisco. I’d love to have detailed 3D models of some of those homes, but that would be a lot of work. Apple Maps has a surprisingly decent 3D flyover of everything on the island, but it’s still pretty rough and much is obscured by melty-looking trees. I’ve sometimes daydreamed about finding a way to visualize the colors of houses across the island (both primary and trim) but haven’t thought of a lazy way of doing that either.

    My next installment will be a choropleth of Alameda broken down by census block groups. Stay tuned. And thanks again for sharing Alameda 3000!


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.