feomike/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Map Template</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<style>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; margin:0; padding:0; }
.sect-divider { border-bottom: 1px solid #CCC; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin-bottom: 3px; }
h3 { font-size: 14px; }
a { color: #115B8A; text-decoration: none; }
a:hover { text-decoration: underline; }
p, dt, dd { line-height: 18px; }
dt, dd { min-height: 20px }
dt { font-weight: bold; }
.dl-inline dt { clear: left; float: left; overflow: hidden; }
.dl-inline dd { margin-left: 160px; }
.dl-statTract dt:first-child, .dl-statTract dt:first-child+dd { min-height: 40px; margin-bottom: 5px; }
.dl-statTract dt:first-child { width: 160px; word-wrap: break-word; }
.help-inline { color: #444; font-style: italic; font-weight: normal; }
.table-data { border-collapse: collapse; }
.table-data th { background-color: #F1F1F1; }
.table-data th, .table-data td { padding: 5px; }
.table-data th:first-child { text-align: left; }
caption { font-weight: bold; padding: 3px 0 5px; }
.table-data td:first-child { width: 140px; }
.table-data th sup { font-size: 9px; }
tfoot { border-top: 2px solid #D3D3D3; }
tfoot sup { margin-right: 2px; position: relative; top: 2px; }
.table-legend th, .table-legend td { font-size: 11px; }
.table-legend td { padding: 5px 0 5px 5px; }
.table-legend td:nth-child(n+2) { text-align: center; }
.btn { border: 1px solid #285e8e; border-radius: 4px; display: inline-block; padding: 6px 12px; }
.btn:hover { background-color: #3276b1; color: #FFF; text-decoration: none; }
.btn-xs { border-radius: 3px; padding: 1px 5px; }
#map { bottom:0; left: 0; position: fixed; top:0; width: 69%; }
#map-sidebar { bottom:0; position: fixed; right: 0; top: 0; width: 360px; }
#map-sidebar-ft { bottom: 10px; position: absolute; text-align: center; width: 100%; }
#map-summary { padding: 10px; }
#map-legend { background-color: #FFF; border: 1px solid #CCC; bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; left: 0px; padding: 5px; position: absolute; }
.lnk-togLegend { bottom: 0; position: absolute; text-align: center; width: 100%; }
#map-legend .lnk-togLegend { margin: 0 0 5px; position: static; }
.key-symbol { opacity: 0.75; }
.map-desc { font-size: 12px; }
.panel { border: 1px solid #CCCCCC; max-height: 200px; padding: 5px; }
.panel-scroll { overflow-y: auto; }
.hide { display: none !important; }

@media only screen and (height: 500px) {
#map { width: 604px; }
#map-sidebar { width: 311px; }
}

@media only screen and (max-height: 715px) {
.lnk-togLegend { display: inline-block; }
#map-legend { display: none; border: none; box-shadow: 0px 0px 10px #CCC; }
.table-legend { margin-bottom: 5px; }
}

@media only screen and (min-height: 716px) {
.lnk-togLegend { display: none; }
#map-legend { display: block !important; }
}
</style>
</head>
<body>
<div id="map"></div>
<aside id="map-sidebar">
    <section id="map-summary">
        <h1>CAM Cost Map</h1>
        <p class="map-desc">Zoom in to display tract level details on mouseover below.<br><small>Compatible with current versions of Chrome, Firefox, or Safari browsers.</small></p>
        <section class="sect-divider">
                <h2>Selected Tract: <span id="stat-tract">---------</span></h2>
                (County: <span id="stat-cnty">------</span>, <span id="stat-state">--</span>)
                <dl class="dl-statTract dl-inline">
                    <dt>Locations Unserved by an Unsubsidized Provider: </dt>
                    <dd><br>
                        <span id="stat-totloc">----</span></dd>
                    <dt>Total Annual Support:</dt>
                    <dd>$ <span id="stat-totsup">----</span></dd>
                    <dt>- Price cap:</dt>
                    <dd>$ <span id="stat-pcannsup">----</span></dd>
                    <dt>- Rate-of-return:</dt>
                    <dd>$ <span id="stat-rorannsup">----</span></dd>
                </dl>
            </section>
            <section class="sect-divider">
                <h3><abbr title="Number">No.</abbr> of Locations >$50 <span style="font-size: 11px;">(per month, per location)</span></h3>
                <dl id="dl-numLocs" class="dl-inline">
                    <dt><abbr title="Price cap">PC</abbr> Locations Between: </dt>
                    <dd><span id="stat-pclocbtwn">-----</span></dd>
                    <dt><abbr title="Rate-of-return">ROR</abbr> Locations Between: </dt>
                    <dd><span id="stat-rorlocbtwn">-----</span></dd>
                    <dt><abbr title="Price cap">PC</abbr> Locations Above: </dt>
                    <dd><span id="stat-pclocabv">-----</span></dd>
                    <dt><abbr title="Rate-of-return">ROR</abbr> Locations Above: </dt>
                    <dd><span id="stat-rorlocabv">-----</span></dd>
                </dl>
            </section>

    </section>
    <p class="lnk-togLegend"><a class="btn btn-xs" href="#void">Show Map Legend</a></p>
    <div id="map-legend">
    <table class="table-legend table-data">
        <caption>
        Model Landscape
        </caption>
        <thead>
            <tr>
                <th>Cost per location</th>
                <th>Served<sup>1</sup></th>
                <th>Unserved<sup>1</sup></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan=3><sup>1</sup>SERVED:  Census blocks are considered served by an unsubsidized provider if they report 3 Mbps downstream / 768 kbps upstream Internet access in SBI round 7 data and report voice connections on FCC Form 477. </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td style="white-space: nowrap;"><strong>Above</strong> <br>
                    Price cap: &ge; $183.53 <br>
                    Rate-of-return: &ge; $300</td>
                <td><span class="key-symbol" style="color:#FFACA1">▉</span></td>
                <td><span class="key-symbol" style="color:#DC4E3D">▉</span></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;"><strong>Between</strong> <br>
                    Price cap: &gt; $50 and &lt; $183.53 <br>
                    Rate-of-return: &gt; $50 and &lt; $300</td>
                <td><span class="key-symbol" style="color:#C4F489">▉</span></td>
                <td><span class="key-symbol" style="color:#28925B">▉</span></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;"><strong>Below</strong> <br>
                    Price cap: &le; $50 <br>
                    Rate-of-return: &le; $50</td>
                <td><span class="key-symbol" style="color:#FBDA62">▉</span></td>
                <td><span class="key-symbol" style="color:#D99442">▉</span></td>
            </tr>
        </tbody>
    </table>
    <p class="lnk-togLegend"><a class="btn btn-xs" href="#void">Close</a></p>
</div>

</aside>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.11.0.min.js"><\/script>')</script>
<script>

// Setup map
var map = L.mapbox.map('map', 'fcc.map-kzt95hy6,fcc.cni885mi,fcc.zrbgwrk9,fcc.j5v4e7b9,fcc.55bchaor,fcc.0iesif6r,fcc.xoiara4i,fcc.gqjb57b9', {legendControl: false, attributionControl: false, gridControl: false, maxZoom: 12})
            .setView([38.82, -94.96], 4);
var hash = L.hash(map);

// Display the map tooltip in the sidebar
map.gridLayer.on('mousemove',function(o) {

	var data;

	if (o.data != undefined) {
	   data = o.data;

		// Populate location other stats (teaser fields from map)
		$('#stat-cnty').text(data.county_name);
		$('#stat-state').text(data.state);
		$('#stat-tract').text(data.tract);
		$('#stat-totloc').text(data.total_locations);
		$('#stat-totsup').text(formatComma(data.total_annual_support));

		// Additional Cost Stats (teaser fields from map)
		$('#stat-pclocbtwn').text(data.pc_locations_between);
		$('#stat-rorlocbtwn').text(data.ror_locations_between);
		$('#stat-pclocabv').text(data.pc_locations_above_ttc);
		$('#stat-rorlocabv').text(data.ror_locations_above_ttc);
		$('#stat-pcannsup').text(formatComma(data.pc_annual_support));
		$('#stat-rorannsup').text(formatComma(data.ror_annual_support));


	} else { // Reset the text labels
		$('#stat-tract').text('---------');
		$('#stat-cnty').text('------');
		$('#stat-state, #stat-pcannsup, #stat-rorannsup').text('--');
		$('#stat-totloc, #stat-totsup').text('----');
		$('#dl-numLocs').find('span').text('-----');
	}

});

// Format dummy data with commas
function formatComma(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// Resize the map width and position the legend when the window is resized
$(window).on('resize', function(e) {
    var mapwidth = $('body').width() - $('#map-sidebar').width(),
		legendWidth = ($('#map-sidebar').width()/2) - ($('#map-legend').width()/2) - 5;

	$('#map-legend').css('left', legendWidth);
	$('#map').css('width', mapwidth);
}).resize();

// Toggle the legend display
$('.lnk-togLegend').click(function(e) {
	e.preventDefault();
	$("#map-legend").animate(
		{height: [ "toggle", "swing" ],
	    opacity: "toggle"},
		350,
		function(){
			if ($(this).is(':visible')) {
			    $('.lnk-togLegend').eq(0).addClass('hide');
			} else {
				$('.lnk-togLegend').eq(0).removeClass('hide');
			}
		}
	);
});

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Map Template</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
	<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
	<style>
	body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; margin:0; padding:0; }
	.sect-divider { border-bottom: 1px solid #CCC; }
	h1 { font-size: 22px; margin: 0; }
	h2 { font-size: 16px; margin-bottom: 3px; }
	h3 { font-size: 14px; }
	a { color: #115B8A; text-decoration: none; }
	a:hover { text-decoration: underline; }
	p, dt, dd { line-height: 18px; }
	dt, dd { min-height: 20px }
	dt { font-weight: bold; }
	.dl-inline dt { clear: left; float: left; overflow: hidden; }
	.dl-inline dd { margin-left: 160px; }
	.dl-statTract dt:first-child, .dl-statTract dt:first-child+dd { min-height: 40px; margin-bottom: 5px; }
	.dl-statTract dt:first-child { width: 160px; word-wrap: break-word; }
	.help-inline { color: #444; font-style: italic; font-weight: normal; }
	.table-data { border-collapse: collapse; }
	.table-data th { background-color: #F1F1F1; }
	.table-data th, .table-data td { padding: 5px; }
	.table-data th:first-child { text-align: left; }
	caption { font-weight: bold; padding: 3px 0 5px; }
	.table-data td:first-child { width: 140px; }
	.table-data th sup { font-size: 9px; }
	tfoot { border-top: 2px solid #D3D3D3; }
	tfoot sup { margin-right: 2px; position: relative; top: 2px; }
	.table-legend th, .table-legend td { font-size: 11px; }
	.table-legend td { padding: 5px 0 5px 5px; }
	.table-legend td:nth-child(n+2) { text-align: center; }
	.btn { border: 1px solid #285e8e; border-radius: 4px; display: inline-block; padding: 6px 12px; }
	.btn:hover { background-color: #3276b1; color: #FFF; text-decoration: none; }
	.btn-xs { border-radius: 3px; padding: 1px 5px; }
	#map { bottom:0; left: 0; position: fixed; top:0; width: 69%; }
	#map-sidebar { bottom:0; position: fixed; right: 0; top: 0; width: 360px; }
	#map-sidebar-ft { bottom: 10px; position: absolute; text-align: center; width: 100%; }
	#map-summary { padding: 10px; }
	#map-legend { background-color: #FFF; border: 1px solid #CCC; bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; left: 0px; padding: 5px; position: absolute; }
	.lnk-togLegend { bottom: 0; position: absolute; text-align: center; width: 100%; }
	#map-legend .lnk-togLegend { margin: 0 0 5px; position: static; }
	.key-symbol { opacity: 0.75; }
	.map-desc { font-size: 12px; }
	.panel { border: 1px solid #CCCCCC; max-height: 200px; padding: 5px; }
	.panel-scroll { overflow-y: auto; }
	.hide { display: none !important; }

	@media only screen and (height: 500px) {
	#map { width: 604px; }
	#map-sidebar { width: 311px; }
	}

	@media only screen and (max-height: 715px) {
	.lnk-togLegend { display: inline-block; }
	#map-legend { display: none; border: none; box-shadow: 0px 0px 10px #CCC; }
	.table-legend { margin-bottom: 5px; }
	}

	@media only screen and (min-height: 716px) {
	.lnk-togLegend { display: none; }
	#map-legend { display: block !important; }
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<aside id="map-sidebar">
	<section id="map-summary">
	<h1>CAM Cost Map</h1>
	<p class="map-desc">Zoom in to display tract level details on mouseover below.<br><small>Compatible with current versions of Chrome, Firefox, or Safari browsers.</small></p>
	<section class="sect-divider">
	<h2>Selected Tract: <span id="stat-tract">---------</span></h2>
	(County: <span id="stat-cnty">------</span>, <span id="stat-state">--</span>)
	<dl class="dl-statTract dl-inline">
	<dt>Locations Unserved by an Unsubsidized Provider: </dt>
	<dd><br>
	<span id="stat-totloc">----</span></dd>
	<dt>Total Annual Support:</dt>
	<dd>$ <span id="stat-totsup">----</span></dd>
	<dt>- Price cap:</dt>
	<dd>$ <span id="stat-pcannsup">----</span></dd>
	<dt>- Rate-of-return:</dt>
	<dd>$ <span id="stat-rorannsup">----</span></dd>
	</dl>
	</section>
	<section class="sect-divider">
	<h3><abbr title="Number">No.</abbr> of Locations >$50 <span style="font-size: 11px;">(per month, per location)</span></h3>
	<dl id="dl-numLocs" class="dl-inline">
	<dt><abbr title="Price cap">PC</abbr> Locations Between: </dt>
	<dd><span id="stat-pclocbtwn">-----</span></dd>
	<dt><abbr title="Rate-of-return">ROR</abbr> Locations Between: </dt>
	<dd><span id="stat-rorlocbtwn">-----</span></dd>
	<dt><abbr title="Price cap">PC</abbr> Locations Above: </dt>
	<dd><span id="stat-pclocabv">-----</span></dd>
	<dt><abbr title="Rate-of-return">ROR</abbr> Locations Above: </dt>
	<dd><span id="stat-rorlocabv">-----</span></dd>
	</dl>
	</section>

	</section>
	<p class="lnk-togLegend"><a class="btn btn-xs" href="#void">Show Map Legend</a></p>
	<div id="map-legend">
	<table class="table-legend table-data">
	<caption>
	Model Landscape
	</caption>
	<thead>
	<tr>
	<th>Cost per location</th>
	<th>Served<sup>1</sup></th>
	<th>Unserved<sup>1</sup></th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<td colspan=3><sup>1</sup>SERVED: Census blocks are considered served by an unsubsidized provider if they report 3 Mbps downstream / 768 kbps upstream Internet access in SBI round 7 data and report voice connections on FCC Form 477. </td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
	<td style="white-space: nowrap;"><strong>Above</strong> <br>
	Price cap: ≥ $183.53 <br>
	Rate-of-return: ≥ $300</td>
	<td><span class="key-symbol" style="color:#FFACA1">▉</span></td>
	<td><span class="key-symbol" style="color:#DC4E3D">▉</span></td>
	</tr>
	<tr>
	<td style="white-space: nowrap;"><strong>Between</strong> <br>
	Price cap: > $50 and < $183.53 <br>
	Rate-of-return: > $50 and < $300</td>
	<td><span class="key-symbol" style="color:#C4F489">▉</span></td>
	<td><span class="key-symbol" style="color:#28925B">▉</span></td>
	</tr>
	<tr>
	<td style="white-space: nowrap;"><strong>Below</strong> <br>
	Price cap: ≤ $50 <br>
	Rate-of-return: ≤ $50</td>
	<td><span class="key-symbol" style="color:#FBDA62">▉</span></td>
	<td><span class="key-symbol" style="color:#D99442">▉</span></td>
	</tr>
	</tbody>
	</table>
	<p class="lnk-togLegend"><a class="btn btn-xs" href="#void">Close</a></p>
	</div>

	</aside>


	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/libs/jquery-1.11.0.min.js"><\/script>')</script>
	<script>

	// Setup map
	var map = L.mapbox.map('map', 'fcc.map-kzt95hy6,fcc.cni885mi,fcc.zrbgwrk9,fcc.j5v4e7b9,fcc.55bchaor,fcc.0iesif6r,fcc.xoiara4i,fcc.gqjb57b9', {legendControl: false, attributionControl: false, gridControl: false, maxZoom: 12})
	.setView([38.82, -94.96], 4);
	var hash = L.hash(map);

	// Display the map tooltip in the sidebar
	map.gridLayer.on('mousemove',function(o) {

	var data;

	if (o.data != undefined) {
	data = o.data;

	// Populate location other stats (teaser fields from map)
	$('#stat-cnty').text(data.county_name);
	$('#stat-state').text(data.state);
	$('#stat-tract').text(data.tract);
	$('#stat-totloc').text(data.total_locations);
	$('#stat-totsup').text(formatComma(data.total_annual_support));

	// Additional Cost Stats (teaser fields from map)
	$('#stat-pclocbtwn').text(data.pc_locations_between);
	$('#stat-rorlocbtwn').text(data.ror_locations_between);
	$('#stat-pclocabv').text(data.pc_locations_above_ttc);
	$('#stat-rorlocabv').text(data.ror_locations_above_ttc);
	$('#stat-pcannsup').text(formatComma(data.pc_annual_support));
	$('#stat-rorannsup').text(formatComma(data.ror_annual_support));


	} else { // Reset the text labels
	$('#stat-tract').text('---------');
	$('#stat-cnty').text('------');
	$('#stat-state, #stat-pcannsup, #stat-rorannsup').text('--');
	$('#stat-totloc, #stat-totsup').text('----');
	$('#dl-numLocs').find('span').text('-----');
	}

	});

	// Format dummy data with commas
	function formatComma(x) {
	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}

	// Resize the map width and position the legend when the window is resized
	$(window).on('resize', function(e) {
	var mapwidth = $('body').width() - $('#map-sidebar').width(),
	legendWidth = ($('#map-sidebar').width()/2) - ($('#map-legend').width()/2) - 5;

	$('#map-legend').css('left', legendWidth);
	$('#map').css('width', mapwidth);
	}).resize();

	// Toggle the legend display
	$('.lnk-togLegend').click(function(e) {
	e.preventDefault();
	$("#map-legend").animate(
	{height: [ "toggle", "swing" ],
	opacity: "toggle"},
	350,
	function(){
	if ($(this).is(':visible')) {
	$('.lnk-togLegend').eq(0).addClass('hide');
	} else {
	$('.lnk-togLegend').eq(0).removeClass('hide');
	}
	}
	);
	});

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