This presentation has only been tested in "modern" browsers, and likely won't work properly in older versions of Internet Explorer.

An Overview of NPMap

July 26, 2012

NPMap is two separate, but complementary, things:

  1. a team of web map specialists (data managers, cartographers, and developers) that builds web maps for the National Park Service
  2. a JavaScript library that wraps NPS-specific functionality and look-and-feel around commercial and open source web mapping APIs

Together these two things help us pursue our primary goal, which is...

To make it as easy as possible for the National Park Service to build and deploy simple and beautiful web maps.

The Team


David Warren
Data Manager
Mamata Akella
Cartographer
Nate Irwin
Developer & Lead

Building web maps for the NPS since the early days of Google Maps (2006)

We work like a contract shop, helping our NPS partners create and deploy web maps. All of the code we write is open and available* for others to use. You can find all kinds of information about what we do on our website: http://www.nps.gov/npmap.

* Nothing is publicly-available on our GitHub account yet, but we are working on open sourcing our code. If you work for the NPS and want the code now, shoot us an email.

Examples of Our Work

The Library

We eat our own dogfood
(photo credit vmabney)

Abstracts commonly-used functionality away from various web mapping APIs and wraps it with an API and a look-and-feel that is specific to the National Park Service.

So, rather than...

building a web map using the ArcGIS API for JavaScript...

like this and...

building a web map using the Bing Maps API...

like this and...

building a web map using the Google Maps API...

like this and...

building a web map using Leaflet...

like this and...

building a web map using Modest Maps JS...

like this you can just...

do this. Try it yourself... 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="example-map">
    </div>
    <script>
      var NPMap = NPMap || {};
      
      NPMap.config = {
        api: 'leaflet',
        div: 'example-map'
      };
      
      (function() {
        var s = document.createElement('script');
        s.src = 'http://www.nps.gov/npmap/0.8.0/bootstrap.js';
        s.type = 'text/javascript';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>

Why did we decide to build our own library?

Enterprise license agreements we work on:

We are working with a design firm to develop a custom set of tools and components for the NPMap library. These components have been designed to fit into the graphic identity of the National Park Service.

The upcoming 0.8.0 release of NPMap will include these new components.

Other things to look out for:

Thanks! Any questions?

npmap@nps.gov

@npmap

http://www.nps.gov/npmap