Skip navigation

baseLayers

<style>
#map {
  height: 350px;
  position: relative;
  width: 100%;
}

</style>
<div id="map"></div>

<script>
var NPMap =  {
  baseLayers: [
    'nps-parkTiles',
    'nps-parkTiles3',
    'nps-parkTilesImagery',
    'nps-parkTiles3Imagery',
    'nps-parkTiles3Light',
    'nps-parkTilesSlate',
    'nps-parkTiles3Slate',
    'nps-lightStreets',
    'nps-neutralTerrain',
    'nps-satelliteNight',
    'bing-aerial',
    'bing-aerialLabels',
    'bing-roads',
    'cartodb-darkMatter',
    'cartodb-darkMatterNoLabels',
    'cartodb-positron',
    'cartodb-positronNoLabels',
    'esri-gray',
    'esri-imagery',
    'esri-nationalGeographic',
    'esri-oceans',
    'esri-streets',
    'esri-topographic',
    'mapbox-dark',
    'mapbox-emerald',
    'mapbox-highContrast',
    'mapbox-landsatLive',
    'mapbox-light',
    'mapbox-outdoors',
    'mapbox-pencil',
    'mapbox-runBikeAndHike',
    'mapbox-satellite',
    'mapbox-satelliteLabels',
    'mapbox-streets',
    'mapbox-terrain',
    'openstreetmap',
    'stamen-terrain',
    'stamen-toner',
    'stamen-watercolor'
  ],
  div: 'map',
  events: [{
    fn: function (e) {
      console.log(e);
    },
    type: 'baselayerchange'
  }]
};

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

</script>