Crater Lake National Park

NPMap

Digital maps for the National Park Service

Creating an HTML Page

NPMap web maps are designed to be embedded directly into web pages. In fact, NPMap makes it incredibly easy to embed a map into a web page - it even generates the necessary HTML and loads all of the required JavaScript libraries and CSS for you. This means you can even embed web maps into HTML pages that you don't have complete control over, like pages that are part of the nps.gov content management system.

This tutorial will walk you through creating a HTML web page to embed your map into. If you already have a web page that you want to embed your map into, you can skip to the next tutorial. Otherwise, let's go ahead and create a basic HTML page:

Instructions

  1. Open your text editor of choice
  2. Copy and paste the snippet of HTML from below into your new file
  3. Save the file to either your local drive or your development web server (if you have one), making sure that you save it with the .html extension (example: npmap.html)

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

It's as simple as that. You now have a basic web page with an HTML <div> element that's ready to hold your web map. Note the style property on your <div> element. This property can be used to adjust the height and width of your web map.

Next

Now that you have a web page, you are ready to create a web map.