Crater Lake National Park

NPMap

Digital maps for the National Park Service

Creating a Web Map

Now let's walk through the process of getting a new map up and running in the web page you created in the last step.

Steps

  1. Use your text editor to open the .html file you created in the last step
  2. Copy and paste the <script> tag and its content (highlighted below) into your HTML file, just above the closing body tag (</body>):
    
    <!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',
            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>
    
    This code snippet creates a JavaScript object, named NPMap, to hold properties that NPMap will use to build out the web map, sets the base API to bing and kicks off a dynamic load of the NPMap library. The library will then takes care of the heavy-lifting. It dynamically and asynchronously brings in all of the required JavaScript and CSS files and embeds the web map into the HTML div element that you specified in the div property.

And that's it! You can now load your HTML page into your web browser, and the map will render into the div on your web page.

Extra Credit

Try using your web browser's development tools to change the height and width style properties of the map <div>. You'll notice that the web map automatically resizes to fit 100% of the height and width of the div.

Next

Next let's configure the map to use some default base layers.