nrenner · December 28, 2015 17:19
diff --git a/index.html b/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-src.js"></script>
 <script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
 <script src="http://www.somebits.com/rivers/lib/TileLayer.GeoJSON.js"></script>
 <script type="text/javascript" src="http://www.somebits.com/rivers/us-states.js"></script>

 <script src="optimize.js"></script>

 <style type="text/css">
 html, body { height: 100% }
 #map { min-height: 100%; }
 body {
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px;
    overflow: hidden;
    background-color: #f00;
 }
 .leaflet-popup-content-wrapper {
    -webkit-border-radius: 5px;
    border-radius: 5px;
 }
 .leaflet-layer img { -webkit-filter: grayscale(100%); }
 </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="http://www.somebits.com/rivers/forkme.png" alt="Fork me on GitHub"
      /></a>

 <div style="font-size: 11px; line-height: 16px; position: absolute;
 background-color: rgba(255, 255, 255, 0.7); padding: 0px 5px 0px 5px;
 bottom: 0px; left: 0px; z-index: 8">
  Vector tile tutorial
  (<a href="https://github.com/NelsonMinar/vector-river-map">GitHub</a>).
  By <A href="http://www.somebits.com/">Nelson Minar</a>.
  Views: <a href="http://www.somebits.com/rivers/rivers-leaflet.html">Leaflet</a> &bull;
         <a href="http://www.somebits.com/rivers/rivers-polymaps.html">Polymaps</a> &bull;
         <a href="http://www.somebits.com/rivers/rivers-d3.html">D3.js</a> &bull;
         <a href="http://www.somebits.com/rivers/rivers-d3leaflet.html">D3+Leaflet</a></div>

 <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);

 // Style the river lines; width depends on its Strahler number
 function riverStyle(feature) {
    return { "color": "#29439c",
             "weight": feature.properties.strahler * map.getZoom()/13,
             "opacity": 1.0, 
    };
 }

 // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
 var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";
 var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, { },
    { style: riverStyle });
 map.addLayer(geojsonTileLayer);

 </script>
 </body></html>
diff --git a/optimize.js b/optimize.js
 // --------------------------------------------------------------------------
 // L.TileLayer.GeoJSON

 //
 // add timing and profiling around '_tilesLoaded' function
 //
 var _tilesLoaded = L.TileLayer.GeoJSON.prototype._tilesLoaded;
 L.TileLayer.GeoJSON.prototype._tilesLoaded = function(evt) {
    console.profile('addData');
    console.time('addData');

    _tilesLoaded.apply(this, arguments);
    
    console.timeEnd('addData');
    console.profileEnd();
 }
	<!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-src.js"></script>
	<script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
	<script src="http://www.somebits.com/rivers/lib/TileLayer.GeoJSON.js"></script>
	<script type="text/javascript" src="http://www.somebits.com/rivers/us-states.js"></script>

	<script src="optimize.js"></script>

	<style type="text/css">
	html, body { height: 100% }
	#map { min-height: 100%; }
	body {
	margin: 0;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px;
	overflow: hidden;
	background-color: #f00;
	}
	.leaflet-popup-content-wrapper {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
	.leaflet-layer img { -webkit-filter: grayscale(100%); }
	</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="http://www.somebits.com/rivers/forkme.png" alt="Fork me on GitHub"
	/></a>

	<div style="font-size: 11px; line-height: 16px; position: absolute;
	background-color: rgba(255, 255, 255, 0.7); padding: 0px 5px 0px 5px;
	bottom: 0px; left: 0px; z-index: 8">
	Vector tile tutorial
	(<a href="https://github.com/NelsonMinar/vector-river-map">GitHub</a>).
	By <A href="http://www.somebits.com/">Nelson Minar</a>.
	Views: <a href="http://www.somebits.com/rivers/rivers-leaflet.html">Leaflet</a> •
	<a href="http://www.somebits.com/rivers/rivers-polymaps.html">Polymaps</a> •
	<a href="http://www.somebits.com/rivers/rivers-d3.html">D3.js</a> •
	<a href="http://www.somebits.com/rivers/rivers-d3leaflet.html">D3+Leaflet</a></div>

	<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);

	// Style the river lines; width depends on its Strahler number
	function riverStyle(feature) {
	return { "color": "#29439c",
	"weight": feature.properties.strahler * map.getZoom()/13,
	"opacity": 1.0,
	};
	}

	// Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
	var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";
	var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, { },
	{ style: riverStyle });
	map.addLayer(geojsonTileLayer);

	</script>
	</body></html>
	// --------------------------------------------------------------------------
	// L.TileLayer.GeoJSON

	//
	// add timing and profiling around '_tilesLoaded' function
	//
	var _tilesLoaded = L.TileLayer.GeoJSON.prototype._tilesLoaded;
	L.TileLayer.GeoJSON.prototype._tilesLoaded = function(evt) {
	console.profile('addData');
	console.time('addData');

	_tilesLoaded.apply(this, arguments);

	console.timeEnd('addData');
	console.profileEnd();
	}