Instructions for the Pocket PolyLine for Historical Overlays!

The Pocket PolyLine for Historical Overlays! is based upon this Google API Maps Tutorial Example, as well as this one.

Historical Overlays Placement Example:

The Pocket Polyline for Historical Overlays! incorporates six different measurements (along with a “scaling value”) to create precise, pre-formatted “HTML-code” for displaying Google API map “historical overlay” images on your Google API map web pages.

The six measurements incorporated to create the HTML-code, that will be demonstrated in the working historical overlays example further below, are as follows:

1) The “height” of the historical overlay image to be used, in millimeters. This value will be entered into the “Historical Overlay Height” text box in the “Historical Overlays PolyPocket” on the right-hand-side of the Pocket PolyLine for Historical Overlays! web page. (The other five measurements listed below will also be entered into text boxes in the “Historical Overlays PolyPocket.”)

2) The “width” of the historical overlay image to be used, in millimeters. This value will be entered into the “Historical Overlay Width” text box.

3) The “Y-coordinate” height, in millimeters, of a point chosen on the historical overlay image to be used, that will coincide with an identically-positioned point present on a current-day Google API map—such as the intersection of two small roads whose location has not changed since the historical overlay map was first published.

4) The “X-coordinate” width, in millimeters, of that same chosen point on the historical overlay image. (Both “Y-coordinate” and “X-coordinate” values will be entered into their respective “(Y) Height” and “(X) Width” text boxes.)

5 & 6) The “latitude” and “longitude” coordinates of the chosen point on the historical overlay image, as determined on the Pocket PolyLine for Historical Overlays! Google API map. These “latitude” and “longitude” values will be automatically stored for you by the “Historical Overlays PolyPocket” when you position the red marker (1) icon on the chosen point on the Google API map.

A “scaling value” will be entered into the “Historical Overlay Scale” text box in the final step of the working example below. The “scaling value” can be found to the right of the red text, “Red Polyline Scale Estimate,” near the top of the Historical Overlays PolyPocket. This estimated “scaling value” is determined by the moving of the red marker (2) icon to a position on the Google API map that appears to you to coincide with the terrain and/or man-made features present at the top of the historical overlay image being used.

Two “HTML” files will be used to create the pre-formatted HTML-code for use on your Google API map historical overlays web pages. Both of these files should be placed in the same folder on your computer, or website.

The two HTML files are:

[“pocket-polyline-historical-overlays.php” and “pocket-polyline-historical-overlays-test-map.php”].

Both of these “HTML” files are contained in the Pocket PolyLine for Historical Overlays! HTML external-files page.

