bsudekum/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></title>

<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
<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;
    overflow: hidden;
    background-color: #f00;
}

.road {
  stroke:#3F3F3F;
  fill:none;
  stroke-width:1.5;
}

.land {
  fill: #CBE6C3;
  stroke:#22741B;
}

.water {
  fill:#AEDBFF;
  stroke:none;
}
</style>

</head><body>

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

<script type="text/javascript">

var map = L.map('map', { maxZoom: 18 } );
map.setView([37.7698,-122.4336], 16);


var stateLayer = new L.geoJson(usStates);
stateLayer.setStyle({ "color": "#444",
                      "weight": 1,
                      "fill": false,
                      "opacity": 0 });
stateLayer.addTo(map);

var water = "http://a.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json";
new L.TileLayer.d3_geoJSON(water,{class:"water"}).addTo(map);


var land = "http://a.tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json";
new L.TileLayer.d3_geoJSON(land,{class:"land"}).addTo(map);


var road = "http://a.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json";
new L.TileLayer.d3_geoJSON(road,{class:"road"}).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></title>

	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.ie.css' rel='stylesheet' >
	<![endif]-->
	<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;
	overflow: hidden;
	background-color: #f00;
	}

	.road {
	stroke:#3F3F3F;
	fill:none;
	stroke-width:1.5;
	}

	.land {
	fill: #CBE6C3;
	stroke:#22741B;
	}

	.water {
	fill:#AEDBFF;
	stroke:none;
	}
	</style>

	</head><body>

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

	<script type="text/javascript">

	var map = L.map('map', { maxZoom: 18 } );
	map.setView([37.7698,-122.4336], 16);


	var stateLayer = new L.geoJson(usStates);
	stateLayer.setStyle({ "color": "#444",
	"weight": 1,
	"fill": false,
	"opacity": 0 });
	stateLayer.addTo(map);

	var water = "http://a.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json";
	new L.TileLayer.d3_geoJSON(water,{class:"water"}).addTo(map);


	var land = "http://a.tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json";
	new L.TileLayer.d3_geoJSON(land,{class:"land"}).addTo(map);


	var road = "http://a.tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json";
	new L.TileLayer.d3_geoJSON(road,{class:"road"}).addTo(map);

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