Frontier Nerds: An ITP Blog

Ever wanted to download Google Street View panoramas programmatically?

I reverse-engineered their URL query scheme using the Live HTTP Headers plug-in for Firefox. From there, I just parsed through the XML returned to download each jpeg tile and then stitch them together in order.

I used a variation of this code in combination with a few other programs to parse a GPS log, download the street view panorama for each position in the log, and then stitch each frame together into a video documenting my trip on the M5 bus.

import processing.core.*;
import processing.net.*;
import processing.xml.*;

// get a hold of this for the xml library
// better way to do this part?
PApplet main = this;

void setup() {
  // we usually end up with 3328 x 1664 pixel images
  // let's undersample considerably for a more sane window size
  size(832, 416);

  // your google maps api key goes here
  // sign up: http://code.google.com/apis/maps/signup.html
  String apiKey = "REPLACE ME WITH YOUR VERY OWN API KEY";

  // pick a location
  // takes an address or a lat / lon
  String location = "721 broadway, new york, ny";

  // generate the panorama
  Panorama pano = new Panorama(location, apiKey);

  // show the image
  image(pano.fullPano, 0, 0, width, height);

  // save the full-res image to the sketch folder
  pano.fullPano.save(location + ".jpg");

  // skip the draw loop
  noLoop();
}

class Panorama {
  float lat;
  float lon;
  String panoId;
  int imageWidth;
  int imageHeight;
  int tileWidth;
  int tileHeight;
  int xTileCount;
  int yTileCount;
  PImage[][] tiles;
  PImage fullPano;
  String apiKey;

  // constructor
  Panorama(String address, String _apiKey) {
    apiKey = _apiKey;
    String[] location = geocode(address);
    lon = float(location[0]);
    lat = float(location[1]);
    fetchInfo(lat, lon);
    buildImage();
  }

  void fetchInfo(float lat, float lon) {
    String url = "http://maps.google.com/cbk?output=xml&ll=" + lat + "," + lon;

    XMLElement response = new XMLElement(main, url);

    XMLElement kid = response.getChild(0);
    imageWidth = kid.getIntAttribute("image_width");
    imageHeight = kid.getIntAttribute("image_height");
    tileWidth = kid.getIntAttribute("tile_width");
    tileHeight = kid.getIntAttribute("tile_height");
    panoId = kid.getStringAttribute("pano_id");

    xTileCount = imageWidth / tileWidth;
    yTileCount = imageHeight / tileHeight;

    println("Panorama ID: " + panoId);
    println("X Tile Count: " + xTileCount);
    println("Y Tile Count: " + yTileCount);
  }

  void buildImage() {
    fullPano = createImage(imageWidth, imageHeight, RGB);
    fullPano.loadPixels();

    for (int xPos = 0; xPos<= xTileCount; xPos++) {
      for (int yPos = 0; yPos<= yTileCount; yPos++) {
        // &.jpg fools processing into handling it
        String imageUrl = "http://cbk0.google.com/cbk?output=tile&panoid=" + panoId + "&zoom=3&x=" + xPos + "&y=" + yPos + "&.jpg";
        fullPano.set(xPos * tileWidth, yPos * tileHeight, loadImage(imageUrl));
        println("Loaded tile " + xPos + "::" + yPos);
      }
    }

    fullPano.updatePixels();
  }

  String[] geocode(String address) {
    String cleanAddress = address.replace(' ', '+');
    String url = "http://maps.google.com/maps/geo?q=" + cleanAddress + "&output=xml&oe=utf8&sensor=false&key=" + apiKey;
    println(url);
    XMLElement location = new XMLElement(main, url);
    XMLElement kid = location.getChild("Response/Placemark/Point/coordinates");
    String rawCoordinates = kid.getContent();
    String[] latlon = shorten(split(rawCoordinates, ',')); // ditch the 0
    println(latlon);
    return latlon;
  }
}