AirCompare

<!DOCTYPE html> <html lang="en"> <head> <title>AirCompare</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/aircompare.css">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-L8ZB');</script>  </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-L8ZB" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="myNav" class="overlay"> <i href="javascript:void(0)" class="closebtn fa fa-window-close-o fa-2x" data-toggle="tooltip" data-original-title="Close Screen" data-placement="left" onclick="closeNav()"></i> <div class="overlay-content"> <ul> <li>Use <strong>Trends</strong> maps if you are planning to move to a different city and want to see how air quality might affect your health.</li><br> <li>Use <strong>Seasons</strong> maps if you are planning a vacation to see what time of year air quality is better at your destination.</li><br> <li>Select the group that best describes you.</li><br> <li>Hover over counties to explore. Tap on mobile devices.</li><br> <li>Click counties to compare. Double tap on mobile devices.<br><small>(This feature is not compatible with FireFox browsers.)</small></li> </ul> </div> </div> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="col-md-12 col-lg-10 col-lg-offset-1"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse" title="Main navigation button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="padding: 5px 10px 5px 0px;" href="https://www.airnow.gov" title="Open airnow.gov in new tab" target="_blank"> <img src="images/airNow-sm2.png" width="80" height="40" style="vertical-align: top"> </a>  <div id="singleShare" class="mobile-social-share btn-group"> <button type="button" class="btn btn-mobile-share navbar-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Share this link!"> <i class="fa fa-share-alt" aria-hidden="true"></i> </button> <ul class="dropdown-menu"> <li> <a data-toggle="tooltip" data-original-title="Share on Twitter" data-placement="right" class="btn btn-twitter" href="https://twitter.com/home?status=Find%20out%20where%20and%20when%20air%20quality%20is%20better%20for%20you.%20Visit%20the%20AirCompare%20website%20at%0Ahttps%3A//www3.epa.gov/aircompare" target="_blank"> <i class="fa fa-twitter fa-lg" aria-hidden="true"></i> </a> </li> <li> <a data-toggle="tooltip" data-original-title="Share on Facebook" data-placement="right" class="btn btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//www3.epa.gov/aircompare" target="_blank"> <i class="fa fa-facebook fa-lg" aria-hidden="true"></i> </a> </li> <li> <a data-toggle="tooltip" data-original-title="Share on Reddit" data-placement="right" class="btn btn-reddit" href="http://reddit.com/submit?url=Find%20out%20where%20and%20when%20air%20quality%20is%20better%20for%20you.%20Visit%20the%20AirCompare%20website%20at%0Ahttps%3A%2F%2Fwww3.epa.gov%2Faircompare&title=AirCompare" target="_blank"> <i class="fa fa-reddit-alien fa-lg" aria-hidden="true"></i> </a> </li> <li> <a data-toggle="tooltip" data-original-title="Share on LinkedIn" data-placement="right" class="btn btn-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//www3.epa.gov/aircompare&title=AirCompare&summary=Find%20out%20where%20and%20when%20air%20quality%20is%20better%20for%20you.&source=U.S.%20EPA" target="_blank"> <i class="fa fa-linkedin fa-lg" aria-hidden="true"></i> </a> </li> <li> <a data-toggle="tooltip" data-original-title="Share on Email" data-placement="right" class="btn btn-mail" href="mailto:?&subject=AirCompare website&body=Find%20out%20where%20and%20when%20air%20quality%20is%20better%20for%20you.%20Visit%20the%20AirCompare%20website%20at%0Ahttps%3A//www3.epa.gov/aircompare"> <i class="fa fa-envelope fa-lg" aria-hidden="true"></i> </a> </li> </ul> </div> </div> <div class="collapse navbar-collapse navbar-main-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a class="page-scroll" href="#home" title="Go to top of page">AirCompare Home</a></li> <li><a class="page-scroll" href="#basic" title="Go to Basic Info section">Basic Info</a></li> <li><a class="page-scroll" href="#groups" title="Go to Sensitive Groups section">Sensitive Groups</a></li> <li><a class="page-scroll" href="#trends" title="Go to Compare Counties section">Compare Counties</a></li> </ul> </div> </div> </div> </nav>  <section id="home" style="margin-bottom: 50px;"> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/San Francisco_001_resized_16by9.jpg" alt="San Francisco"> <div class="carousel-caption"> <h4>Moving to a different city?<br><a href="#basic" style="color:#fff;">Scroll down to see where air quality is better <em>for you</em></a>.</h4> </div> </div> <div class="item"> <img src="images/PeopleInNature_177_resized_16by9.jpg" alt="Beach Scene"> <div class="carousel-caption"> <h4>Planning a vacation?<br><a href="#basic" style="color:#fff;">Scroll down to see where and when air quality is better <em>for you</em></a>.</h4> </div> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> <section id="basic" class="container" style="margin-bottom: 50px;"> <h3>AirCompare Basic Info</h3> <div class="row paddingfromtop"> <div class="col-md-6 col-lg-6 jumbotron"> <p>Moving to a different city, or planning a vacation?</p> <p>Use AirCompare to find out where and when air quality is better <em>for you</em>.</p> <p>AirCompare maps provide information for counties that monitored outdoor air quality in the last five years and <em>tailor</em> that information for <a href="#groups">groups more likely to be affected</a> by different levels of pollution.</p> <p><a href="#trends">Go to maps</a></p> </div>  <div class="col-md-5 col-lg-5 col col-md-offset-1 col-lg-offset-1"> <h4>Additional Information</h4> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Data Source</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body">The data summarized in this website come from the EPA's <a href="https://www.epa.gov/aqs" target="_blank">Air Quality System</a> (AQS) Data Mart. The AQS Data Mart contains outdoor air pollution data collected by EPA, state, local, and tribal air pollution control agencies from thousands of monitors. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Data Limitations</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">AirCompare provides information based on the five outdoor air pollutants that are part of the <a href="#aqi-table">Air Quality Index</a> - carbon monoxide, nitrogen dioxide, ozone, particulate matter, and sulfur dioxide. AirCompare does not account for pollen, mold, air toxics or indoor air quality conditions. Contact <a href="http://www.4cleanair.org/agencies">state or local air quality agencies</a> for additional information.<br><br> Not all pollutants are monitored in every county. And the number of days each pollutant is measured may vary from one county to another. Ozone is typically monitored daily during the "ozone season" - when ozone is expected to be relatively higher. This season varies by state, but generally includes the summertime when meteorological conditions are more conducive to ground-level ozone formation. Particle pollution monitoring varies from area to area, but most areas sample everyday or every three days. Carbon monoxide is monitored year-round at most monitoring sites.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Related Links</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li><a href="https://www.epa.gov/air-trends" target="_blank">AirTrends</a> - National and regional trends</li> <li><a href="https://www.airnow.gov/" target="_blank">AirNow</a> - Forecasts and real-time data</li> <li><a href="https://www.epa.gov/outdoor-air-quality-data" target="_blank">AirData</a> - Download and visualization tools</li> <li><a href="https://www.epa.gov/air-emissions-inventories" target="_blank">AirEmissions</a> - Emissions estimates</li> </ul> </div> </div> </div> </div> </div>  </div>  </section>  <section id="groups" class="container" style="margin-bottom: 50px;"> <h3>Sensitive Groups and the Air Quality Index</h3> <div class="row paddingfromtop"> <div class="col-md-6 col-lg-6"> <div id="aqi-table"> <table class="table"> <thead> <tr> <th>Index Value</th> <th>Level of Health Concern</th> <th>What it Means</th> </tr> </thead> <tbody> <tr style="background-color:#7e0023; color:#fff;"> <td>301 - 500</td> <td>Hazardous</td> <td>Health warnings of emergency conditions. The entire population is more likely to be affected.</td> </tr> <tr style="background-color:#8f3f97; color:#fff;"> <td>201 - 300</td> <td>Very Unhealthy</td> <td>Health alert: everyone may experience more serious health effects.</td> </tr> <tr style="background-color:#ff0000;"> <td>151 - 200</td> <td>Unhealthy</td> <td>Everyone may begin to experience health effects; members of sensitive groups may experience more serious health effects.</td> </tr> <tr style="background-color:#ff7e00;"> <td>101 - 150</td> <td>Unhealthy for Sensitive Groups</td> <td>Members of sensitive groups may experience health effects. The general public is not likely to be affected.</td> </tr> <tr style="background-color:#ffff00;"> <td>51 - 100</td> <td>Moderate</td> <td>Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.</td> </tr> <tr style="background-color:#00e400;"> <td>0 - 50</td> <td>Good</td> <td>Air quality is considered satisfactory, and air pollution poses little or no risk.</td> </tr> </tbody> </table> </div> <p>AirCompare provides comparisons of air quality based on factors that have been shown to increase risk from air pollution. These factors can include life stages (children and older adults), specific health conditions (heart or lung disease), and increased likelihood of exposure from being active outdoors. The Air Quality Index (AQI) is the official index for air quality across the United States. The AQI ranges from 0 to 500. The higher the AQI value, the greater the level of air pollution and the greater the health concern.</p> <p>When AQI values are between 101 and 150, or code orange, members of sensitive groups may experience health effects. This is because they are more likely to be affected at lower air quality levels than everyone else. For example, children and older adults, people with lung disease, and people who are active outdoors (outdoor workers) are at greater risk from exposure to ozone. Older adults and children, and people with heart or lung disease are at greater risk from exposure to particle pollution. Everyone is more likely to be affected when the AQI values are above 150, or code red and higher.</p> <p><a href="https://www.airnow.gov/index.cfm?action=aqibasics.aqi" target="_blank">Learn more about the AQI and how air quality affects health</a> </p> </div>  <div class="col-md-5 col-lg-5 col col-md-offset-1 col-lg-offset-1"> <h4>Which pollutants and levels affect each group?</h4> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-asthma">Asthma or other lung disease</a> </h4> </div> <div id="collapse-asthma" class="panel-collapse collapse"> <div class="panel-body">Any pollutant: code red or higher<br> also<br> Ozone: code orange or higher<br> Particle pollution: code orange or higher<br> Sulfur dioxide: code orange or higher</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-heart">Heart disease</a> </h4> </div> <div id="collapse-heart" class="panel-collapse collapse"> <div class="panel-body">Any pollutant: code red or higher<br> also<br> Particle pollution: code orange or higher<br> Carbon monoxide: code orange or higher</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-older">Older adults and children</a> </h4> </div> <div id="collapse-older" class="panel-collapse collapse"> <div class="panel-body">Any pollutant: code red or higher<br> also<br> Ozone: code orange or higher<br> Particle pollution: code orange or higher</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-active">Active outdoors</a> </h4> </div> <div id="collapse-active" class="panel-collapse collapse"> <div class="panel-body">Any pollutant: code red or higher<br> also<br> Ozone: code orange or higher<br> Sulfur dioxide: code orange or higher</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse-others">Everyone Else</a> </h4> </div> <div id="collapse-others" class="panel-collapse collapse"> <div class="panel-body">Any pollutant: code red or higher</div> </div> </div> </div> </div>  </section>  <section id="trends" class="container" style="margin-bottom: 50px;"> <h3>Compare Counties </h3> <span style="font-size:15px;cursor:pointer" onclick="openNav()">☰ How to use this map</span> <small>  <a tabindex="0" style="float: right;" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="About the charts" data-content="The <strong>trend</strong> charts display the number of unhealthy days for the specified <a href=#groups>sensitive group</a>. The bar for each year shows the total number of unhealthy days and the proportion of days in code orange, code red, or code purple categories of the <a href=#groups>Air Quality Index</a>.<br><br>The <strong>season</strong> charts show the average number of unhealthy days by month, using all data available over the last five years. The bar for each month shows the average number of unhealthy days and the proportion in code orange, code red, or code purple categories of the <a href=#groups>Air Quality Index</a>.">About the charts</a> <div style="float: right;">  |  </div> <a tabindex="0" style="float: right;" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="About the maps" data-content="Darker shaded counties monitored outdoor air quality in the past five years.">About the maps</a> </small> <ul class="nav nav-tabs"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Trends <span class="caret"></span></a> <ul class="dropdown-menu"> <li id="lung"><a>Asthma/Lung Disease</a></li> <li id="heart"><a>Heart Disease</a></li> <li id="oldyoung"><a>Older Adults/Children</a></li> <li id="active"><a>Active Outdoors</a></li> <li id="none"><a>Everyone Else</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Seasons <span class="caret"></span></a> <ul class="dropdown-menu"> <li id="lungM"><a>Asthma/Lung Disease</a></li> <li id="heartM"><a>Heart Disease</a></li> <li id="oldyoungM"><a>Older Adults/Children</a></li> <li id="activeM"><a>Active Outdoors</a></li> <li id="noneM"><a>Everyone Else</a></li> </ul> </li> </ul> <div id="compare"></div> <button id="clear" type="button" class="btn">Clear All Charts</button> <div id="resultsWrapper" class="embed-responsive embed-responsive-4by3" style="border: solid 1px #f0f0f0;"> <object id="results" class="embed-responsive-item" type="image/svg"></object> </div> </section>  <footer class="text-center"> <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="Scroll to Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <h3>Visit <a href="https://www.airnow.gov" data-toggle="tooltip" title="Open airnow.gov in new tab" target="_blank">AirNow.gov</a> for current air quality</h3> </footer>   <script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script> <script src="https://bumbu.me/svg-pan-zoom/demo/hammer.js"></script> <script type="text/javascript"> //for opening overlay screen containing map instructions function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } //tooltip $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); $(function(){ $('[data-toggle="popover"]').popover({html: true}); }); //Create the mintz namespace so that we can access stuff from outside this function for possible debugging var mintz = {}; // Get the default map to load $("#clear").hide(); $(function() { var eventsHandler; eventsHandler = { haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'] , init: function(options) { var instance = options.instance , initialScale = 1 , pannedX = 0 , pannedY = 0 // Init Hammer // Listen only for pointer and touch events this.hammer = Hammer(options.svgElement, { inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput }) // Enable pinch this.hammer.get('pinch').set({enable: true}) // Handle double tap this.hammer.on('doubletap', function(ev){ instance.zoomIn() }) // Handle pan this.hammer.on('panstart panmove', function(ev){ // On pan start reset panned variables if (ev.type === 'panstart') { pannedX = 0 pannedY = 0 } // Pan only the difference instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY}) pannedX = ev.deltaX pannedY = ev.deltaY }) // Handle pinch this.hammer.on('pinchstart pinchmove', function(ev){ // On pinch start remember initial zoom if (ev.type === 'pinchstart') { initialScale = instance.getZoom() instance.zoom(initialScale * ev.scale) } instance.zoom(initialScale * ev.scale) }) // Prevent moving the page on some devices when panning over SVG options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); }); } , destroy: function(){ this.hammer.destroy() } } $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); mintz.svgWidth = 1200; mintz.svgHeight = 1000; $('#results').load('https://www3.epa.gov/aircompare/acmaplungB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); mintz.resize = function() { // var scale = .95*$(window).width()/mintz.svgWidth; var scale = 1*$("#trends").width()/mintz.svgWidth; //if height of map is greater than window then shrink by height instead of width if (scale*mintz.svgHeight>$(window).height()) { scale = .9*$(window).height()/mintz.svgHeight; } //Not sure why but I have to manually set the height of the div wrapping the object with SVG //Not sure why object is even used. mintz.$container.css("height",scale*mintz.svgHeight) mintz.$svgElement.attr("height",scale*mintz.svgHeight); mintz.$svgElement.attr("width",scale*mintz.svgWidth); mintz.$group.attr("transform","scale(" + scale +")"); //return; if (mintz.pz) mintz.pz.destroy(); mintz.pz = svgPanZoom(mintz.$svgElement[0],{zoomEnabled: true, controlIconsEnabled: true, mouseWheelZoomEnabled: false, maxZoom: 5, fit: 1, center: 1, customEventsHandler: eventsHandler }); }; mintz.debounce = function(fn, timeout) { var timeoutID = -1; return function() { if (timeoutID > -1) { window.clearTimeout(timeoutID); } timeoutID = window.setTimeout(fn, timeout); } }; $('#lung').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/acmaplungB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#heart').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/acmapheartB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#oldyoung').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/acmapoldyoungB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#active').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/acmapactiveB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#none').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/bluespinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/acmapnoneB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_Page1"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#lungM').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/greenspinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/ammaplungB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_page2"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#heartM').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/greenspinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/ammapheartB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_page2"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#oldyoungM').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/greenspinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/ammapoldyoungB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_page2"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#activeM').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/greenspinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/ammapactiveB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_page2"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $('#noneM').bind("click", function(){ $('#results').html('<div class="text-center"><img src="images/greenspinner.gif"><br>Map is loading...</div>'); $('#results').load('https://www3.epa.gov/aircompare/ammapnoneB.svg',null,function () { mintz.$svgElement = $('#results').find('svg'); mintz.$group = mintz.$svgElement.find("g#SVGMain_page2"); mintz.$container = $("#resultsWrapper"); mintz.$svgElement.attr("viewBox", null); mintz.$svgElement.attr("height",mintz.svgHeight); mintz.$svgElement.attr("width",mintz.svgWidth); mintz.resize(); //Now set the resize function to be fired when window resized //Note: use debouncing so it waits for resizing to stop $(window).on("resize",mintz.debounce(mintz.resize,200)) ; }); }); $("#clear").click(function(){ $("#compare").empty(); $("#clear").hide(); }); //clear button }); //end Get the defaultmap to load function handleCountyClick (e,href) { var iframe = $('<iframe />', { name: 'one', id: 'one', frameborder: 0, width: 300, height: 225, scrolling: 'no' }); //if href not passed then get it from xlink:href attribute if(! href) href = $(e.currentTarget).attr("xlink:href"); iframe.attr('src',href); iframe.appendTo('#compare'); $("#clear").show(); e.preventDefault(); e.stopPropagation(); return false; }; function handleCountyClickM (e,href) { var iframe = $('<iframe />', { name: 'one', id: 'one', frameborder: 0, width: 300, height: 225, scrolling: 'no' }); //if href not passed then get it from xlink:href attribute if(! href) href = $(e.currentTarget).attr("xlink:href"); iframe.attr('src',href); iframe.appendTo('#compare'); $("#clear").show(); e.preventDefault(); e.stopPropagation(); return false; }; // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); </script> </body> </html>

CINXE.COM

AirCompare