Viewing Georeferenced Historic Maps in GoogleMaps

From NCMaps
Jump to: navigation, search

Main Page > Viewing Georeferenced Historic Maps in GoogleMaps

These instructions allow you to take a georeferenced map (see section on georeferencing historic maps) and view it as an overlay on a current map. The viewer is a GoogleMaps viewer that was specifically designed to work with websites for the Carolina Digital Library and Archives' digital collections, but could be modified to work with other websites as well. The historic map can be made transparent (to a set degree of transparency) so that one can see the current map underneath, and the user can zoom in to a level specified by the creator.


  1. Select the map that you want to georeference. Open it in Adobe Photoshop and check the image size; you're aiming for an image size around 200MB (although it will probably be much larger).
    • If the image size is too large, change the resolution to 300 psi and/or adjust the pixel height and width.
    • Save the re-sized image with the map ID as its file name (example: MC_016_1923j.TIF).
  2. Georeference the map using GIS software such as Global Mapper or ArcGIS.
  3. Check the map's projection (in Global Mapper, click on the Configuration icon and then the Projection tab). Make sure that your projection is Geographic (Latitude/Longitude) and that your datum is WGS 84. (If you're using the wrong projection, your map won't display correctly in GoogleMaps.)
  4. If you are using Global Mapper, save the workspace (by clicking the save icon).
  5. If the image that you have georeferenced is a TIFF file, export it as a PNG file.
    • In Global Mapper, click on File -- Export -- Export Raster and Elevation Data -- PNG.
    • Export and save the map as a PNG file with the map ID as the file name in the appropriate directory on the P: drive (or save in a folder on the C: drive and then move the folder onto the P: drive).
    • A box with specifications pops up before you hit save; save in 24-bit color (you'll probably have to change this) and with a transparent background (this is usually pre-selected).
  6. The map should now be saved as a PNG file, and it should automatically have associated world files (prj and pgw).
    • If you are creating a PNG using ArcGIS, make sure that your PNG, PRJ, and PGW files have corresponding names. (That is, if you have MC_68_1920j.png, you should also have MC_68_1920j.prj and MC_68_1920j.pgw.)
  7. Open the PNG in Photoshop and check the image size, taking note of the image height and width.
    • If you georeferenced your map using ArcGIS, look in the lower right corner of Photoshop. If your PNG image is displaying as a background layer, right-click on the layer and select Layer from Background.
      • Make sure the background pixels are transparent. You may have to crop your image if it has a black or obtrusive border. Save your adjusted image.
  8. Open the command line prompt (Run--cmd), and move into the directory containing the PNG image.
  9. Run the php create tile script in this image directory (command below). This creates a JavaScript file which you will use later to make lots of little tiles out of the map.
    • Enter php C:\scripts\createTileScript.php imageFilename.png "OutputDirectory/" minZoom maxZoom .
      • The imageFilename is just the name of your PNG.
      • The OutputDirectory is the folder that will be created to hold your tiles. You need to enter the entire file path, which lets the computer know where to put your new folder. The path needs to have forward slashes (unlike the back slashes we've been using thus far).
      • The minZoom and maxZoom are based on the zoom levels in Google Maps, and determine at what zoom level the map is first visible and how close you can zoom in and still see it. Take a look at Google Maps to get a feeling of what the different zoom levels mean--when you're zoomed all the way out, that's a zoom level of 0. Zoomed all the way in is a zoom level of 18. For most county-level maps, your minZoom and maxZoom will be about 8 and 15. For city-level maps, they'll be more like 11 to 17. It's a little different for every map, but these will give you an idea of where to start.
    • An example of this script for the Polk County map (map ID MC_080_1923l) is: php C:\scripts\createTileScript.php MC_080_1923l.png "C:/MC_080_1923l/" 8 15, which runs the createTileScript for the georeferenced image MC_080_1923l.png, creates a directory called MC_080_1923l to hold the tiles, and sets the minimum and maximum zoom levels to 8 and 15, respectively.
  10. After you hit enter, you will see some information about the tiles that will be created, including the pixel height and width of the image. These dimensions should be roughly the same as those of the PNG file when you viewed it in Photoshop. If they're wildly different (for instance, a number in the millions when your PNG was 7000x8000), this is a sign that something's amiss--check your zoom levels and your projection, and then try running the createTile script again.
  11. Open the image file (PNG) in Photoshop.
    • In Photoshop, go to File--Scripts--Browse. Navigate to the folder that holds your PNG.
    • In the drop-down menu called "files of type," change the type to JavaScript files. You should see the file that you created. (It will have a name like "MC_080_1923l-ps-cut.js").
    • Click on the JavaScript file and then click Load.
      • The image will start blinking in an alarming way, but don't worry! This just means that it is making all of the tiles and putting them into the directory that you specified. It can take a while (upwards of an hour), especially for a bigger map.
      • When it's done, a little box will pop up that says "Finished!!!". You can close Photoshop, and you don't need to save changes.
  12. At the command prompt, navigate into the directory that holds your tiles
  13. In this tiles directory, run the output script: php C:\scripts\maps2earth.php outputFilename "Map Title" . This will create one KML file for each tile, allowing the computer to know where to put each tile.
    • The outputFilename is the name that will be given to the big KML file for the whole map. It should be the same as the name of your PNG, but without a file extension (for instance, if your map is called MC_080_1923l.png, the outputFilename will just be MC_080_1923l).
    • The Map Title is the title that will be displayed next to the map in Google Maps.
    • An example of this for the Polk County map (map ID MC_080_1923l) would be: php C:\scripts\maps2earth.php MC_080_1923l "Polk County Soil Survey 1923", which will create kml files for each tile of the map, one big KML called MC_080_1923l.kml, and will display the map title "Polk County Soil Survey 1923."
    • For big maps, this can take a while (4 or 5 minutes), since it has to make a lot of KML files. When it's done making the files, your blinking cursor will return at the command prompt.
  14. Look in your tiles folder. There should be one kml file with the name that you specified (the rest will have numbered titles).
    • Double-click on the kml file for the whole map. It will open your historic map as an overlay in GoogleEarth (not Google Maps). This is your chance to make sure everything is lining up correctly.
    • Find the north, south, east, and west bounding coordinates for your historic map by moving the pointer over the map. (Make sure you're recording them in decimal degrees, not degrees/minutes/seconds.) Write them down! You'll use these to help GoogleMaps know where to center your map.

Creating the HTML Page (specific to North Carolina Maps pages)

  1. Look in the GIS folder (under Working Files); you should see a file called html_template.html.
    • Rename the html file with the map ID (for instance, MC_080_1923l.html).
    • Open this html file with Notepad++. Here, you need to change a few things to make the file specific to your map.
      • In line 4, change the title to include your map's title (or an abbreviated version thereof). Include the year of publication.
      • In line 13, change the zoom levels (to the same ones you specified when you ran the createTile.php script), the path to the tiles (a relative reference, pointing to the folder within the web/maps/ folder), and bounding coordinates (which you just found in GoogleEarth). If you're confused, look at the note in line 12, and it will tell you the order in which to enter this information.
      • In line 15, enter your map's abbreviated title again.
      • In line 26, enter your map's abbreviated title at the end of the line (after "Historic Overlay Maps > ").
      • In line 44, enter the abbreviated title once again.
      • In line 80, enter the reference URL for your map (from the NCMaps website).
      • In line 96, enter the reference URL again, along with the map's full title and date of publication.
    • That's it! Save the html file.
  2. Open the html file with Firefox or Internet Explorer. If it worked correctly, you'll see your georeferenced historic map in GoogleMaps, and should be able to zoom in and out appropriately. Congratulations!
Personal tools