Skip to content

Instantly share code, notes, and snippets.

@andrewbt

andrewbt/index.html

Last active June 27, 2017 00:09
Show Gist options
  • Save andrewbt/37aa667f5d1b765f68b0d110271a82da to your computer and use it in GitHub Desktop.
Save andrewbt/37aa667f5d1b765f68b0d110271a82da to your computer and use it in GitHub Desktop.
Download ZIP
zoom level county/tract/block viewer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CARTO Locations | Training</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="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cdn.rawgit.com/azavea/Leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.css" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#readout {
top: 115px;
bottom: auto;
position: absolute;
z-index: 100;
left: 10px;
background-color: white;
width: 110px;
height: 50px;
border-radius: 10px;
padding: 5px;
font-size: 10pt;
line-height: 14pt;
}
</style>
</head>
<body>
<!-- map div -->
<div id="map"></div>
<!-- define a button object -->
<div id="readout">
<s><b>County:</b> zoom 0-4 </s><br>
<b>Tract:</b> zoom 0-12 <br>
<b>Block:</b> zoom 12+
</div>
<script type="text/javascript" src="https://cdn.rawgit.com/azavea/Leaflet.zoomdisplay/f863085c/dist/leaflet.zoomdisplay.js"></script>
<!-- infowindow div -->
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h2>GEOID:</h2>
<p>{{geoid10}}</p>
<h2>ACFOSW_200:</h2>
<p>{{acfosw_200}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</div>
</script>
<!-- legend div
<div class='cartodb-legend category'>
<div class="legend-title" style="color:#284a59">Cities</div>
<ul>
<li><div class="bullet" style="background-color:#5F4690"></div>Populated Place</li>
<li><div class="bullet" style="background-color:#1D6996"></div>Admin. 1 Capital</li>
<li><div class="bullet" style="background-color:#38A6A5"></div>Admin. 0 Capital</li>
<li><div class="bullet" style="background-color:#0F8554"></div>Admin. 1 region Capital</li>
<li><div class="bullet" style="background-color:#73AF48"></div>Scientific Station</li>
<li><div class="bullet" style="background-color:#EDAD08"></div>Admin. O region Capital </li>
<li><div class="bullet" style="background-color:#E17C05"></div>Admin. 0 Capital Alt.</li>
<li><div class="bullet" style="background-color:#CC503E"></div>Historic Place</li>
<li><div class="bullet" style="background-color:#94346E"></div>Meteorological Station</li>
</ul>
</div>
</div> -->
<script type="text/cartocss" id="styleTurboCounty">
#layer [zoom<=6]{
polygon-fill: ramp([acfosw_200], (#ffc6c4, #ee919b, #cc607d, #9e3963, #672044), quantiles);
line-width: 1;
line-color: #FFF;
line-opacity: 0.5;
}
</script>
<script type="text/cartocss" id="styleCounty">
/** choropleth visualization */
#county_data_all [zoom<=4]{
polygon-fill: #FFFFB2;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
[ acfosw_200 <= 8.81153732953988] {
polygon-fill: #BD0026;
}
[ acfosw_200 <= 5.82956175364112] {
polygon-fill: #F03B20;
}
[ acfosw_200 <= 5.12560788844407] {
polygon-fill: #FD8D3C;
}
[ acfosw_200 <= 4.77967607105538] {
polygon-fill: #FECC5C;
}
[ acfosw_200 <= 4.30296208007769] {
polygon-fill: #FFFFB2;
}
}
</script>
<script type="text/cartocss" id="styleTurboTract">
#layer {/*[zoom>=7]{*/
polygon-fill: ramp([acfosw_200], (#ffc6c4, #ee919b, #cc607d, #9e3963, #672044), quantiles);
line-width: 0.1;
line-color: #FFF;
line-opacity: 0.5;
}
</script>
<script type="text/cartocss" id="styleTract">
/* 4.889950354275755,4.999128021043575,5.37428983105258,6.02742750350594,9 */
#layer [zoom<=11]{
polygon-fill: #FFFFB2;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0.5;
[zoom<=5]{line-width: 0.05;line-opacity:0.2}
line-opacity: 0.5;
[acfosw_200 < 9]{
polygon-fill: #BD0026;
}
[acfosw_200 < 6.02742750350594]{
polygon-fill: #F03B20;
}
[acfosw_200 < 5.37428983105258]{
polygon-fill: #FD8D3C;
}
[acfosw_200 < 4.999128021043575]{
polygon-fill: #FECC5C;
}
[acfosw_200 < 4.889950354275755]{
polygon-fill: #FFFFB2;
}
}
</script>
<!-- block set to zoom 11 exclusive or higher -->
<script type="text/cartocss" id="styleBlock">
#layer [zoom>11]{
polygon-fill: #FFFFB2;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0.5;
line-opacity: 0.5;
[acfosw_200 < 9]{
polygon-fill: #BD0026;
}
[acfosw_200 < 6]{
polygon-fill: #F03B20;
}
[acfosw_200 < 5]{
polygon-fill: #FD8D3C;
}
[acfosw_200 < 4]{
polygon-fill: #FECC5C;
}
[acfosw_200 < 3]{
polygon-fill: #FFFFB2;
}
}
</script>
<script type="text/sql" id="queryCounty">
SELECT
cartodb_id, the_geom, the_geom_webmercator,
geoid10, acfosw_200
FROM
county_data_all
</script>
<script type="text/sql" id="queryTract">
SELECT
cartodb_id, the_geom, the_geom_webmercator,
tract_id2010 as geoid10, acfosw_200
FROM
tract_data_all
</script>
<script type="text/sql" id="queryBlock">
SELECT
cartodb_id, the_geom, the_geom_webmercator,
geoid10, acfosw_200
FROM
block_data_all_batch_cartodbid
</script>
<script>
function main() {
// get styles & query
var styleTurboCounty = $("#styleTurboCounty").text(),
styleCounty = $("#styleCounty").text(),
styleTurboTract = $("#styleTurboTract").text(),
styleTract = $("#styleTract").text(),
styleBlock = $("#styleBlock").text(),
queryCounty = $("#queryCounty").text(),
queryTract = $("#queryTract").text(),
queryBlock = $("#queryBlock").text(),
// declare map variable
map = L.map('map', {
zoomControl: true,
center: [41.9, -87.7],
zoom: 5
});
// add basemap
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// add cartodb layer
cartodb.createLayer(map, {
user_name: 'fcc-fbd-admin',
type: 'cartodb',
sublayers: [/*{
sql: queryCounty,
cartocss: styleCounty
},*/
{
sql: queryTract,
cartocss: styleTract,
interactivity: ['acfosw_200', 'geoid10']
},
{
sql: queryBlock,
cartocss: styleBlock
}]
}).addTo(map)
.done(function(layer){
/* declare sublayer variable */
var firstLayer = layer.getSubLayer(0),
secondLayer = layer.getSubLayer(1);
// set layer interactivity
firstLayer.setInteractivity("geoid10, acfosw_200");
firstLayer.setInteraction(true);
secondLayer.setInteractivity("geoid10, acfosw_200");
secondLayer.setInteraction(true);
// add popup
cdb.vis.Vis.addInfowindow(
map, layer, ["acfosw_200", "geoid10"],
{
infowindowTemplate: $('#infowindow_template').html()
});
/* add button action
$('button').on('click', function() {
var new_style = style.replace('marker-width: 10;','marker-width: ramp([pop_max], range(3,25), quantiles(7));');
cityLayer.setCartoCSS(new_style);
});//*/
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment