MapDotNet Blog

The blog site for everything MapDotNet

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login

Mashing Up Old School Cartography with New School MapsJS and KnockoutJS

Posted by on in Uncategorized
  • Font size: Larger Smaller
  • Hits: 2350
  • Subscribe to this entry
  • Print

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!