ZJONSSON/index.html

## index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>

<title>Leaflet vector tile map of rivers</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/leaflet-hash.js"></script>
<script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/TileLayer.GeoJSON.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://bl.ocks.org/ZJONSSON/raw/5529395/TileLayer.d3_geoJSON.js"></script>
<script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/us-states.js"></script>

<style type="text/css">
html, body { height: 100% }
#map { min-height: 100%; }
body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif; font-size: 12px;
    overflow: hidden;
    background-color: #f00;
}
.leaflet-popup-content-wrapper {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.river {
  fill : none;
  stroke : blue;
}
</style>

</head><body>

<div id="map"></div>
<a href="https://github.com/NelsonMinar/vector-river-map"><img
      style="position:absolute;top:0;right:0;border:0;"
      width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/forkme.png" alt="Fork me on GitHub"
      /></a>

<script type="text/javascript">

// Construct map, center if no location provided
var map = L.map('map', { maxZoom: 13 } );

var hash = new L.Hash(map);
if (!window.location.hash) {
    map.setView([37.958, -120.976], 8);
}

// Make the base map; a raster tile relief map from ESRI
var esriRelief = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'

var basemap = L.tileLayer(esriRelief, {
        attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>',
        maxZoom: 13
});
basemap.addTo(map);

// Add a single GeoJSON vector file for state boundaries
// This was loaded statically as a script; could also be AJAX
var stateLayer = new L.geoJson(usStates);
stateLayer.setStyle({ "color": "#444",
                      "weight": 1,
                      "fill": false,
                      "opacity": 1.0 });
stateLayer.addTo(map);

// Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";

new L.TileLayer.d3_geoJSON(geojsonURL,{class:"river"})
  .addTo(map);
</script>
</body></html>
	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>

	<title>Leaflet vector tile map of rivers</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
	<script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/leaflet-hash.js"></script>
	<script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/TileLayer.GeoJSON.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://bl.ocks.org/ZJONSSON/raw/5529395/TileLayer.d3_geoJSON.js"></script>
	<script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/us-states.js"></script>

	<style type="text/css">
	html, body { height: 100% }
	#map { min-height: 100%; }
	body {
	margin: 0;
	font-family: Helvetica, Arial, sans-serif; font-size: 12px;
	overflow: hidden;
	background-color: #f00;
	}
	.leaflet-popup-content-wrapper {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}

	.river {
	fill : none;
	stroke : blue;
	}
	</style>

	</head><body>

	<div id="map"></div>
	<a href="https://github.com/NelsonMinar/vector-river-map"><img
	style="position:absolute;top:0;right:0;border:0;"
	width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/forkme.png" alt="Fork me on GitHub"
	/></a>

	<script type="text/javascript">

	// Construct map, center if no location provided
	var map = L.map('map', { maxZoom: 13 } );

	var hash = new L.Hash(map);
	if (!window.location.hash) {
	map.setView([37.958, -120.976], 8);
	}

	// Make the base map; a raster tile relief map from ESRI
	var esriRelief = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'

	var basemap = L.tileLayer(esriRelief, {
	attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>',
	maxZoom: 13
	});
	basemap.addTo(map);

	// Add a single GeoJSON vector file for state boundaries
	// This was loaded statically as a script; could also be AJAX
	var stateLayer = new L.geoJson(usStates);
	stateLayer.setStyle({ "color": "#444",
	"weight": 1,
	"fill": false,
	"opacity": 1.0 });
	stateLayer.addTo(map);

	// Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
	var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";

	new L.TileLayer.d3_geoJSON(geojsonURL,{class:"river"})
	.addTo(map);
	</script>
	</body></html>