Crater Lake National Park

NPMap

Digital maps for the National Park Service

Customizing Your Web Map - Working with NPMap's Tools

Posted on 23 May 2012 by David Warren

Note: This is an excerpt from a tutorial I'm working on for the support documentation. The example below uses the current development version of NPMap, 0.8.0, so the API may change slightly over the next couple of months. You can keep up with development on 0.8.0 by visiting the releases page.

You’ve made a lot of progress: All the way from planning your web map, to setting up your development environment, creating your HTML page, and creating your web map. Now it’s time to start getting into the fun stuff – customizing your web map.

NPMap gives you a lot of customization options, making it easy to set the geographic extent when your map is initially loaded, add navigation tools, and toggle between different basemaps. You can find targeted examples that demonstrate NPMap's capabilities in the examples section of the support documentation.

In this post, we're going to take a look at a few of NPMap’s tools. Let's say I have the following basic requirements for my web map:

  1. I want to use the Bing base API, with the ability to switch between different Bing base maps.
  2. I want to add a button that will allow the user to pan or zoom back to the initial extent of the map by clicking on it.
  3. I want to add zoom in/out navigation tools to my map.

Here's the code I have so far:


<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 500px;">
    </div>
    <script>
      var NPMap = NPMap || {};
      
      NPMap.config = {
        api: 'bing',
        div: '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>

When I open this in a browser, my web map appears with a simple Bing base map that uses the default configuration. The first thing I would like to do is add the ability to switch between different Bing basemaps. You can find an example of using the layer switcher with Bing Maps here: http://www.nps.gov/npmap/support/examples/npmap-tools-switcher-bing.html. To accomplish this, I’m going to add this snippet of Javascript to my NPMap.config object:


baseLayers: [{
  code: 'aerial',
  visible: false
},{
  code: 'road',
  visible: true
}],

So now my code looks like this (the new snippet is highlighted):


<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 500px;">
    </div>
    <script>
      var NPMap = NPMap || {};
      
      NPMap.config = {
        api: 'bing',
        baseLayers: [{
          code: 'aerial',
          visible: false
        },{
          code: 'road',
          visible: true
        }],
        div: '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>

The switcher tool is added to the top-right hand side of the map, with a dropdown arrow that allows the user to switch between street and aerial view.

Now I would like to add simple navigation tools to help the user zoom in and out and pan around the map. NPMap offers a few navigation tools that make it easy to zoom and pan. These can be adding by inserting this Javascript snippet:


tools: {
  pan: 'home',
  zoom: 'small'
},

So my code now looks like this (the new snippet is, again, highlighted below):


<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 500px;">
    </div>
    <script>
      var NPMap = NPMap || {};
  
      NPMap.config = {
        api: 'bing',
        baseLayers: [{
          code: 'aerial',
          visible: false
        },{
          code: 'road',
          visible: true
        }],
        tools: {
          pan: ‘home’,
          zoom: ‘small’
        },
        div: '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>

The pan property adds a button to the top-left of the map. It contains arrows that allow you to navigate north, south, east, and west. I can tell NPMap to add a 'home' button to the middle of the pan tool by setting pan: 'home'. When the home button is clicked, it pans/zooms the map back to the initial extent of the map.

And now we have a simple web map with navigation and base layer switcher tools.

This example demonstrates just a few of the tools that are available in the NPMap library. The library also gives you the ability to add an overview map, alert your users using the notification tool, and add functionality to your web map using the route and edit modules. Many more tools are coming in the next release (0.8.0) of the library, so stay tuned!