Making Building Footprint Posters

I have been inspired by Maptime's Street Patterns tool for making street pattern posters to make my own building footprint posters. Maptime's Street Patterns is a wizard for making map posters from street patterns which can be found at different locations around the world. The tool uses data from OpenStreetMap to create small circular images consisting of just the street map of your chosen location.

I applied some of the tricks used by Maptime's Street Patterns tool to make the above building footprints map of Lafayette Park in San Francisco. You can make a similar map poster for yourself for any location in the world by following these two simple steps.

1. Open Overpass Turbo

In Overpass Turbo navigate to the area that you want to map and enter the following query:

[out:json][timeout:25];
// gather results
(
  // query part for: “building”
  node["building"]({{bbox}});
  way["building"]({{bbox}});
  relation["building"]({{bbox}});
);
// print results
out body;
>;
out skel qt;

Then press 'run'.

Overpass Turbo will highlight all the building footprints in your current map view. Now click on 'Export' and select 'copy as GeoJSON'.


2. Open Geojson.io

Open geojson.io and past in the geoJSON you saved from Overpass Turbo. The building footprint data you copied will now be loaded onto the map. Now if you open your browser's developer tools you can cut and paste the SVG element data from the #leaflet-map-pane .leaflet-overlay-pane DOM element (see screenshot above).

If you cut and paste the SVG data element into a text editor you can save it as an SVG image, for example as 'Lafayette.svg'. Once you've saved your SVG image you can play with it in any SVG editor, such as Inkscape.

Because you saved the SVG data in a text editor you can also add a little color to your footprint data. Just select '#555555' in the text and replace all instances with your own color. You might also want to remove all instances of fill-opacity="0.5".