Switching Park Maps to NPMap and Leaflet

Posted on 20 Jun 2012 by Nate Irwin

Switching Park Maps to NPMap and Leaflet

We were recently asked to help redesign the nps.gov park maps (you can see the current version of a park map by going to https://www.nps.gov/yell and clicking on “View Park Map” on the left-hand side of the page). The maps are simple “Zoomify” versions of the Harpers Ferry Center park maps. These tiles can be created by a variety of tools, including the Zoomify Converter and Adobe Photoshop.

There are a few problems with the current approach:

  1. Most of the maps haven’t been georeferenced, so they can’t be overlaid on a traditional web map
  2. The current park map interface is Flash-based, which means it doesn’t work on iPads and iPhones

Before starting work on the new interface, we came up with a few requirements. Namely, we wanted to:

  1. Use only standard web technologies (no plugins)
  2. Support tiles stored in both the Zoomify and standard XYZ formats
  3. Implement an approach that supports geolocation and the more traditional web mapping paradigm

Our approach

We decided to use NPMap’s Leaflet base API, as it has great mobile support, is lightweight, and uses hardware acceleration and animations (where supported) to make pretty maps. Leaflet, however, does not support simple (1:1) coordinate reference systems out of the box, so we had to extend the API ourselves. Thankfully Leaflet is open source, so we were able to piece together the different pieces with help from a few different sources: http://map.agent-orange.ca/, https://github.com/migurski/canvas-warp/blob/master/zoomify.html, and http://openlayers.org/dev/examples/zoomify.html.

We added this support directly into NPMap, so you can now add a Zoomify tile layer via the baseLayers or layers configs in the NPMap config object:

baseLayers: [{
  height: 5180,
  type: 'Zoomify',
  url: 'https://www.nps.gov/npmap/support/examples/data/kefj/img/',
  visible: true,
  width: 5169

A simple example is available here: https://www.nps.gov/npmap/support/examples/leaflet-zoomify.html.

We also wrote some code that pulls data in from the XML metadata file (created by Zoomify/Photoshop during the tile creation process) and uses the metadata to automatically set the min/max zoom levels and extent of the web map. You can see an example here: https://www.nps.gov/npmap/support/examples/leaflet-zoomify-automatic-extent.html.

Future plans

The redesigned maps have been tested in all of the desktop browsers we support, and they work well on modern mobile devices too. We hope to have the new interface built and deployed to the nps.gov park pages in the next few months. That said, there are still a few “to-dos”:

  1. As mentioned above, we want to migrate to georeferenced maps so we can support geolocation. Now that we’re using NPMap with Leaflet it should be easy to add this support in the future.
  2. We are still working on print support. This should be ready to go by the time we release the maps.
  3. We eventually want to take this even further by switching the park maps over to tilesets created and maintained in GIS. We’ve kicked this project off, and will have an update on it soon here on the blog.