Crater Lake National Park

NPMap

Digital maps for the National Park Service

Using Park Tiles

All of the "layers" that make up Park Tiles are available as individual tilesets on our MapBox hosting account. As each layer was cached individually, we recommend that you follow this hierarchy (bottom to top) when using the tilesets in your map:

All of the Park Tiles tilesets have a prefix of "PT".

Overlays

The position of your overlay(s) in the above hierarchy depends on the type of feature (point, line, or polygon).

Points

Point data can either be placed on top of all features or, if the points are obstructing the view of city or park labels, underneath the labels:

  • To place points on top of all features, append the layer to the bottom of the hierarchy
  • To place points underneath city and park labels, insert the layer in between PT Hydro Labels and PT City Labels
  • To place points underneath city, park, and hydro labels, place the point layer in between PT Hydro Labels and PT Park Points

Lines

Guidelines for placing line layers is similar to point layers. If placed on top of all services that make up Park Tiles, labels will inevitably be covered up.

  • To place lines on top of all features, append the layer to the bottom of the hierarchy
  • To place lines underneath city and park labels, insert the layer in between PT Hydro Labels and PT City Labels
  • To place lines underneath city, park, and hydro labels, place the point layer in between PT Hydro Labels and PT Park Points

Polygons

For most polygonal data, it is best to have the reference information on top. To do this, insert any polygon layers between PT Shaded Relief and PT Urban Areas.

Note: If the fill of the Park polygons is obstructing the view of your polygons, replace the PT Park Poly layer with PT Park Poly No Fill.

Example

Here is an example of using Park Tiles with the NPMap library:

And here is the HTML markup and JavaScript for the example above:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example-map" style="height:500px;position:absolute;width:500px;">
    </div>
    <script>
      var NPMap = {
        config: {
          api: 'leaflet',
          baseLayers: false,
          div: 'example-map',
          identify: {
            content: 'NPS Unit Code: {{unit_code}}'
          },
          layers: [{
            composited: [{
              id: 'nps.pt-shaded-relief'
            },{
              id: 'nps.pt-raster',
              visible: false
            },{
              id: 'nps.pt-urban-areas'
            },{
              id: 'nps.pt-river-lines'
            },{
              id: 'nps.pt-admin-lines'
            },{
              id: 'nps.pt-park-poly-no-fill',
              visible: false
            },{
              id: 'nps.pt-park-poly'
            },{
              id: 'nps.pt-mask'
            },{
              id: 'nps.pt-hydro-features'
            },{
              id: 'nps.pt-admin-labels'
            },{
              id: 'nps.pt-roads'
            },{
              id: 'nps.pt-road-shields'
            },{
              id: 'nps.pt-park-points'
            },{
              id: 'nps.pt-hydro-labels'
            },{
              id: 'nps.pt-trails',
              visible: false
            },{
              id: 'nps.pt-city-labels'
            },{
              id: 'nps.pt-park-labels'
            }],
            type: 'TileStream',
            visible: true
          }],
          zoomRange: {
            min: 4,
            max: 9
          },
          zoom: 4
        }
      };

      (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>

Additional Resources