Hack 56. Pin Your Own Maps to Google Maps with TPhoto

Georeference your own maps and then pin them anywhere.

The first time I visited New York City from the Bay Area, I was excited to see everything, all at once. I figured that Manhatten is small, about 10 1/2 miles from tip to tip, and the boroughs are just a bit larger. How long could it take to go 10 miles?

A temporary New Yorker friend told me, "You can think of Manhattan as being the whole Bay Area. Sure you can drive from Palo Alto to San Francisco, across to Oakland and down the East Bay to San Jose, but would you? Manhattan is physically smaller, but in terms of travel times it is similar."

We can use TPhoto [Hack #55] to take an image of one place and center it in another. At http://www.mappinghacks.com/projects/gmaps/brc_ref.html you see the Google aerial photo of the site of the Burning Man festival in the Black Rock desert of Nevada. If you click "show plan," you'll get the 2005 Burning Man city plan overlaid on the Google Map as shown in Figure 6-14.

Figure 6-13. Blackbirds at 100% opacity

But you don't have to overlay the city plan on the Google Map in the proper place! You can scroll the map to another area and then click on a point to overlay the city map on that point. Figure 6-15 shows a hypothetical Burning Apple festival centered on 79th Street in the middle of Central Park.

It is interesting that Manhattan is oriented nearly the same way as the Playa, from southwest to northeast, and the Festival covers about two-thirds of the width of Manhattan. The Metropolitan Museum of Art ends up more or less by the Large Scale Sound installations.

The distance from Center Camp to the perimeter fence is about 27 city blocksfrom 72nd Street to 99th Street. And moving out a few zoom levels leaves us in awe at how tremendously big and dense an experience it is to be in New York.

Taking it home, way home to Sebastopol, and centering on O'Reilly, gives us the results in Figure 6-16.

This was produced with the single-point method of TPhoto [Hack #55]. This makes TPhoto work as a simple georeferencing tool. Georeferencing is the act of mapping the pixel space of an image to a coordinate system that is pegged to the earth's surface.

Figure 6-14. Black Rock City in its proper place

You need to provide the image size, zoom level, and a single point. But we can change the properties of a TImage object dynamically. As an example, let's georeference the Black Rock City 2005 Plan. You can download the 65KB PDF image from http://www.burningman.com/preparation/maps/05_maps/. First convert the PDF to a JPEG. You can do this in any image-processing tool. If you have ImageMagick installed, this command works:

	convert brc_2005.pdf brc_2005.jpg

Next, you need to find the pixel coordinates of a recognizable point. I used the GIMP to edit the image. Photoshop would also work. Open the image, then zoom in and place the cursor right over the Man. I get x=917, y=963. Also note the height and width of the image: 1833 x 2274.

Finally, you need to rotate the image so that North is up. I used the rotate tool to align the grids with the North arrow. It was a -37 degree rotation.

This is the core code that overlays the image:

	var brc = new TPhoto();
	brc.id = 'brc';
	brc.src='images/brc_2005_rotate.jpg';
	brc.size = new GSize(2032, 2432);
	brc.baseZoom = 1;
	brc.percentOpacity = 40;
	brc.anchorPx = new GPoint(1110, 948);
	brc.anchorLatLng = new GPoint(-119.23616409301758,40.754279292683094);

Figure 6-15. Black Rock City centered on Central Park

This loads the image images/brc_2005_rotate.jpg and centers it so that the x,y pixel coordinate maps to the passed lat/long. You can adjust the Gsize (specified in pixels) and baseZoom so that the displayed image takes up the right amount of space. This happens automatically with the two-point use of TPhoto.

You can change the opacity of the overlaid image [Hack #55]. This HTML defines two buttons that increase and decrease the photo opacity when they are clicked:

When the buttons are clicked, either +10 or 10 is passed to the changeOpacity method:

Figure 6-16. Black Rock City centered on O'Reilly Media

	function changeOpacity (z) {
	 var temp = brc.percentOpacity;
	 temp += z;
	 if (temp > 100) {
	 temp = 100;
	 }
	 if (temp < 0) {
	 temp = 0;
	 }
	 map.removeTPhoto(brc);
	 brc.percentOpacity = temp;
	 map.addTPhoto(brc);
	 document.getElementById('opacity').value = brc.percentOpacity;
	}

This routine attempts to increase or decrease the opacity by the passed +10 or -10 and then checks that the opacity is not greater than 100 or less than 0. Assuming it is within range, it removes the photo from the active map, sets the opacity to the new value, and then redisplays the image and updates the displayed opacity.

The showImage method is called when the user clicks "show plan," and is even more simple:

	function showImage() {

	 show = 1-show;
	 if (show == 1) {
	 map.addTPhoto(brc);
	 document.getElementById('showplan').value = 'hide Plan';
	 } else {
	 map.removeTPhoto(brc);
	 document.getElementById('showplan').value = 'show Plan';
	 }
	}

The variable show serves as a toggle. It is initially set to 0, and then the line show=1-show toggles it between 1 and 0. When it is 1 the photo is displayed and when it is 0 the photo is hidden.