MappingKat/app.js

## app.js
var NPMap = {
  center: {
    lat: 45.3058,
    lng: -116.7187
  },
  div: 'map',
  overlays: [{
    attribution: 'NPMap Team',
    name: 'Parks',
    popup: {
      actions: '<ul><li><a onclick="window.alert(\'Thanks for clicking!\');return false;">Click Me!</a></li></ul>',
      description: {
        format: 'table'
      },
      title: '{{alpha_code}}'
    },
    styles: {
      'fill': '#d39800',
      'fill-opacity': 0.2,
      'stroke': '#d39800',
      'stroke-opacity': 0.8,
      'stroke-width': 3
    },
    table: 'parks',
    type: 'cartodb',
    user: 'nps'
  },{
    attribution: 'NPMap Team',
    /*
    popup: '<div class="title">{{Name}}</div><div class="content" style="width:500px;"><p>{{Description}}</p><p>This popup is configured with an HTML string. It has a hardcoded width of <code>500</code>.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non tellus sit amet eleifend. Phasellus a arcu quis tellus dignissim convallis. In ipsum odio, iaculis at vestibulum ut, eleifend sit amet mi. Phasellus lacinia lobortis sapien, et fermentum metus tristique vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla urna eget dignissim rhoncus. Pellentesque in mi et elit tristique suscipit. Cras vel lacinia mi. In nec lorem mauris. Aenean ac metus fringilla nunc tristique convallis nec eget dui. Quisque tincidunt massa nisl, a semper ligula auctor eu. Nulla pretium faucibus orci.</p></div><div class="actions"><ul><li><a href="#" onclick="window.alert(\'A Test Action\');return false;">A Test Action</a></li><li><a href="#" onclick="window.alert(\'Another Test Action\');return false;">Another Test Action</a></li></ul></div>',
    */
    popup: {
      actions: '<ul><li><a>Clicking Me Won\'t Do Anything!</a></li></ul>',
      description: {
        format: 'table'
      },
      title: '{{Name}}'
    },
    type: 'geojson',
    url: 'data/rectangle.geojson'
  },{
    attribution: 'Land Resources Division',
    popup: {
      description: '<p>The alpha code is {{Code}}.</p>',
      title: '{{Name}}'
    },
    styles: {
      point: {
        'marker-color': '#609321',
        'marker-symbol': 'park'
      }
    },
    type: 'geojson',
    url: 'http://www.nps.gov/npmap/support/library/examples/data/national-parks.geojson'
  }],
  zoom: 6
};

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

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title> Examples | NPMap.js</title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <div id='map' />
    <script src='app.js'></script>
  </body>
</html>

## style.css
body {
  margin: 0;
  padding: 0;
}
#map {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
	var NPMap = {
	center: {
	lat: 45.3058,
	lng: -116.7187
	},
	div: 'map',
	overlays: [{
	attribution: 'NPMap Team',
	name: 'Parks',
	popup: {
	actions: '<ul><li><a onclick="window.alert(\'Thanks for clicking!\');return false;">Click Me!</a></li></ul>',
	description: {
	format: 'table'
	},
	title: '{{alpha_code}}'
	},
	styles: {
	'fill': '#d39800',
	'fill-opacity': 0.2,
	'stroke': '#d39800',
	'stroke-opacity': 0.8,
	'stroke-width': 3
	},
	table: 'parks',
	type: 'cartodb',
	user: 'nps'
	},{
	attribution: 'NPMap Team',
	/*
	popup: '<div class="title">{{Name}}</div><div class="content" style="width:500px;"><p>{{Description}}</p><p>This popup is configured with an HTML string. It has a hardcoded width of <code>500</code>.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non tellus sit amet eleifend. Phasellus a arcu quis tellus dignissim convallis. In ipsum odio, iaculis at vestibulum ut, eleifend sit amet mi. Phasellus lacinia lobortis sapien, et fermentum metus tristique vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla urna eget dignissim rhoncus. Pellentesque in mi et elit tristique suscipit. Cras vel lacinia mi. In nec lorem mauris. Aenean ac metus fringilla nunc tristique convallis nec eget dui. Quisque tincidunt massa nisl, a semper ligula auctor eu. Nulla pretium faucibus orci.</p></div><div class="actions"><ul><li><a href="#" onclick="window.alert(\'A Test Action\');return false;">A Test Action</a></li><li><a href="#" onclick="window.alert(\'Another Test Action\');return false;">Another Test Action</a></li></ul></div>',
	*/
	popup: {
	actions: '<ul><li><a>Clicking Me Won\'t Do Anything!</a></li></ul>',
	description: {
	format: 'table'
	},
	title: '{{Name}}'
	},
	type: 'geojson',
	url: 'data/rectangle.geojson'
	},{
	attribution: 'Land Resources Division',
	popup: {
	description: '<p>The alpha code is {{Code}}.</p>',
	title: '{{Name}}'
	},
	styles: {
	point: {
	'marker-color': '#609321',
	'marker-symbol': 'park'
	}
	},
	type: 'geojson',
	url: 'http://www.nps.gov/npmap/support/library/examples/data/national-parks.geojson'
	}],
	zoom: 6
	};

	(function() {
	var s = document.createElement('script');
	s.src = 'http://www.nps.gov/npmap/npmap.js/2.0.0/npmap-bootstrap.min.js';
	document.body.appendChild(s);
	})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title> Examples \| NPMap.js</title>
	<link rel='stylesheet' href='style.css'>
	</head>
	<body>
	<div id='map' />
	<script src='app.js'></script>
	</body>
	</html>
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	bottom: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}