AirNow Interactive Map

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>AirNow Interactive Map</title> <link rel="stylesheet" href="esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="esri/themes/calcite/esri/esri.css"> <link rel="stylesheet" href="app/css/all.min.css"> <link rel="stylesheet" href="app/css/balloon.min.css"> <link rel="stylesheet" href="app/css/style.css"> </head> <body id="main-body" class="calcite"> <div class="region-alert"> <div id="block-pane-epa-gtm" class="block block-pane block-pane-epa-gtm">  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-L8ZB" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <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= "//www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f); })(window,document,"script","dataLayer","GTM-L8ZB");</script>  </div> </div> <div id="header" class="mainViewAboveMap">  <div id="headerDesktop" class="compact" style="outline: none;"> <div class="leftArea" style="color: rgb(217, 217, 217); display: block;"> <div class="logoContainer"> <table class="logoContainerInner"> <tbody> <tr> <td class="logoWrapper"> <a class="logoLink" target="_blank" tabindex="-1" href="https://www.airnow.gov/" style="cursor: pointer;"> <img alt="Air Now Logo" class="logoImg" src="images/AirNow_Logo_White.svg"> </a> </td> </tr> </tbody> </table> </div> </div> <span id="mobileinfo" class="fa fa-info-circle" style="display:none;"></span> <span id="mobilesearch" class="fa fa-search" style="display:none;"></span> <div class="textArea" style="color: rgb(255, 255, 255); width: 1047px;"> <h1 class="title" tabindex="0">Interactive Map of Air Quality</h1> <h2 class="subtitle" tabindex="0" style="color: rgb(255, 255, 255); opacity: 0.8;"></h2> </div> </div> </div> <section class="header"> <div id="searchBackground" style="display:none;"></div> <div class="btns"> <div class="btn-switch active-map" data-id="0">Current</div> <div class="btn-switch" data-id="1">Forecast</div> <div class="btn-switch" data-id="2">Loops</div> <div class="btn-switch" data-id="3">Archive</div> </div> </section> <div id="u265" class="ax_default box_1" style="cursor: pointer;"> <div id="u265_div" class="" tabindex="0"></div> <div id="u265_text" class="text " style="top: 6px; transform-origin: 18px 5px 0px;"> <p id="cache0"> <span id="cache1">Info</span> </p> </div> </div> <div id="search"></div> <div id="viewDiv"> <img id="loadingImg" src="images/loading.gif" /> <div id="LocateButton"></div> <div id="HomeButton"></div> <div id="mobileButtons" style="position:absolute; left:20px; top:10px; z-Index:999;"> <button id="mobilelegend" type="button" class="mobilebutton" data-dojo-props="title:'titlePane'" data-dojo-type="dijit/form/Button"></button> <button id="mobilelayers" type="button" class="mobilebutton" data-dojo-props="title:'mobilelistpane'" data-dojo-type="dijit/form/Button"></button> <button id="mobilebasemaps" type="button" class="mobilebutton" data-dojo-props="title:'titlePaneBaseMap'" data-dojo-type="dijit/form/Button"></button> </div> <div id="mobilePanels" style="position:absolute; left:80px; top:10px; z-Index:999;"> <div id="mobilelistpane" class="toc" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Layers', open:true, closable:false, region:'left'" style="display:none;"> <div id="mobilemonitors"> <span class="mobilesection">Monitors</span> </div> <div id="mobilecontours"> <span class="mobilesection">Contours</span> </div> <div id="mobileboundaries"> <span class="mobilesection">Boundaries</span> </div> </div> </div> <div id="leftPanels" style="position:absolute; left:20px; top:10px; z-Index:999;"> <div id="layerListPane" class="toc twoline" style="display:none;" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Monitors<br /><span class=\'subtitle\'>NowCast AQI</span>', open:false, closable:false, region:'left'"> <div id="tempcontainer"><input id="tempcheck" name="tempcheck" /> <label id="templabel" for="tempcheck">Show temp monitors</label></div> <div class="esriLayerList" role="presentation" id="layerList2" widgetid="layerList2"> <div data-dojo-attach-point="_container" class="esriContainer"> <ul class="esriList" data-dojo-attach-point="_layersNode"> <li id="ozonepmlayercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="curozonepmcheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="curozonepmcheckbox">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span</label> <div class="esriClear"></div> </div> </div> </li> <li id="ozonelayercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="curozonecheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="curozonecheckbox">Ozone</label> <div class="esriClear"></div> </div> </div> </li> <li id="pmlayercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="curpmcheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="curpmcheckbox">PM <span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> </li> <li id="pm25layercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="curpm25checkbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="curpm25checkbox">PM2.5</label> <div class="esriClear"></div> </div> </div> </li> <li id="pm10layercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="curpm10checkbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="curpm10checkbox">PM10</label> <div class="esriClear"></div> </div> </div> </li> <li id="ozonepmlayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="ozonepmcheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="ozonepmcheckbox">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> </li> <li id="ozonelayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="ozonecheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="ozonecheckbox">Ozone</label> <div class="esriClear"></div> </div> </div> </li> <li id="pmlayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="pmcheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="pmcheckbox">PM <span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> </li> <li id="pm25layer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="pm25checkbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="pm25checkbox">PM2.5</label> <div class="esriClear"></div> </div> </div> </li> <li id="pm10layer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="pm10checkbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="pm10checkbox">PM10</label> <div class="esriClear"></div> </div> </div> </li> <li id="forecasttodaylayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="forecasttodaycheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="forecasttodaycheckbox">Forecast – Today</label> <div class="esriClear"></div> </div> </div> </li> <li id="forecasttomorrowlayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="forecasttomorrowcheckbox" data-layer-index="2" class="aircheck esriCheckbox"> <label class="esriLabel" for="forecasttomorrowcheckbox">Forecast – Tomorrow</label> <div class="esriClear"></div> </div> </div> </li> <li id="archiveptlayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archiveptcheckboxozonepm" data-layer-index="2" class="aircheck archiveptcheck esriCheckbox" > <label class="esriLabel" for="archiveptcheckboxozonepm">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archiveptlayerOzone" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archiveptcheckboxozone" data-layer-index="2" class="aircheck archiveptcheck esriCheckbox" > <label class="esriLabel" for="archiveptcheckboxozone">Ozone</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archiveptlayerPM" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archiveptcheckboxpm" data-layer-index="2" class="aircheck archiveptcheck esriCheckbox" > <label class="esriLabel" for="archiveptcheckboxpm">PM <span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archiveptlayerPM25" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archiveptcheckboxpm25" data-layer-index="2" class="aircheck archiveptcheck esriCheckbox" > <label class="esriLabel" for="archiveptcheckboxpm25">PM2.5</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archiveptlayerPM10" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archiveptcheckboxpm10" data-layer-index="2" class="aircheck archiveptcheck esriCheckbox" > <label class="esriLabel" for="archiveptcheckboxpm10">PM10</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> </ul> <div class="esriNoLayersText" data-dojo-attach-point="_noLayersNode"></div> </div> </div> </div> <div id="layerListPane2" class="toc toc-child twoline" style="display:none;" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Contours<br /><span class=\'subtitle\'>NowCast AQI</span>', open:false, closable:false, region:'left'"> <div id="greencontainer"><input id="mycheck" name="mycheck" /> <label id="greenlabel" for="mycheck">Show green contours</label></div> <div id="greencontainerfore" style="display:none;"><input id="mycheckfore" name="mycheckfore" /> <label id="greenlabelfore" for="mycheckfore">Show green contours</label></div> <div class="esriLayerList" role="presentation" id="layerListContour" widgetid="layerListContour"> <div data-dojo-attach-point="_container" class="esriContainer"> <ul class="esriList" data-dojo-attach-point="_layersNode"> <li id="animlayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxozonepm" data-layer-index="2" class="ozonepmanimbox esriCheckbox" > <label class="esriLabel" for="animationcheckboxozonepm">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> </li> <li id="animlayerOzone" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxozone" data-layer-index="2" class="ozoneanimbox esriCheckbox" > <label class="esriLabel" for="animationcheckboxozone">Ozone</label> <div class="esriClear"></div> </div> </div> </li> <li id="animlayerPM25" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxpm25" data-layer-index="2" class="pm25animbox esriCheckbox" > <label class="esriLabel" for="animationcheckboxpm25">PM2.5</label> <div class="esriClear"></div> </div> </div> </li> <li id="animlayercur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxozonepmcur" data-layer-index="2" class="curozonepmanimbox esriCheckbox" checked> <label class="esriLabel" for="animationcheckboxozonepmcur">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> </li> <li id="animlayerOzonecur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxozonecur" data-layer-index="2" class="curozoneanimbox esriCheckbox" > <label class="esriLabel" for="animationcheckboxozonecur">Ozone</label> <div class="esriClear"></div> </div> </div> </li> <li id="animlayerPM25cur" class="esriLayer esriListVisible"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="animationcheckboxpm25cur" data-layer-index="2" class="curpm25animbox esriCheckbox" > <label class="esriLabel" for="animationcheckboxpm25cur">PM2.5</label> <div class="esriClear"></div> </div> </div> </li> <li id="forecasttodaylayerctr" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="forecasttodaycheckboxctr" data-layer-index="2" class="esriCheckbox"> <label class="esriLabel" for="forecasttodaycheckboxctr">Forecast – Today</label> <div class="esriClear"></div> </div> </div> </li> <li id="forecasttomorrowlayerctr" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="forecasttomorrowcheckboxctr" data-layer-index="2" class="esriCheckbox"> <label class="esriLabel" for="forecasttomorrowcheckboxctr">Forecast – Tomorrow</label> <div class="esriClear"></div> </div> </div> </li> <li id="archivelayer" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archivecheckboxozonepm" data-layer-index="2" class="archivecheck esriCheckbox" > <label class="esriLabel" for="archivecheckboxozonepm">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archivelayerOzone" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archivecheckboxozone" data-layer-index="2" class="archivecheck esriCheckbox" > <label class="esriLabel" for="archivecheckboxozone">Ozone</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archivelayerPM" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archivecheckboxpm" data-layer-index="2" class="archivecheck esriCheckbox" > <label class="esriLabel" for="archivecheckboxpm">PM <span class="parentheses">(PM2.5 and PM10)</span></label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archivelayerPM25" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archivecheckboxpm25" data-layer-index="2" class="archivecheck esriCheckbox" > <label class="esriLabel" for="archivecheckboxpm25">PM2.5</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> <li id="archivelayerPM10" class="esriLayer esriListVisible" style="display:none;"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="archivecheckboxpm10" data-layer-index="2" class="archivecheck esriCheckbox" > <label class="esriLabel" for="archivecheckboxpm10">PM10</label> <div class="esriClear"></div> </div> </div> <span class="archiveavail" style="display:none">The above layer is not available for the specified date.</span> </li> </ul> <div class="esriNoLayersText" data-dojo-attach-point="_noLayersNode"></div> </div> </div> <div id="contourTimeWarn" style="display:none;">Contours not yet available for this time.</div> </div> <div id="layerListPane3" class="toc toc-child" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Boundaries', open:false, closable:false, region:'left'"> <div class="esriLayerList" role="presentation" id="layerListTribal" widgetid="layerListTribal" style="display: none;"> <div data-dojo-attach-point="_container" class="esriContainer"> <ul class="esriList" data-dojo-attach-point="_layersNode"> <li id="triballayer" class="esriLayer"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="tribalcheckbox" data-layer-index="2" class="esriCheckbox"> <label class="esriLabel" for="tribalcheckbox">EPA Tribal Areas</label> <div class="esriClear"></div> </div> </div> </li> <li id="NPSlayer" class="esriLayer"> <div class="esriTitle"> <div class="esriTitleContainer"> <input type="checkbox" id="npscheckbox" data-layer-index="2" class="esriCheckbox"> <label class="esriLabel" for="npscheckbox">National Park Service Boundaries</label> <div class="esriClear"></div> </div> </div> </li> </ul> <div class="esriNoLayersText" data-dojo-attach-point="_noLayersNode"></div> </div> </div> <div id="layerList"></div> </div> </div> <div id="rightpanels"> <div id="titlePaneBaseMap" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Basemaps', closable:false, open:0" > <div id="basemapGallery"></div> </div> <div id="titlePane" style="display:none;" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Legend', closable:false, open:0"> <div id="legend" widgetid="legend" style="position: relative; display: none;"> <div id="legend_AirNow_Sites_Hourly_7607_4140_1364" class="esriLegendService" style="display: block;"> <table width="95%"> <tbody> <tr> <td align="left"> <span class="esriLegendServiceLabel"></span> </td> </tr> </tbody> </table> <div id="legend_AirNow_Sites_Hourly_7607_4140_1364_0" class="" style="display: block;"> <table width="95%" class="esriLegendLayerLabel"> <tbody> <tr> <td align="left"></td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer"> <tbody> <tr> <td> <table width="95%"> <tbody> <tr> <td align="left">U.S. Air Quality Index</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer"> <tbody> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(0, 228, 0)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Good (0-50)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(255, 255, 0)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Moderate (51-100)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(255, 126, 0)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Unhealthy for Sensitive Groups (101-150)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(255, 0, 0)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Unhealthy (151-200)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(143, 63, 151)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Very Unhealthy (201-300)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(126, 0, 35)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">Hazardous (301+)</td> </tr> </tbody> </table> </td> </tr> <tr> <td width="35" align="center"> <div style="width:30px;height:30px;"> <svg overflow="hidden" width="30" height="30"> <defs></defs> <circle fill="rgb(217, 217, 217)" fill-opacity="1" stroke="rgb(26, 26, 26)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="0" cy="0" r="5" stroke-dasharray="none" dojoGfxStrokeStyle="solid" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></circle> </svg> </div> </td> <td> <table width="95%"> <tbody> <tr> <td align="left">No Data</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> <div id="legend_AirNow_Sites_Hourly_7607_4140" class="esriLegendService" style="display: none;"> <table width="95%"> <tbody> <tr> <td align="left"> <span class="esriLegendServiceLabel">Ozone and PM<br /><span class="parentheses">(PM2.5 and PM10)</span></span> </td> </tr> </tbody> </table> <div id="legend_AirNow_Sites_Hourly_7607_4140_0" class="" style="display: none;"> <table width="95%" class="esriLegendLayerLabel"> <tbody> <tr> <td align="left"></td> </tr> </tbody> </table> </div> </div> <div id="legend_msg" class="esriLegendMsg" style="display: none;">No legend</div> </div> <div id="gt500note"> <p><span><a href="https://www.airnow.gov/aqi/aqi-basics/">AQI Basics | AirNow.gov</a></span></p> <p>NOTE: Temporary monitors are shown with a diamond<span id="diamond">⬦</span>symbol.</p> </div> </div> </div> <div id="warning" style="display:none;"> Data updated <span id="warndate"></span> </div> <div id="forecastwarning" style="display:none;"> <span id="citywarndate"></span> <span id="ctrwarndate"></span> </div> <div id="techdiff" style="display:none;"> <div id="techdiffinner"> <p style="font-size:14px;">Alert</p> <p style="font-size:12px;">AirNow is experiencing high traffic due to California wildfires. Maps may be slow to load.</p> </div> <div id="techdiffclose" class="ax_default icon" style="cursor: pointer;"> <img id="techdiffclose_img" class="img " src="images/close.png" tabindex="0"> </div> </div> <div id="timeWindow" class="timeWindow" style="position:absolute; right:20px; bottom:10px; z-Index:999; display:none;"> <div id="timeSliderWin" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Time Slider', closable:false, region:'right'"> <div id="title"> NowCast AQI, Last 24 Hours </div> <div id="details"> </div> <div id="timeSliderDiv" style="width:100%;height:100%;"> </div> </div> </div> <div id="datepick" style="background: white; position:absolute; right:20px; bottom:40px; z-Index:999; display:none;"> <label for="date1">Archive Date:</label> <input type="text" name="date1" id="date1" data-dojo-type="dijit.form.DateTextBox" required="true" /> </div> </div> <div id="info" style="display:none;"> <div id="inner"> <div class="infobtns"> <div class="infobtn-switch active" data-id="0">Overview</div> <div class="infobtn-switch" data-id="1">Current</div> <div class="infobtn-switch" data-id="2">Forecast</div> <div class="infobtn-switch" data-id="3">Loops</div> <div class="infobtn-switch" data-id="4">Archive</div> </div> <div id="infotab1" class="infotab active" data-id="0">  <div class="u201 ax_default paragraph"> <div id="u201_text" class="text "> <p> <span>AirNow Interactive Map</span> </p> </div> </div> <div class="u200 ax_default paragraph"> <div id="u200_text" class="text "> <p> <span>The map includes data for air quality monitors in the U.S., Canada, and Mexico. Find <a href="https://airnow.gov/index.cfm?action=airnow.global_summary" target="_blank"> U.S. Embassies and Consulates data here</a>. </span> </p> <p> <span> All readings are preliminary, unvalidated, and subject to change. </span> </p> <p> <span> See more information about the <a href="https://www.airnow.gov/index.cfm?action=aqibasics.aqi" target="_blank">AQI</a>. </span> </p> <p> <span> See more information about the <a href="https://usepa.servicenowservices.com/airnow?id=kb_article_view&sys_id=fed0037b1b62545040a1a7dbe54bcbd4" target="_blank">NowCast AQI</a>. </span> </p> <p> <span><b>To use this map:</b></span> </p> <ul> <li> Select a tab for <b>Current</b>, <b>Forecast</b>, <b>Loops</b>, or <b>Archive</b>. </li> <li> Select layers from the drop-down panels. On mobile, use the 3-line menu in the upper corner. </li> <li> Select geographic outlines from the BOUNDARIES drop-down box. <i>Some boundaries appear only when the map is zoomed</i>. Click within a boundary on a map to get additional information. </li> <li> Click LEGEND to display the AQI legend. "No data" means nothing was reported for the most recent hour. </li> <li> Click BASEMAP to choose a different background map. </li> <li> Refresh your screen periodically to see the most recent data. </li> <li> The map opens in a new tab. To go back, click on the AirNow tab or the AirNow logo. </li> </ul> </div> </div> </div> <div id="infotab2" class="infotab" data-id="1"> <div class="u201 ax_default paragraph"> <div id="u201_text" class="text "> <p> <span>Current Air Quality</span> </p> </div> </div> <div class="u200 ax_default paragraph"> <div id="u200_text" class="text "> <p> <span>“Ozone and PM” refers to data for Ozone plus PM2.5 plus PM10. Each hour, the highest <a href="https://www.airnow.gov/aqi/aqi-basics/using-air-quality-index#nowcast" target="_blank">NowCast AQI</a> among these 3 pollutants is displayed for each monitor and each contour. </span> </p> <p> <span> Click on a monitor to reveal <b>NowCast AQI</b> and <b>raw concentration</b> data. </span> </p> <ul> <li> Click “Plot Data” to see an <a href="https://www.airnow.gov/aqi/aqi-basics" target="_blank">AQI</a> bar chart and a concentration line graph. Note that the line graph is available for <i>single pollutant layers</i> only (i.e. ‘ozone’ or ‘PM2.5’). </li> <li> Download images and data from the chart’s 3-bar menu in the top right. </li> </ul> <p> <span> The search box will accept address, zip code, state, place name, monitor name or monitor ID. </span> </p> <p> <span> Data usually updates during the second half of the hour, and updated contour data will lag behind monitor data. Refresh your screen periodically to see the most recent data. </span> </p> <p> <span> Contoured areas are approximate. Read about the interpolation method used to create the <a href="https://usepa.servicenowservices.com/airnow?id=kb_article_view&sys_kb_id=63f6e15f2fa050102be2d2172799b654#:~:text=What%20interpolation%20method%20is%20used%3F,-Authored%20by%20System&text=Air%20Quality%20Index%20levels%20in,distance%20weighted%20(IDW)%20method" target="_blank">contour maps</a>. </span> </p> </div> </div> </div> <div id="infotab3" class="infotab" data-id="2"> <div class="u201 ax_default paragraph"> <div id="u201_text" class="text "> <p> <span>Air Quality Forecast</span> </p> </div> </div> <div class="u200 ax_default paragraph"> <div id="u200_text" class="text "> <p> <span>The air quality forecast is a prediction of the day’s overall AQI issued by state and local air quality forecasters. Each dot on this map represents a city or reporting area that issues a forecast. Read more about the <a href="https://www.airnow.gov/aqi/aqi-basics/using-air-quality-index#forecasts" target="_blank">air quality forecast</a>. </span> </p> <p> <span> Click on a dot to see forecast info for separate pollutants if available. </span> </p> <p> <span> Tomorrow’s forecast is available in most areas by 4 p.m. local time. </span> </p> </div> </div> </div> <div id="infotab4" class="infotab" data-id="3"> <div class="u201 ax_default paragraph"> <div id="u201_text" class="text "> <p> <span>Loops</span> </p> </div> </div> <div class="u200 ax_default paragraph"> <div id="u200_text" class="text "> <p> <span> Use the Time Slider to loop through <a href="https://www.airnow.gov/aqi/aqi-basics/using-air-quality-index#nowcast" target="_blank">NowCast AQI</a> data for the last 24 hours. Use the pause button to stop at any hour. Use the arrows to move through hours one at a time. </span> </p> <p> <span> Click on a monitor to reveal <b>NowCast AQI</b> and <b>raw concentration</b> data. </span> </p> <p> <span> “Ozone and PM” refers to data for Ozone plus PM2.5 plus PM10. Each hour, the highest NowCast AQI among these 3 pollutants is displayed for each monitor and each contour. </span> </p> <p> <span> Contoured areas are approximate. Read about the interpolation method used to create the <a href="https://usepa.servicenowservices.com/airnow?id=kb_article_view&sys_kb_id=63f6e15f2fa050102be2d2172799b654#:~:text=What%20interpolation%20method%20is%20used%3F,-Authored%20by%20System&text=Air%20Quality%20Index%20levels%20in,distance%20weighted%20(IDW)%20method" target="_blank">contour maps</a>. </span> </p> </div> </div> </div> <div id="infotab5" class="infotab" data-id="4"> <div class="u201 ax_default paragraph"> <div id="u201_text" class="text "> <p> <span>Archive</span> </p> </div> </div> <div class="u200 ax_default paragraph"> <div id="u200_text" class="text "> <p> <span> Use the <b>Archive Date</b> picker to choose a date. Cycle through years under the calendar. Cycle through months above the calendar. </span> </p> <p> <span> Archives show the <a href="https://www.airnow.gov/aqi/aqi-basics" target="_blank">AQI</a> for that date. For particle pollution, this is the average of 24 hourly values. For ozone, this is the maximum 8-hour ozone average in 24 hours. </span> </p> <p> <span> Some archives go back further than others. You will see a message if the pollutant for the date you chose is not available. </span> </p> <p> <span> Due to a change in methodology, some contours are not cropped along the U.S. coastline. </span> </p> <p> <span> Contoured areas are approximate. Read about the interpolation method used to create the <a href="https://usepa.servicenowservices.com/airnow?id=kb_article_view&sys_kb_id=63f6e15f2fa050102be2d2172799b654#:~:text=What%20interpolation%20method%20is%20used%3F,-Authored%20by%20System&text=Air%20Quality%20Index%20levels%20in,distance%20weighted%20(IDW)%20method" target="_blank">contour maps</a>. </span> </p> <p> <span> The data feed for the archives provides the monitor ID, but monitor name and city name are not available. </span> </p> <p> <span> “Ozone and PM” refers to data for Ozone plus PM2.5 plus PM10. Each hour, the highest NowCast AQI among these 3 pollutants is displayed for each monitor and each contour. </span> </p> </div> </div> </div> <div id="u202" class="ax_default icon" style="cursor: pointer;"> <img id="u202_img" class="img " src="images/close.png" tabindex="0"> </div> <div id="infoclose"> <input id="infoclosebtn" type="button" /> </div> </div> </div> <script id="kmltemplate" type="text/html"> <div class="popupheader"> <div class="mobileheader" dojoattachpoint="_title">${snippet}</div> <div class="hzLine"></div> </div> <div class="popupcontent"> <div id="kmlupdated" style="display:none;"><i></i><br><br></div> <table border="1px" style="border-collapse: collapse"> <tbody> <tr height="20px" valign="center"> <th style="text-align: left;" width="100px"><b> Pollutant</b></th> <th id="aqiheading" style="text-align: center;" width="100px"><b>Daily AQI</b></th> <th class="conccol" style="text-align: center;" width="140px"><b>Daily concentration</b></th> </tr> <tr height="17px" valign="center" id="ozonerow"> <td> Ozone</td> <td id="kmlozone" style="text-align:center;"></td> <td class="conccol" id="kmlozone2" style="text-align:center;"></td> </tr> <tr height="17px" valign="center" id="pm25row"> <td> PM2.5</td> <td id="kmlpm25" style="text-align:center;"></td> <td class="conccol" id="kmlpm252" style="text-align:center;"></td> </tr> <tr height="17px" valign="center" id="pm10row"> <td> PM10</td> <td id="kmlpm10" style="text-align:center;"></td> <td class="conccol" id="kmlpm102" style="text-align:center;"></td> </tr> </tbody> </table> </div> </script> <script> var $buoop = {required:{e:-4,f:-13,o:-13,s:-2,c:-15},reminder:0,reminderClosed:0.0001,no_permanent_hide:true,insecure:false,api:2018.09 }; function $buo_f() { var e = document.createElement("script"); e.src = "https://browser-update.org/update.min.js"; document.body.appendChild(e); }; try {document.addEventListener("DOMContentLoaded", $buo_f,false)} catch(e){window.attachEvent("onload", $buo_f)} </script>   <script src="https://code.highcharts.com/7.2.0/highcharts.js"></script> <script src="https://code.highcharts.com/7.2.0/modules/exporting.js"></script> <script src="https://code.highcharts.com/7.2.0/modules/export-data.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script> <script src="dojo/dojo.js"></script> <script>require(["app/main"]);</script> </body> </html>

CINXE.COM

AirNow Interactive Map