Crater Lake National Park

NPMap

Digital maps for the National Park Service

Config

The NPMap.config object is used to tell NPMap how to configure your web map. You can use this object to add baseLayers, layers, and modules to your web map, customize NPMap's tools, hook up to the preinit and init load hooks, change the look-and-feel of your web map, and configure how information is presented within the InfoBox.

Where do I put the NPMap.config object?

You can include the config object either within a <script> tag in your HTML or within a standalone JavaScript file that is loaded into your web page. If your NPMap.config object contains a lot of custom code, you'll probably want to include it in its own standalone JavaScript file, as this will ensure it can be cached by web browsers for better performance.

No matter how you decide to include the config object, we suggest loading it as far down in your HTML code as possible. NPMap loads most of its dependencies/requirements asynchronously, but it is a best practice to include scripts after content on a web page.

Given this, here are two examples showing how to use the config object. This first example demonstrates including the config object in your HTML:


<html>
  <head>
  </head>
  <body>
    <!-- Other web page content goes here. -->
    <div id="map" style="height: 500px; width: 500px;>
    </div>
    <script>
      var NPMap = NPMap || {};

      // The div property is the only required property.
      NPMap.config = {
        div: 'map'
      };

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

And this example shows how to load the config object from a separate JavaScript file:


<html>
  <head>
  </head>
  <body>
    <!-- Other web page content goes here. -->
    <div id="map" style="height: 500px; width: 500px;>
    </div>
    <script>
      (function() {
        var s = document.createElement('script');
        s.src = 'http://yourserver/scripts/yourconfigfile.js';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>

And the JavaScript file that lives at http://yourserver/scripts/yourconfigfile.js would then need to contain the NPMap.config object and kickoff the NPMap load:


var NPMap = NPMap || {};

// The div property is the only required property.
NPMap.config = {
  div: 'map'
};

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

Available configs

For a complete list of the available config properties, take a look at the API docs.