MappingKat/app.js

## app.js
var NPMap = {
  center: {
    lat: 42.42,
    lng: -104.71
  },
  div: 'map',
  overlays: [{
    name: 'National Parks',
    popup: {
      title: '<a href="http://www.nps.gov/{{toLowerCase Code}}">{{Name}}</a>'
    },
    styles: function(data) {
      return {
        point: {
          'marker-size': 'small',
          'marker-symbol': data.Code.slice(0, 1).toLowerCase()
        }
      };
    },
    type: 'geojson',
    url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/national_parks.geojson'
  },{
    cluster: true,
    styles: {
      point: {
        'marker-color': '#5e9fd5',
        'marker-size': 'small'
      }
    },
    type: 'csv',
    url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/colorado_cities_simplestyle.csv'
  },{
    type: 'geojson',
    url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/simplestyle.geojson'
  },{
    popup: {
      description: 'No attributes available'
    },
    styles: {
      line: {
        'stroke': '#03f',
        'stroke-opacity': 0.8,
        'stroke-width': 5
      },
      point: {
        'marker-color': '#fd9126',
        'marker-size': 'small'
      },
      polygon: {
        'fill': '#03f',
        'fill-opacity': 0.2,
        'stroke': '#000',
        'stroke-opacity': 0.8,
        'stroke-width': 8
      }
    },
    type: 'geojson',
    url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/utah_vectors.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: 42.42,
	lng: -104.71
	},
	div: 'map',
	overlays: [{
	name: 'National Parks',
	popup: {
	title: '<a href="http://www.nps.gov/{{toLowerCase Code}}">{{Name}}</a>'
	},
	styles: function(data) {
	return {
	point: {
	'marker-size': 'small',
	'marker-symbol': data.Code.slice(0, 1).toLowerCase()
	}
	};
	},
	type: 'geojson',
	url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/national_parks.geojson'
	},{
	cluster: true,
	styles: {
	point: {
	'marker-color': '#5e9fd5',
	'marker-size': 'small'
	}
	},
	type: 'csv',
	url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/colorado_cities_simplestyle.csv'
	},{
	type: 'geojson',
	url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/simplestyle.geojson'
	},{
	popup: {
	description: 'No attributes available'
	},
	styles: {
	line: {
	'stroke': '#03f',
	'stroke-opacity': 0.8,
	'stroke-width': 5
	},
	point: {
	'marker-color': '#fd9126',
	'marker-size': 'small'
	},
	polygon: {
	'fill': '#03f',
	'fill-opacity': 0.2,
	'stroke': '#000',
	'stroke-opacity': 0.8,
	'stroke-width': 8
	}
	},
	type: 'geojson',
	url: 'https://raw.githubusercontent.com/nationalparkservice/npmap.js/master/examples/data/utah_vectors.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%;
	}