The blog site for everything MapDotNet
The crew here on the MapDotNet team recently added support to our MapsJS map control project to support KnockoutJS for data binding. I wanted to put the new functionality to the test by creating a simple mash-up (there’s a term I haven't used in a while) of a historic map of our awesome town (Tallahassee!!). Within a few hours, I created a simple and effective map that overlays the old map on top of Bing Maps aerials using the MapsJS control. The coolest feature about this app is that you can toggle the opacity slider to see how things look today compared to 87 years ago.
Here’s how I did it:
I located a high-res digital copy of an antique map (c.1926) of Tallahassee by cartographer James Wynne in the Library of Congress Archive.
Next I located another antique called MapCruncher to rotate, stretch and scale the historic (non-georeferenced) map to align with the Bing Maps aerials.
After setting about 20 control points in MapCruncher, I exported a tile cache of the historic map and ran this utility to place the tiles in a quad tree file structure.
Once I had the historic map crunched and tiled, I downloaded the KnockoutJS sample on the MapsJS example page and was able to quickly wire up the bindings for an HTML5 range slider control to adjust the opacity of the historic map and my zoom icons for navigation.
One trick I had to do was rotate the map control 180 degrees. The historic map was drawn looking North to South so it appeared upside down on top of Bing Maps (which will give you a headache to read). To fix that, I added some additional css to rotate the map control which rotated the historic map to a readable perspective but now displays the Bing Maps tiles upside down.
Feel free to snag the HTML, JS and CSS files if you want to design your own old school map! http://apps.mapdotnet.com/Tally1926/app.htm