hrwgc/index.html

## index.html
<DOCTYPE html>
<html>
  <head>
    <title>Stop and Frisk</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="js/ext/wax/ext/leaflet.ie.css" /><![endif]-->
    <script src="js/ext/wax/ext/leaflet.js"></script>
    <script src='js/ext/wax/dist/wax.leaf.min.js' type='text/javascript'></script>
    <link rel="stylesheet" href="js/ext/wax/ext/leaflet.css" />
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="js/ext/jquery/jquery-1.7.2.min.js"></script>

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="js/ext/wax/ext/leaflet.ie.css" />
    <![endif]-->
    </head>

    <body>
        <div class='wrapper'>
            <h2>This is a map</h2>
        <div id='map-div1'></div>
        <h2>hosted on <a href="http://github.com/hrwgc/tilehub">GitHub</a>.</h2>
        <div id='map-div2'></div>
    </div>
        <script type="text/javascript">

        var map;
        var interaction;

        $(document).ready(function() {
          wax.tilejson('mbtiles/2010contours/metadata.json',
            function(tilejson) {
              map = new L.Map('map-div1')
                .addLayer(new wax.leaf.connector(tilejson))
                .setView(new L.LatLng(40.8011,-73.9513), 14);
              interaction = wax.leaf.interaction(map, tilejson);
          });
          wax.tilejson('mbtiles/2010points/metadata.json',
            function(tilejson) {
              map = new L.Map('map-div2')
                .addLayer(new wax.leaf.connector(tilejson))
                .setView(new L.LatLng(40.8011,-73.9513), 14);
              interaction = wax.leaf.interaction(map, tilejson);
          });
        });

        </script>
  </body>
</html>

## metadata.json
grid({
    "attribution": "",
    "description": "",
    "center": "-73.964,40.772,13",
    "bounds": "-74.2538,40.5159,-73.5535,40.984",
    "minzoom": "10",
    "version": "1.0.0",
    "maxzoom": "15",
    "name": "contours",
    "scheme": "xyz",
    "tiles": ["\/tilehub\/mbtiles\/2010contours\/1.0.0\/contours\/{z}\/{x}\/{y}.png"],
    "grids":["\/tilehub\/mbtiles\/2010contours\/1.0.0\/contours\/{z}\/{x}\/{y}.grid.json"]
})

## style.css
body {
   background: rgb(77,77,77);
   padding: 0px;
   margin: 0px;
}

  div.wrapper {
   width: 100%;
   position: relative;
   margin: 0;
   margin-bottom: 30px;
}

a {
   color: rgb(32,159,255);
}

h2, h3 {
   color: #ffe;
   position: relative;
   font-family: Helvetica;
   font-weight: 700;
   font-size: 30pt;
   padding: 30px;
   margin-left: auto;
   margin-right: auto;
}

#map-div1, #map-div2 {
   position: relative;
   border-radius: .5em;
   background: #aaa;
   -webkit-border-radius: .2em;
   -moz-border-radius: .2em;
   box-shadow: 0 5px 0 5px rgb(39,17,19,.9);
   -webkit-box-shadow: 0 5px 0 5px rgb(39,17,19,.9);
   -moz-box-shadow: 5px 0 5px 0 rgb(39,17,19,.5);
   width: 80%;
   height: 300px;
   margin-left: 10%;
   margin-right: 10%;
   padding: 0;
}

.wax-tooltip {
   position: absolute;
   right: 0px;
   top: 0px;
   padding: 10px;
   background-color: #eee;
   opacity: 0.9;
   border-radius: 10px;
   -moz-border-radius: 10px;
   width: 300px;
   z-index: 5;
  }
	<DOCTYPE html>
	<html>
	<head>
	<title>Stop and Frisk</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--[if lte IE 8]><link rel="stylesheet" href="js/ext/wax/ext/leaflet.ie.css" /><![endif]-->
	<script src="js/ext/wax/ext/leaflet.js"></script>
	<script src='js/ext/wax/dist/wax.leaf.min.js' type='text/javascript'></script>
	<link rel="stylesheet" href="js/ext/wax/ext/leaflet.css" />
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="js/ext/jquery/jquery-1.7.2.min.js"></script>

	<!--[if lte IE 8]>
	<link rel="stylesheet" href="js/ext/wax/ext/leaflet.ie.css" />
	<![endif]-->
	</head>

	<body>
	<div class='wrapper'>
	<h2>This is a map</h2>
	<div id='map-div1'></div>
	<h2>hosted on <a href="http://github.com/hrwgc/tilehub">GitHub</a>.</h2>
	<div id='map-div2'></div>
	</div>
	<script type="text/javascript">

	var map;
	var interaction;

	$(document).ready(function() {
	wax.tilejson('mbtiles/2010contours/metadata.json',
	function(tilejson) {
	map = new L.Map('map-div1')
	.addLayer(new wax.leaf.connector(tilejson))
	.setView(new L.LatLng(40.8011,-73.9513), 14);
	interaction = wax.leaf.interaction(map, tilejson);
	});
	wax.tilejson('mbtiles/2010points/metadata.json',
	function(tilejson) {
	map = new L.Map('map-div2')
	.addLayer(new wax.leaf.connector(tilejson))
	.setView(new L.LatLng(40.8011,-73.9513), 14);
	interaction = wax.leaf.interaction(map, tilejson);
	});
	});

	</script>
	</body>
	</html>
	grid({
	"attribution": "",
	"description": "",
	"center": "-73.964,40.772,13",
	"bounds": "-74.2538,40.5159,-73.5535,40.984",
	"minzoom": "10",
	"version": "1.0.0",
	"maxzoom": "15",
	"name": "contours",
	"scheme": "xyz",
	"tiles": ["\/tilehub\/mbtiles\/2010contours\/1.0.0\/contours\/{z}\/{x}\/{y}.png"],
	"grids":["\/tilehub\/mbtiles\/2010contours\/1.0.0\/contours\/{z}\/{x}\/{y}.grid.json"]
	})
	body {
	background: rgb(77,77,77);
	padding: 0px;
	margin: 0px;
	}

	div.wrapper {
	width: 100%;
	position: relative;
	margin: 0;
	margin-bottom: 30px;
	}

	a {
	color: rgb(32,159,255);
	}

	h2, h3 {
	color: #ffe;
	position: relative;
	font-family: Helvetica;
	font-weight: 700;
	font-size: 30pt;
	padding: 30px;
	margin-left: auto;
	margin-right: auto;
	}

	#map-div1, #map-div2 {
	position: relative;
	border-radius: .5em;
	background: #aaa;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	box-shadow: 0 5px 0 5px rgb(39,17,19,.9);
	-webkit-box-shadow: 0 5px 0 5px rgb(39,17,19,.9);
	-moz-box-shadow: 5px 0 5px 0 rgb(39,17,19,.5);
	width: 80%;
	height: 300px;
	margin-left: 10%;
	margin-right: 10%;
	padding: 0;
	}

	.wax-tooltip {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 10px;
	background-color: #eee;
	opacity: 0.9;
	border-radius: 10px;
	-moz-border-radius: 10px;
	width: 300px;
	z-index: 5;
	}