index.html
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map {width: 100%; position: absolute; top: 40px; bottom: 0px; background: black; z-index:1;}
div.cartodb-popup div.cartodb-popup-content {max-height:none | inherit}
#footer {
position:absolute;
bottom:0px;
left:0px;
right:0px;
background:#fff;
z-index:999;
overflow:auto;
padding:5px;
opacity:0.9;
}
h2{color:#fff;}
.leaflet-container .leaflet-control-zoom {margin-top:55;}
ul.inline > li, ol.inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link href="//netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet">
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h4 style="color:#333;">Census Block #{{content.data.geoid}}</h4><hr>
<p>Median Age Change, 1990-2010</p>
<img src="//chart.googleapis.com/chart?chf=bg,s,67676700&chxl=0:|1990|2000|2010&chxp=0,10,50,90&chxr=0,0,105&chxs=0,676767,10.5,0,l,676767&chxt=x&chs=200x100&cht=ls&chco=0000FF&chds=19,57&chd=t:{{content.data.med_age_90}},{{content.data.med_age_00}},{{content.data.med_age_10}}&chdlp=b&chg=-1,0&chls=3&chma=5,5,5,5|5"/>
<hr>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand">ACA Qualified Health Plans</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><small><i class="icon-user icon-white"></i> Coverage Type <b class="caret"></b></small></a>
<ul class="dropdown-menu">
<li><a class="coverage active" href="#" id="premium_adult_individual_age_27">Adult, 27-50</a></li>
<li><a class="coverage" href="#" id="premium_adult_individual_age_50">Adult, 50+</a></li>
<li><a class="coverage" href="#" id="premium_family">Family</a></li>
<li><a class="coverage" href="#" id="premium_single_parent_family">Single-Parent Family</a></li>
<li><a class="coverage" href="#" id="premium_couple">Couple</a></li>
<li><a class="coverage" href="#" id="premium_child">Child</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><small><i class="icon-download icon-white"></i> Download <b class="caret"></b></small></a>
<ul class="dropdown-menu">
<li><a id="downkml" href="#" target="_blank">KML</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-narrow">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">About</h3>
</div>
<div class="modal-body">
<p>This page is a demonstration of a theme-specific, easily-replicated public portal for open geodata. More details on the project are <a href="//geosprocket.blogspot.com/2013/04/toward-ideal-geoportal.html" target="_blank">available here.</a></p>
<hr>
<p><strong>Zoning Categories</strong></p>
<ul class="unstyled">
<li><a style='background:#f6e03f;'> </a> Enterprise</li>
<li><a style='background:#adbd06;'> </a> Institutional</li>
<li><a style='background:#cfc8a2;'> </a> Mixed Use</li>
<li><a style='background:#f6f7bd;'> </a> Registered Community Organizations</li>
<li><a style='background:#895793;'> </a> Residential</li>
<li><a style='background:#de3f33;'> </a> Urban Reserve</li>
</ul>
<p><small>Buildings and zoning data provided by <a href="//burlingtonvt.gov/" target="_blank">the City of Burlington</a> and <a href="//www.openstreetmap.org/?lat=44.48026&lon=-73.21476&zoom=15&layers=M" target="_blank">Openstreetmap Contributors</a></small></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div id="footer">
<div class="container">
<ul class="inline">
<li><h2 class="switch-title">Plan Premiums by County: Adult, 27-50 </h2></li>
<li class="divider"></li>
</ul>
</div>
</div>
</body>
<script>
var map;
function init() {
map = new L.Map('map', {
center: [40, -90],
zoom: 4,
minZoom: 2,
maxZoom: 14
});
L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-sa4pz9ny/{z}/{x}/{y}.png', {
attribution: '<a href="//mapbox.com/about/maps/" target="_blank">w/ Mapbox</a>'
}).addTo(map);
var reference = L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-6loa9k8g/{z}/{x}/{y}.png');
var current_coverage = $('.coverage.active').attr('id');;
var layerUrl = '//geosprocket.cartodb.com/api/v1/viz/qhp_individual_medical_landscape_102513a/viz.json';
var layerOptions = {
query: "SELECT * FROM {{table_name}} WHERE " + current_coverage + "> 0 ORDER BY "+ current_coverage + " DESC",
tile_style: "Map{buffer-size:512;}#{{table_name}}{[zoom<=5]{marker-width:10;}[zoom>5][zoom<=6]{marker-width:20;}[zoom>6]{[metal_level='Platinum']{marker-width:50;}[metal_level='Gold']{marker-width:40;}[metal_level='Silver']{marker-width:30;}[metal_level='Bronze']{marker-width:20;}[metal_level='Catastrophic']{marker-width:10;}}}marker-line-width:0.5;marker-line-color:#FFFFCC;marker-line-opacity:0.7;marker-line-gamma:0.5;marker-opacity:0.9;marker-placement:point;marker-type:ellipse;marker-allow-overlap:true;marker-clip:false;marker-fill:#cccccc;marker-multi-policy:each;[" + current_coverage + "<=300]{marker-fill:#FFFFCC;}[" + current_coverage + ">300][" + current_coverage + "<=500]{marker-fill:#A1DAB4;}[" + current_coverage + ">500][" + current_coverage + "<=800]{marker-fill:#41B6C4;}[" + current_coverage + ">800][" + current_coverage + "<=1500]{marker-fill:#2C7FB8;}[" + current_coverage + ">1500]{marker-fill:#253494;}}"
}
var layers = [];
cartodb.createLayer(map, layerUrl, layerOptions)
.on('done', function (layer) {
layer.infowindow.set('template', $('#infowindow_template').html());
map.addLayer(layer);
layers.push(layer);
map.addLayer(reference);
}).on('error', function () {
});
function updateQuery() {
layers[0].setOptions ({
query: "SELECT * FROM {{table_name}} WHERE " + current_coverage + "> 0 ORDER BY "+ current_coverage + " DESC",
tile_style: "Map{buffer-size:512;}#{{table_name}}{[zoom<=5]{marker-width:10;}[zoom>5][zoom<=6]{marker-width:20;}[zoom>6]{[metal_level='Platinum']{marker-width:50;}[metal_level='Gold']{marker-width:40;}[metal_level='Silver']{marker-width:30;}[metal_level='Bronze']{marker-width:20;}[metal_level='Catastrophic']{marker-width:10;}}}marker-line-width:0.5;marker-line-color:#FFFFCC;marker-line-opacity:0.7;marker-line-gamma:0.5;marker-opacity:0.9;marker-placement:point;marker-type:ellipse;marker-allow-overlap:true;marker-clip:false;marker-fill:#cccccc;marker-multi-policy:each;[" + current_coverage + "<=300]{marker-fill:#FFFFCC;}[" + current_coverage + ">300][" + current_coverage + "<=500]{marker-fill:#A1DAB4;}[" + current_coverage + ">500][" + current_coverage + "<=800]{marker-fill:#41B6C4;}[" + current_coverage + ">800][" + current_coverage + "<=1500]{marker-fill:#2C7FB8;}[" + current_coverage + ">1500]{marker-fill:#253494;}}"
});
}
var hash = new L.Hash(map);
$('.coverage').click(function () {
$('.coverage').removeClass('active');
$(this).addClass('active');
$('h2.switch-title').text("Plan Premiums by County: " + $('.coverage.active').text());
current_coverage = $(this).attr('id');
updateQuery();
});
$('#downkml').click(function () {
var new_sql = "//geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_bg_90_10&format=csv";
$(this).attr("href", new_sql);
});
}
</script>
<script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//geosprocket.com/assets/leaflet/leaflet-hash.js"></script>
</html>