Crater Lake National Park

NPMap

Digital maps for the National Park Service

Utilizing the Default Base Layers

Each NPMap base API comes with four default base layers pre-defined:

  1. Aerial
  2. Hybrid
  3. Streets
  4. Terrain

The tiles brought in for these four default base layers varies depending on which base API you are using. For example, if you are using the Bing base API, the default Aerial, Hybrid, and Streets base layers bring in tiles served from Microsoft's servers while the default Terrain base layer brings in tiles that come from MapBox. This is because Microsoft/Bing does not currently offer terrain tiles.

Steps

Configuring your map to use the default base layers is easy.

Continuing with the example from the previous tutorial, this code example shows you how to configure your web map to utilize all four of the default base layers. As always, the pertinent code is highlighted (lines 13-21).


<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="example-map" style="height:500px;position:absolute;width:500px;">
    </div>
    <script>
      var NPMap = NPMap || {};

      NPMap.config = {
        api: 'bing',
        baseLayers: [{
          type: 'Aerial'
        },{
          type: 'Hybrid'
        },{
          type: 'Streets'
        },{
          type: 'Terrain'
        }],
        div: 'example-map'
      };

      (function() {
        var s = document.createElement('script');
        s.src = 'http://www.nps.gov/npmap/1.0.0/bootstrap.js';
        s.type = 'text/javascript';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>

Copy this highlighted code and paste it into the <script> tag of your HTML file, in the same spot shown in the example above.

Notes

  1. If you add more than one default base layer object to your map, NPMap will automatically add the base layer switcher control to your map.
  2. If you don't add visible properties to your base layer config objects, NPMap will set the initial base layer to the first base layer object in the array. So in the example above, the base layer object with type 'Aerial' will be turned on when the map loads.

Next

Coming soon...