CartoDB Layer

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

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

<script>
var NPMap = {
  div: 'map',
  maxZoom: 13,
  overlays: [{
    attribution: 'NPMap Team',
    name: 'Parks',
    popup: {
      description: {
        format: 'table'
      },
      title: '{{alphacode}}'
    },
    styles: {
      'fill': '#7c117c'
    },
    table: 'parks',
    type: 'cartodb',
    user: 'nps'
  }, {
    attribution: 'NPMap Team',
    name: 'Yellowstone Roads',
    popup: {
      description: {
        format: 'table'
      },
      title: '{{name_segment}}'
    },
    styles: {
      'stroke': '#d39800',
      'stroke-opacity': 0.8,
      'stroke-width': 3
    },
    table: 'roads',
    type: 'cartodb',
    user: 'nps-yell'
  }]
};

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