Tileworks is used to generate Google Maps tiles from architectural floor plans (in PDF format).

Tutorial

This tutorial shows how to use Tileworks to generate tiles from an architectural drawing PDF file. There are two stages:

• Determining various settings that will align the drawing with the real world (in both scale and orientation).
• Generating the actual tiles using those settings.

The first stage is difficult while the second one is mechanical.

1.1 Determining Settings from the Drawing

First you need to determine the scale and the orientation of the drawing. These pieces of information may already be in the PDF file itself:

• The scale might be stated in the PDF file in the form 1/64" = 1'-0". This means (1/64)" on the map is equivalent to 12" in the real world. That is, 1" on the map is equivalent to 768" in the real world. The scale is thus 768.
• The orientation can also be determined from a compass sign inside the PDF file. The North direction is measured against the vertical axis of the computer screen. It comes out to about 24.5 degrees. Note that if the North axis tilts to the right, the angle is a positive number; if it tilts to the left, the angle is negative.

Next, you need to determine how much margins to cut off from the PDF file to eliminate extraneous information such as the footer. Margins are expressed in inches. If all margins are the same, then specify only one number. If the top and bottom margins are equal, and the left and right margins are equal, then specify two numbers separated by a comma. Otherwise, specify all four margins in a comma-separated list, in the order of top, right, bottom, left.

Then, having the scale, orientation, and margins, create a .properties file containing those settings as follows:

   pageScale = 768
   pageAngle = 24.5
   pageMargins = 1.8,4
   alignZoom =
   alignInchesPerPixel =
   alignStrokeScale =
   alignTileX =
   alignTileY =
   alignShiftX =
   alignShiftY =

Note that the other settings will soon be determined.

1.2 Finding the View for Performing Alignment

Next, point your Firefox browsing to

 http://simile.mit.edu/repository/tileworks/trunk/src/main/webapp/

Copy those 3 files into a local directory, and open align.html in Firefox. This is the interface that will allow you to align the generated tiles with the real world map.

Zoom, pan, or use the address lookup feature at the top to locate the real world building that corresponds to the drawing in the PDF file. Then, choose the zoom level at which the building looks large enough so that you can perform the alignment accurately. The building should occupy more than half of the height of the map, but it should not overflow outside the map.

Once you're happy with the zoom level, scroll down the web page to find two new settings automatically computed for you, e.g.,

 alignZoom = 19
 alignInchesPerPixel = 8.68601761162538

Copy these settings into your .properties file.

You should also see another setting called alignStrokeScale, e.g.,

 alignStrokeScale = 5

Copy it into your .properties file as well. This setting is not computed. It's just a heuristic for making the strokes in the drawing darker in the generated images at lower zoom levels.

1.3 Generating The Image for Alignment

Now you need to download the tileworks.jar from

 http://simile.mit.edu/repository/tileworks/trunk/tileworks.jar

Then, in the command line, run something like this

 java -jar tileworks.jar -settings 32.properties -in 32_1.pdf -out 32_1.png

presuming that you store the settings in the file 32.properties. This will generate an image file named 32_1.png which you will use to determine more settings.

1.4 Performing the Alignment

Return to the align.html web page in Firefox and type the file path of the generated png file into the text box below "Overlay Image:", e.g.,

 file:///Users/me/temp/32_1.png

and click "Overlay". That should insert the image into the map. Move it around until you have aligned it with the real world building on the map. Use your judgment.

You might have to go back to the settings file, tweak the pageAngle and the alignInchesPerPixel settings, generate a new image, and overlay the new image.

Note that if your image looks smaller than the building, then you need to decrease alignInchesPerPixel; and if the image looks bigger, increase alignInchesPerPixel. This might seem counter-intuitive.

Once the alignment is satisfactory, scroll down the web page to retrieve more settings:

 alignTileX = 9911
 alignTileY = 12117
 alignShiftX = 61
 alignShiftY = 246

Put those settings into your .properties file.

2.1 Generating All the Tiles

Now that you have all the settings, you can generate the tiles as follows

 java -Xmx256M -jar tileworks.jar -mode generate -settings 32.properties -fromZoom 17 -toZoom 21 -in 32_1.pdf -out 32/floor-1/

This generates tiles at zoom levels 17 to 21 and store the images in the directory 32/floor-1/. It also generates a mappings.json file in that directory. This json file stores the information needed for serving the tiles correctly.

2.2 Testing the Tiles

Go back to the align.html web page and type the path to the output tile directory into the text box below "Overlay Tiles:", e.g.,

 file:///Users/me/temp/32/floor-1/

Then copy and paste the content of mappings.json into the text area below, and then click "Overlay". You should see your newly generated tiles on the map. Zoom and pan and check that they are aligned at all the zoom levels.