This map illustrates % water calculations for US Census tracts (2014), where land and water area calculations are included to supplement an understanding of possible population sprawl.
It's called a "Dowsing" map, because water estimates are a kind of divination. ;) .
Buttons toggle the tracks, with and without choropleth magic.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>HTML Template | CartoDB</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
| <style type="text/css"> | |
| html, body, #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #cartocss { | |
| position: absolute; | |
| right: 20px; | |
| top: 20px; | |
| } | |
| #sql { | |
| position: absolute; | |
| right: 292px; | |
| top: 20px; | |
| } | |
| #legend { | |
| position: absolute; | |
| left: 40px; | |
| top: 0; | |
| } | |
| /*BUTTON STYLES*/ | |
| .layer_selector { | |
| background: rgba(255,255,255,0.9); | |
| border: 1px solid #999; | |
| border-radius: 5px; | |
| font-family: 'Unica One', sans-serif; | |
| font-size: 13px; | |
| padding: 0; | |
| text-align: center; | |
| width: 250px; | |
| } | |
| .layer_selector > p { | |
| border-bottom: 1px solid #999; | |
| padding: 5px 10px; | |
| text-transform: uppercase; | |
| } | |
| .layer_selector ul { | |
| padding: 0; margin: 0; | |
| list-style-type: none; | |
| } | |
| .layer_selector li { | |
| color: #444; | |
| cursor: pointer; | |
| padding: 10px 20px; | |
| } | |
| .layer_selector li:not(:last-child) { | |
| border-bottom: 1px solid #999; | |
| } | |
| .layer_selector li:hover { | |
| background-color: #a8ddb5; | |
| cursor: pointer; | |
| } | |
| .layer_selector li.selected { | |
| background-color: #7bccc4; | |
| } | |
| /*LEGEND STYLES*/ | |
| .legend { | |
| background: rgba(255,255,255,0.9); | |
| border: 1px solid #999; | |
| border-radius: 5px; | |
| font-family: 'Unica One', sans-serif; | |
| font-size: 13px; | |
| margin: 15px; | |
| padding: 5px; | |
| text-align: center; | |
| width: 270px; | |
| z-index: 100; | |
| } | |
| .legend .legend-title { | |
| text-align: center; | |
| margin-bottom: 10px; | |
| font-family: 'Unica One', sans-serif; | |
| text-transform: uppercase; | |
| } | |
| .legend .legend-scale ul { | |
| font-family: 'Unica One', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| float: left; | |
| list-style: none; | |
| } | |
| .legend .legend-scale ul li { | |
| display: block; | |
| float: left; | |
| width: 50px; | |
| margin-bottom: 6px; | |
| text-align: right; | |
| font-size: 80%; | |
| list-style: none; | |
| } | |
| .legend ul.legend-labels li span { | |
| display: block; | |
| float: left; | |
| height: 15px; | |
| width: 55px; | |
| margin: 8px; | |
| } | |
| .legend .legend-source { | |
| font-family: 'Unica One', sans-serif; | |
| font-size: 70%; | |
| color: #999; | |
| clear: both; | |
| } | |
| .legend a { | |
| color: #777; | |
| } | |
| </style> | |
| <!-- SQL TEMPLATE --> | |
| <script type='sql/text' id='sql'> | |
| SELECT *, 100 * awater / ST_Area(the_geom::geography) perc_water | |
| FROM tl_2014_census_tracts | |
| </script> | |
| <!-- SIMPLE VIS CSS --> | |
| <style type='cartocss/text' id='simple'> | |
| /** simple visualization */ | |
| #tl_2014_census_tracts{ | |
| polygon-fill: #5CA2D1; | |
| polygon-opacity: 0.7; | |
| line-color: #FFF; | |
| line-width: 0.25; | |
| line-opacity: 1; | |
| } | |
| </style> | |
| <!-- CHOROPLETH CSS --> | |
| <style type='cartocss/text' id='choropleth'> | |
| /** choropleth visualization */ | |
| #tl_2014_census_tracts{ | |
| polygon-fill: #FFFFCC; | |
| polygon-opacity: 0.8; | |
| line-color: #FFF; | |
| line-width: 0; | |
| line-opacity: 1; | |
| } | |
| #tl_2014_census_tracts [ perc_water <= 100.829766103904] { | |
| polygon-fill: #253494; | |
| } | |
| #tl_2014_census_tracts [ perc_water <= 6.89127773835036] { | |
| polygon-fill: #2C7FB8; | |
| } | |
| #tl_2014_census_tracts [ perc_water <= 1.99990433083773] { | |
| polygon-fill: #41B6C4; | |
| } | |
| #tl_2014_census_tracts [ perc_water <= 0.782021558262898] { | |
| polygon-fill: #A1DAB4; | |
| } | |
| #tl_2014_census_tracts [ perc_water <= 0.258319771503945] { | |
| polygon-fill: #FFFFCC; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- ADD BUTTONS --> | |
| <div id="cartocss" class="layer_selector"> | |
| <p>Layers</p> | |
| <ul> | |
| <li data="choropleth">Water Density Choropleth</li> | |
| <li data="simple">Simple County Map</li> | |
| </ul> | |
| </div> | |
| <!-- LEGENDS --> | |
| <div id="legend" class='legend'> | |
| <div class='legend-title'>Water Density x Census (2014)</div> | |
| <hr> | |
| <div class='legend-scale'> | |
| <ul class='legend-labels'> | |
| <li><span style='background:#FFFFCC;'></span> < 0.2 %</li> | |
| <li><span style='background:#A1DAB4;'></span></li> | |
| <li><span style='background:#41B6C4;'></span></li> | |
| <li><span style='background:#2C7FB8;'></span></li> | |
| <li><span style='background:#253494;'></span> < 100 %</li> | |
| </ul> | |
| </div> | |
| <div class='legend-source'>Source: <a href="http://www.census.gov/geo/maps-data/">US Census Bureau</a></div> | |
| </div> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <!-- place your code between the script tags below --> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
| window.onload = function () { | |
| // add your url ID here between viz/ and /viz.json or copy the visjson from your editor | |
| var vizjson_url = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/c03a644e-e45a-11e4-9d34-0e0c41326911/viz.json'; // <-- Paste viz.json URL between quotes | |
| var options = { | |
| sql: $("#sql").text(), // here you can set sql to run on your tables | |
| cartocss: $("#choropleth").text() // here you can set css to style your vis | |
| } | |
| // clear sql of space and returns | |
| options.sql = options.sql.replace(/(\r\n|\n|\r)/gm,'').trim(); | |
| var sublayers = []; | |
| // instantiate map object from Leaflet | |
| var mapObj = new L.Map(map, { // <-- Replace map_id with your #id for rendering | |
| center: [41.8369, -87.6847], // Chicago, IL | |
| zoom: 6 // zoom projection to adjust starting point zoom | |
| }); | |
| // CREATE LAYER SELECTOR - AKA BUTTONS | |
| function createSelector(layer) { | |
| var cartocss = ""; | |
| var $options = $(".layer_selector").find("li"); | |
| $options.click(function(e) { | |
| var $li = $(e.target); | |
| var selected = $li.attr('data'); | |
| $options.removeClass('selected'); | |
| $li.addClass('selected'); | |
| cartocss = $('#'+selected).text(); | |
| layer[0].setCartoCSS(cartocss); | |
| }); | |
| } | |
| // add basemap tiles | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(mapObj); | |
| // add data tile layer | |
| cartodb.createLayer(mapObj,vizjson_url) | |
| .addTo(mapObj) | |
| .done(function(layer) { | |
| console.log("Map successfully created."); | |
| sublayers[0] = layer.getSubLayer(0); | |
| sublayers[1] = layer.getSubLayer(1); | |
| sublayers[0].set(options); // altering the SQL and CartoCSS; see above | |
| sublayers[1].hide(); // hiding the traffic data | |
| createSelector(sublayers); | |
| }) | |
| .error(function(err) { | |
| console.log("Map not created: " + err); | |
| }); | |
| } |