The “historical overlay” image that will be used in the working example below, a 1922 “historical city map” of Newark , New Jersey [http://whowillbethenextonline.com/newark_nj_1922-661x516.jpg], should also be placed in the same folder as the two “HTML” files listed above, upon download:

1922 historical Newark, NJ city map.
[Irfanview screenshot]

The Newark, New Jersey, historical city map shown above has had the white border that had originally surrounded it “cropped” in a Microsoft Digital Image Editor to make it easier for you to line up the roads and terrain on the Newark, New Jersey, map with those same roads and terrain on the Google API map that it will be positioned above—on a “Pocket Polyline for Historical Overlays Test Map.”

The source of the 1922 “historical city map” shown above of Newark, New Jersey, is linked-to from the following “U.S. Historical City Maps” web page on the University of Texas Libraries website,

http://www.lib.utexas.edu/maps/historic_us_cities.html,

under the link-title: “Newark, New Jersey 1920 Automobile Blue Book, 1920, Vol. 3 (176K)”:

https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg.

To get started with our working example, please open the border-less 1922 historical city map of Newark, New Jersey, in your Image Editor. We will choose a point on the border-less map: the intersection of South Orange Ave. and Springfield Ave., in the heart of Newark, New Jersey. That intersection can also be found on the Google API map on the Pocket PolyLine for Historical Overlays! web page, which you should open now, if it is not already opened.

Note: The Pocket PolyLine for Historical Overlays! will open up in your browser displaying the city of Newark, New Jersey, in the United States, by default. If you wish to view a different location in the world, enter the location’s “latitude” and “longitude,” in “decimal coordinate format,” into the appropriate “World Location” text boxes at the bottom, center of your computer screen.

In my Microsoft Digital Image Editor, with the editor’s “unit of measurement” set for “millimeters,” I have placed the cursor at the intersection of South Orange Ave. and Springfield Ave....

Google API Map ScreenShot Image
[Irfanview screenshot]

and notice that the historical city map measures 87.38-millimeters in “height,” and 111.93-millimeters in “width,” and that the “X,Y-coordinates” of the chosen point at the intersection of South Orange Ave. and Springfield Ave. are: (Y) Height: 54.86-millimeters, and (X) Width: 49.95-millimeters.

Please enter these four values into their respective text boxes in the “Historical Overlays PolyPocket” on the Pocket PolyLine for Historical Overlays! web page.

With the four “height” and “width” values entered into their respective text boxes, it’s time to place the red marker (1) icon at the intersection of South Orange Ave. and Springfield Ave. on the Google API map. (For your convenience, the red marker (1) icon has already been centered at that intersection on the Google API map.)

Google API Map Screenshot Image
[Irfanview screenshot]

With the four text boxes filled-in, and the “Historical Overlay Scale” text box left empty for the moment (a default “scaling value” of “50” is activated whenever the “Historical Overlay Scale” text box has been left empty), you can now click the “Update Image Cache Below” button—to send calculations made using the four text box value-entries (in addition to the default (50) “scaling value” and auto-stored “latitude” and “longitude” coordinates of your chosen point on the historical city map) down to the “Historical Overlay Image Coordinates-Cache” section of the “Historical Overlays PolyPocket.”

Google API Map Screenshot Image
[Irfanview screenshot]

The updated “latitude” and “longitude” coordinates seen in the “Historical Overlay Image Coordinates-Cache” section above (at the bottom of the “Historical Overlays PolyPocket”) are ready to be sent to the “Pocket Polyline for Historical Overlays Test Map” web page, that is accessed by clicking the “View Image Cache Changes” button at the very bottom of the “Historical Overlays PolyPocket.”

Google API Map Screenshot Image
[Irfanview screenshot]

On the “Pocket Polyline for Historical Overlays Test Map” that you will be directed to, you will notice (as on the Irfanview “screenshot” above) that the 1922 Newark, New Jersey, historical city map needs to be a little larger in size if it is to be “synchronized” with the same features on the Google API map beneath it.

You can check to see that the intersection of South Orange Ave. and Springfield Ave. on the Newark, New Jersey, historical city map is “in sync” with that same intersection on the Google API map, by “toggling” the “Remove Overlay” and “Restore Overlay” on-screen buttons—that remove and then restore the historical city map.

We can now return to the Pocket PolyLine for Historical Overlays! web page (by clicking the “Back to Pocket Polyline” on-screen button) to add a “scaling value” to the empty “Historical Overlay Scale” text box so as to improve the synchronicity of the 1922 historical city map, and Google API map, on the “Pocket Polyline for Historical Overlays Test Map” web page.

The red “polyline” connecting the red marker (1) icon and the red marker (2) icon on the Google API map can be used to estimate the correct “scaling value” to be entered into the “Historical Overlay Scale” text box.

Here’s how: Simply move the red marker (2) icon to a spot directly north (at a “zero heading”) of the red marker (1) icon, that looks to be at about the same location as the terrain and/or man-made structures (such as roads) seen at the top of the historical city map of Newark, New Jersey. (“Zooming-in” a little on the Google API map to get a closer look at the terrain and the roads can be helpful. The Google API map’s “Zoom Control” is located on the left-hand-side of your computer screen.)

(Note: Do not move the red marker (1) icon—that has been centered at the chosen point at the intersection of South Orange Ave. and Springfield Ave.—or you may have to start this example over.)

When you have settled upon an approximate location for the top of the historical overlay image, by the moving of the red marker (2) icon on the Google API map, look over at the value listed to the right of the text “Red Polyline Scale Estimate” near the top of the “Historical Overlays PolyPocket.”

Google API Map Screenshot Image
[Irfanview screenshot]

Enter that “scaling value” estimate into the “Historical Overlay Scale” text box (in the case of this example, an estimated “scaling value” of “74.673” was entered into the “Historical Overlay Scale” text box) and then click the “Update Image Cache Below” button—to load coordinates into the “Historical Overlay Image Coordinates-Cache” text boxes—and then click the “View Image Cache Changes” button to proceed to the “Pocket Polyline for Historical Overlays Test Map” web page to see how the historical city map of Newark, New Jersey is positioned now on the “Test Map.”

Google API Map Screenshot Image
[Irfanview screenshot]

The 1922 historical city map of Newark, New Jersey, in the screenshot above, looks pretty accurately positioned using the “74.673” estimated “scaling value.” Your estimated “scaling value” may look even more precise!

You can now return to the Pocket PolyLine for Historical Overlays! web page and “copy” the pre-formatted HTML-code located in the lower-left of your computer screen—that you can then “paste” into your Google API map web-page files.

And the whole process only took a few minutes.

Note-1: You may not be able to “copy” the lower-left, pre-formatted HTML-code latitude/longitude coordinates in some Internet Explorer browsers.

Note-2: If your historical overlay image does not “align” with the Google API map beneath it to your satisfaction on the “Test Map” web page, it may be due to one or more of the following three reasons:

1) The “X,Y-coordinates” of your initial “chosen point” on the historical overlay image may not coincide with the same “chosen point” latitude-longitude coordinates on the Google API map.

2) Your estimated “scaling value” may need a slight adjustment higher or lower.

3) The historical map image itself may not be 100% “to scale” along all of its borders due to the limitations of the surveying technology at the time of the map’s publication.

Note-3: The HTML-code for the It’s the Pocket PolyLine for Historical Overlays! files can be found here:

Pocket PolyLine for Historical Overlays! HTML-code files.

Have fun creating “HTML” Historical Overlay code with the aid of the Pocket PolyLine for Historical Overlays!

P.S. For the heck of it, type a “scaling value” of “0.1” into the “Historical Overlay Scale” text box on the Pocket PolyLine for Historical Overlays! web page, with the other four text boxes filled-in as for the working example above, and then click the “Update Image Cache Below” button—and then the “View Image Cache Changes” button—to return to the “Pocket Polyline for Historical Overlays Test Map” web page.

It will appear to you at first glance that the 1922 Newark, New Jersey, historical city map is no longer positioned on the Google API map. But, if you slide the Google API map’s “Zoom-Control” (located on the left-hand-side of your computer screen) all the way up to the closest viewing setting, “19,” you will see the tiny 1922 Newark, New Jersey, historical city map smack-dab in the intersection of South Orange Ave. and Springfield Ave.!

Google API Map Screenshot Image
[Irfanview screenshot]

And the pre-formatted HTML-code for this mini-version of the 1922 Newark, New Jersey, historical city map overlay is waiting for you back on the Pocket PolyLine for Historical Overlays! web page!