1 <!DOCTYPE html> 2<html> 3 <head> 4 <title>MI Environment</title> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 7 8 <style> 9 html, body{ 10 height: 100%; 11 width:100%; 12 padding: 0; 13 margin: 0; 14 } 15 16 #map{ 17 height:100%; 18 } 19 20 #content{ 21 height:100%; 22 overflow-y:scroll; 23 z-index: 100; 24 } 25 26 #readMethods { 27 color: blue; 28 } 29 30 .no-padding { 31 padding-left:0px; 32 padding-right: 0px; 33 } 34 35 #footnotes p { 36 font-size: 11px; 37 line-height: 14px; 38 margin: 10px 0; 39 border-top: 2px dotted #ddd; 40 padding-top: 5px; 41} 42 43 .nav { 44 position: relative; 45 display: block; 46 } 47 .navbar 48 {margin-bottom: 0px;} 49 50 .wrapper{ 51 position:absolute; 52 top:122px; 53 left:20px; 54 width:37%; 55 height:77%; 56 overflow-y:auto; 57 z-index: 1000; 58 margin: 0; 59 padding: 5px 10px 10px 10px; 60 background-color: #fff; 61/* background-color: rgba(255,255,255,0.95);*/ 62 box-shadow: 0 5px 5px rgba(0, 0, 0, 1); 63 border-radius: 5px; 64 } 65 66 .cartodb-zoom { 67 float:right; 68 } 69 70 .cartodb-logo { 71 display:none !important; 72 } 73 74 .btn { 75 margin: -4px 1px; 76 } 77 78 .leg { 79 margin: 10px 1px; 80 } 81 82 .byline{ 83 font-family: Georgia,serif; 84 margin: -5px 0 0 0; 85 font-size: 12px; 86 font-weight: normal; 87 line-height: 20px; 88 display: block; 89 color: #000; 90 text-align: left; 91 /*#ff5443*/ 92 } 93 94 .dateline{ 95 font-family: Arial,sans-serif; 96 margin: -8px 0 0 0; 97 font-size: 10px; 98 line-height: 13px; 99 text-transform: uppercase; 100 letter-spacing: .5px; 101 color: #333; 102 text-align: left; 103 } 104 105 .shadow { 106 display:none; 107 background:#000; 108 position: absolute; 109 left:0; 110 top:0; 111 opacity: .8; 112 z-index:100; 113 height:100%; 114 width:100%; 115 } 116 /*.style { 117 position: absolute; 118 bottom: 100px; 119 left: 100px; 120 display: block; 121 width: 71px!important; 122 height: 29px!important; 123 border: none; 124 outline: none; 125}*/ 126 127 128 </style> 129 130 <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> 131 <link rel="stylesheet" href="carto.css" /> 132 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 133
133<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
133 134 </head> 135 <!-- <body> 136 <nav class="navbar navbar-default navbar-static-top" style="margin-bottom:0px;"> 137 <div class="container-fluid"> 138 <div class="navbar-header"> 139 <a class="navbar-brand">Trish's Project</a> 140 </div> 141 <div id="navbar"> 142 <ul id="sections" class="nav navbar-nav"> 143 <li>first menu item</li> 144 <li>second menu item</li> 145 </ul> 146 </div> 147 148 </div> 149 150 </nav> 151 <div class="container-fluid"> 152 <div class="row"> 153 <div class="map-container no-padding col-sm-12" style="padding-left:0px; padding-right:0px;"> --> 154 155 <!-- Created a div to hold the map --> 156 <div id="map" > 157 </div> 158 159 <!-- --> 160 161 162 <!-- the wrapper div contains everything in the text box --> 163 <div class="wrapper"> 164 <h2>The Mi-Environmental Project</h2> 165 <p> 166 The goal of this research is to identify the relative vulnerability of census tracts within Michigan to cumulative environmental exposures. Our first layer visualizes the relative exposures that contribute to heat stress vulnerability from future climate change. 167 </p> 168 <p class ="dateline"> March 24, 2016 </p> 169 <h5>Select Layer to View Map:</h5> 170 171 172 <!-- create a button group to control the layers --> 173 <!-- Use btn active (active button) or btn-warning (orange button) or btn-info (blue button), btn-secondary, btn-primary, btn-danger, btn-link, btn-sucess(green) --> 174 <div class="btn-group layer-select"> 175 <btn class="btn first btn-info btn-warning" id="1" href="#first" onclick="showLayer(this)">Heat Stress Index </btn> 176 <btn class="btn third btn-info" id="4" href="#third" onclick="showLayer(this)">People</btn> 177 <btn class="btn second btn-info" id="3" href="#second" onclick="showLayer(this)">Place</btn> 178 <btn class="btn fourth btn-info" id="2" href="#fourth" onclick="showLayer(this)">Climate</btn> 179 </div> 180 181 <!-- <div> 182 <a href= "#" id="readMethods">Methodology</a> 183 </div> --> 184 185 <!-- created a div to hold the potential legend or text information --> 186 <div class="leg"> 187 Heat Stress Index: The vulnerability index is the average of three factors that can contribute to climate change-related heat stress: vulnerabilities among people, places and projected temperatures. Using indicators that represent projected temperatures associated with climate change, social vulnerability, and the impact of the built and natural landscape, this map identifies census tracts in Michigan that are most vulnerable to heat stress (score of 5) compared to those that are less vulnerable (score of 1). Our tool can help communities prepare for extreme heat events by identifying areas and reasons for vulnerability to aid communities to implement mitigation strategies in all areas and adaptation in most vulnerable areas. 188 189 </div> 190 191 <div id="footnotes"> 192 <p>Sources: American Community Survey (ACS 2012 - 2013), 5 year estimates; National Land Cover Database (2011); Center for Disease Control and Prevention, Behavioral Risk Factor Surveillance System (2012), Coupled-Model Intercomparison Project 3 (2041-2070). 193</p> 194</div> 195<div class= "byline">Research By: <a href="https://www.linkedin.com/in/trishkoman">Trish Koman, </a><a href="https://www.linkedin.com/in/susan-landfried-b8643088">Susan Landfried, </a><a href="https://www.linkedin.com/in/frank-romo-384aa5aa">Frank Romo</a></p> 196 </div> 197 </div> 198 </div> 199 200 201 <!-- include cartodb.js library --> 202 203<!-- THIS IS INFORMATION THAT SHOWS THE CARTODB WATERMARK - BUT I DON'T KNOW HOW TO GET RID OF THE DEFUALT ONE --> 204 <!-- <div class="cartodb-logo" style="position:absolute; bottom:0; left:0; display:block; border:none; z-index:1000000;"><a href="http://www.cartodb.com" target="_blank"><img width="71" height="29" src="http://cartodb.s3.amazonaws.com/static/new_logo.png" style="position:absolute; bottom:100px; left:100px; display:block; width:71px!important; height:29px!important; border:none; outline:none;" alt="CartoDB" title="CartoDB"></a></div> --> 205 206
206<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
206 207
207<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
207 208
209<script> 210 211 212 213 function main() { 214 //store the url for the map in a variable 215 var url = 'https://fromo.cartodb.com/api/v2/viz/c01f2ffc-eb21-11e5-b34a-0e674067d321/viz.json'; 216 217 // create a cartoDB viz 218 var visualizacion = cartodb.createVis("map", url, { 219 search: true, 220 zoom: 7, 221 center_lat: 44.511730, 222 center_lon: -86.476131 223 }) 224 .done(function(vis, layers) { 225 226 // defining which layer we are using, note that this is not the sublayer 227 // the cartodb layer is [1] as compared to the tile layer which is [0] 228 layer = layers[1]; 229 230 231 //create sublayers to that we can set infobox or infowindow per sublayer 232 233 234 235 //second sublayer 236 var michigan_temp = layers[1].getSubLayer(0); 237 michigan_temp.setInteraction(true); 238 239 //third sublayer 240 var heat_island = layers[1].getSubLayer(1); 241 heat_island.setInteraction(true); 242 243 //fourth sublayer 244 var mich_sens = layers[1].getSubLayer(2); 245 mich_sens.setInteraction(true); 246 247 //first sublayer 248 var michigan_index = layers[1].getSubLayer(3); 249 michigan_index.setInteraction(true); 250 251 252 //create overlays specific to each layer 253 vis.addOverlay({ 254 layer: heat_island, 255 type: 'infowindow', 256 template: '<div><h1>Heat Island</h1>{{geoid}} {{cal_index}}</div>', 257 width: 200, 258 position: 'top|right'}); 259 260 vis.addOverlay({ 261 layer: michigan_index, 262 type: 'infowindow', 263 template: '<div>Michigan Index {{geoid}} {{cal_index}} {{under5}}</div>', 264 width: 200, 265 position: 'top|right' 266 }); 267 268 vis.addOverlay({ 269 layer: michigan_temp, 270 type: 'infowindow', 271 template: '<div><h4> Michigan Temperature </h4> <h10>Temperature: {{cal_index}} </h10></div>', 272 width: 200, 273 position: 'top|right' 274 }) 275 276 277 }); 278 } 279 280 function showLayer(layerToShow) { 281 282 //turn off all layers 283 layer.getSubLayers().forEach(function(i) { 284 i.hide() 285 }); 286 287 //remove active class from all buttons 288 $('.btn').removeClass('active btn-warning'); 289 //on the clicked button add the active class 290 $(layerToShow).addClass('active btn-warning'); 291 292 //use a case switch statement to show the selected layer and change the text in the div below it 293 switch (layerToShow.id) { 294 case "1": 295 layer.getSubLayer(0).show(); 296 $('.leg').empty().append("Heat Stress Index: The vulnerability index is the average of three factors that can contribute to climate change-related heat stress: vulnerabilities among people, places and projected temperatures. Using indicators that represent projected temperatures associated with climate change, social vulnerability, and the impact of the built and natural landscape, this map identifies census tracts in Michigan that are most vulnerable to heat stress (score of 5) compared to those that are less vulnerable (score of 1). Our tool can help communities prepare for extreme heat events by identifying areas and reasons for vulnerability to aid communities to implement mitigation strategies in all areas and adaptation in most vulnerable areas."); 297 break; 298 case "2": 299 layer.getSubLayer(1).show(); 300 $('.leg').empty().append("Future Exposure Index: Climate change-related temperature projections are made by computer models at very large geographic scales, which can be a challenge to interpreting their application to smaller areas. We used both extreme temperature days and general increases in 30-year temperatures. The available climate modeling divides Michigan into 10 climate regions and does not model the local effect of the Great Lakes. This map represents downscaled projections from CMIP3 ensemble climate projections for years 2041-2070. Specifically, we converted data on a grid or raster to census tracts with a percentile between 0-100 assigned to each census tract. The layer combines the projected number of days over 90 degrees weighted at 0.75 and the projected average seasonal temperatures weighted at 0.25 to create the temperature exposure index."); 301 break; 302 case "3": 303 layer.getSubLayer(2).show(); 304 $('.leg').empty().append("Heat Island Exposure Index: Factors related to neighborhoods contribute to heat exposures such as how much pavement or shade from tree canopy is present. Using data from the 2011 National Land Cover Database,we average of the percent of impervious surface and the percent of tree canopy, both obtained at a 30m resolution. We averaged the data sets over census tracts for the average percent tree canopy and average percent impervious surface to give a score by census tract and then we divided the score into five categories."); 305 break; 306 case "4": 307 layer.getSubLayer(3).show(); 308 $('.leg').empty().append("Heat-related Social Vulnerability Index: The first component layer examines heat stress-related social vulnerability because children, the elderly, socially isolated people, and those with excessive weight may be more at risk. This layer averages percent of the population that are children under age 5, percent of the population over age 65 and living alone, the precent of households without access to a personal vehicle, and the percent of the population that is obese with a Body Mass Index of 30 kg/m2 or greater. The first three indicators came from 2012 - 2013 U.S. American Community Survey (ACS) fiver year estimates based on census tracts. County level obesity data were obtained from the 2012 Behavioral Risk Factor Surveillance System from the Centers for Disease Control (CDC). For each indicator, an index on a scale of 0-100 was created and then divided into five categories."); 309 break; 310 } 311 312 return true; 313 314 } 315 316 //when the browser loads call the main function to load the map 317 window.onload = main; 318 319 //resize the map so that it's big...only relevant if using bootstrap multi column 320 $(window).resize(function () { 321 var h = $(window).height(), 322 offsetTop = 10; // Calculate the top offset 323 $('#map').css('height', (h - offsetTop)); 324 $('#content').css('height', (h - offsetTop)); 325 }).resize(); 326 327 $('#readMethods').click(function(){ 328 $('#overlay').show(); 329 }) 330 331 332 333 </script>
333 334
334<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
334 335 336 </body> 337</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.