Last active
December 26, 2015 19:09
-
-
Save wboykinm/7199247 to your computer and use it in GitHub Desktop.
ACA QHP demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;} | |
| #map {width: 100%; /*height: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; | |
| /*height:160px;*/ | |
| 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="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" /> | |
| <![endif]--> | |
| <!-- NOTE WE'RE USING A BOOTSWATCH THEME INSTEAD OF BOOTSTRAP STANDARD--> | |
| <link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"> | |
| <!--HERE YOU CAN CUSTOMIZE THE POPUP INFOWINDOW WITH DATA FROM YOU SOURCE TABLE; VARIABLES IN THE MUSTACHE TAGS--> | |
| <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"> | |
| <!-- 'content.data.whatever' CONTAINS THE FIELD DATA, THE REST IS HTML --> | |
| <h4 style="color:#333;">Census Block #{{content.data.geoid}}</h4><hr> | |
| <p>Median Age Change, 1990-2010</p> | |
| <img src="http://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()"> | |
| <!--ADD THE MAP ELEMENT--> | |
| <div id='map'></div> | |
| <!--SOME BOOTSTRAP NAV BOILERPLATE TO MAKE THINGS SIMPLE AND APPEALING--> | |
| <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> | |
| <!--TRIGGERS A MODAL WINDOW WITH ALL YOUR EXPLANATORY INFORMATION; NICE TO HAVE HIDDEN MOST OF THE TIME--> | |
| <!--<li><a href="#myModal" role="button" class="pull-right" data-toggle="modal"><small>About</small></a></li>--> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-narrow"> | |
| <!--MODAL POPUP CONTENT--> | |
| <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="http://geosprocket.blogspot.com/2013/04/toward-ideal-geoportal.html" target="_blank">available here.</a></p> | |
| <hr> | |
| <!--HACKTASTIC CATEGORICAL LEGEND--> | |
| <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="http://burlingtonvt.gov/" target="_blank">the City of Burlington</a> and <a href="http://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> | |
| <!--<li><img src="img/legend1.png"/> </li>--> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| //WRAP THE MAP ACTION | |
| var map; | |
| function init() { | |
| // INITIATE LEAFLET MAP | |
| map = new L.Map('map', { | |
| center: [40, -90], | |
| zoom: 4, | |
| minZoom: 2, | |
| maxZoom: 14 | |
| }); | |
| //CALL SOME COMPELLING MAPBOX TILES AS A BASE | |
| L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-sa4pz9ny/{z}/{x}/{y}.png', { | |
| attribution: '<a href="http://mapbox.com/about/maps/" target="_blank">w/ Mapbox</a>' | |
| }).addTo(map); | |
| //DEFINE A REFERENCE OVERLAY TO PLACE ON TOP OF THE BUILDINGS: | |
| var reference = L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-6loa9k8g/{z}/{x}/{y}.png'); | |
| //GIVE CARTODB THE PARAMETERS OF YOUR TABLE BY VIZ.JSON - | |
| var current_coverage = $('.coverage.active').attr('id');; | |
| var layerUrl = 'http://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;}}" | |
| } | |
| //Define layers array so you can put it through a julienne slicer later | |
| 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 () { | |
| //log the error | |
| }); | |
| 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); | |
| //THEMATIC FILTER: ACTIVE coverage | |
| //To redraw layers with the coverage attribute passed along | |
| $('.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(); | |
| }); | |
| //KML FORMAT, | |
| $('#downkml').click(function () { | |
| //NOTE THAT THIS IS AN ENCODED SQL STRING IN A URL. BEST THING EVER. | |
| var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_bg_90_10&format=csv"; | |
| $(this).attr("href", new_sql); | |
| }); | |
| } | |
| </script> | |
| <!--libraries kept to a minimum. Bootstrap could be used a la carte here, but I'm being lazy--> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> | |
| <script src="http://geosprocket.com/assets/leaflet/leaflet-hash.js"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment