CINXE.COM

Air Quality Forecast Guidance

<!DOCTYPE html> <html class="no-js"> <head> <!-- Google Tag Manager --> <!-- comment out for whenever GA is not going to be used --> <script> if (window.location.href.indexOf("airquality.weather.gov") > -1) { (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-K38HWVB'); } </script> <!-- uncomment for analytics for UFA instead of GA --> <!-- <script type="text/javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOC&amp;subagency=NOAA&amp;pua=G-PNCK6TQ0JM"></script> --> <!-- Meta --> <meta name="viewport" content="width=device-width"> <!-- <cms-content handlerclass="PageHeadSectionWidget" />--> <link rel="schema.DC" href="https://purl.org/dc/elements/1.1/" /> <title>Air Quality Forecast Guidance</title> <meta name="DC.title" content="National Weather Service" /> <meta name="DC.description" content="NOAA National Weather Service National Weather Service" /> <meta name="DC.creator" content="US Department of Commerce, NOAA, National Weather Service" /> <meta name="DC.date.created" scheme="ISO8601" content="" /> <meta name="DC.language" scheme="DCTERMS.RFC1766" content="EN-US" /> <meta name="DC.keywords" content="weather, National Weather Service" /> <meta name="DC.publisher" content="NOAA's National Weather Service" /> <meta name="DC.contributor" content="National Weather Service" /> <meta name="DC.rights" content="https://www.weather.gov/disclaimer.php" /> <meta name="rating" content="General" /><meta name="robots" content="index,follow" /> <link rel="icon" href="data:,"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- slider for bootstrap --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.css"> <!--<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.1/css/bootstrap-slider.min.css">--> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" />--> <!--<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/ol@v10.0.0/ol.css">--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.0.0/ol.min.css" integrity="sha512-oVyisN6T8O7H9DnBc1w/IipxzLhNvJERKa0Rx9fKEtaodE7UXQAypIHamYzQPAqVxp0pVl25e4spVQWIVfu6eA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="packages/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" type="text/css"> <!--<link rel="stylesheet" href="packages/ol-ext.min.css" type="text/css">--> <link rel="stylesheet" href="ol3-sidebarv2/sidebar-v2-master/css/ol3-sidebar.css" type="text/css"> <link rel="stylesheet" href="css/main_bs.css" type="text/css"> <link rel="stylesheet" href="css/bspage.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> !window.jQuery && document.write('<script src="packages/jquery/3.5.1/jquery.min.js"><\/script>') </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> !window.jQuery.ui && document.write('<script src="packages/jqueryui/1.12.1/jquery-ui.min.js"><\/script>') </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="packages/bootstrap-select-1.12.4/js/bootstrap-select.js"></script> <script src="packages/moment.js/2.27.0/moment.min.js"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/npm/ol@v10.0.0/dist/ol.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.0.0/dist/ol.min.js" integrity="sha512-cK+nKjs0bwOTAa4Vj69g4GFjWM171dTKaMB0RQuBWQyto4+9SvqPBNZV0m00+/72+w86DEKGrQ1fqkoldIRgBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!--<script> !window.ol && document.write('<script src="packages/openlayers/4.6.5/ol.js"><\/script>') </script>--> <!--<script src="packages/ol-ext.min.js"></script>--> <link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" /> <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script> <script> /*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/ $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> if (typeof($.fn.modal) === 'undefined') { document.write('<script src="packages/bootstrap/3.3.7/js/bootstrap.min.js"><\/script>') } </script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script type="text/javascript" src="js/ie10-viewport-bug-workaround.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.js"></script> <script src="ol3-sidebarv2/sidebar-v2-master/js/ol5-sidebar.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script> <!-- File Saver library --> <script src="js/FileSaver.min.js"></script> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K38HWVB" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div id="alertBanner"></div> <div class="hide-loader" id="loader"></div> <div class="container-fluid"> <!-- map canvas area --> <div class="container-fluid"> <nav class="navbar navbar-light bg-light" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="https://noaa.gov"><img src="staticimages/noaa-emblem-70x75.png" alt="NOAA" width="65" style="float:left"></a> <a href="https://weather.gov"><img src="staticimages/header-nws-70x75.png" alt="NWS" width="65" style="float:left"></a> <a class="navbar-brand" href="#">&nbsp&nbspAir Quality Forecast Guidance Viewer (*)</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarToCollapse"> <span class="sr-only">Toggle header</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbarToCollapse"> <form class="navbar-form navbar-left"> <div class="form-inline form-group"> <div class="form-group"> <label for="sel1">Init:</label> <select class="form-control" id="modelhour"> </select> </div> </div> </form> <form class="navbar-form navbar-left"> <div class="form-inline form-group"> <div class="form-group"> <div class="input-group inputFix"> <input type="text" class="form-control" name="selected-date" id='datepicker'/> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-toggle="datepicker" data-target-name="selected-date"> <span class="glyphicon glyphicon-calendar"></span> </button> </span> </div> </div> </div> </form> <ul class="nav navbar-nav mr-auto"> <li class="nav-item dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Air Quality Elements <b class="caret"></b></a> <ul class="dropdown-menu" id="elmenu1"> </ul> </li> <li class="nav-item dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Domains <b class="caret"></b></a> <ul class="dropdown-menu" id='domainmenu'> </ul> </li> <li><a href="staticpages/help.php" rel="noopener noreferrer" target="_blank">Help</a></li> <li><a href="https://vlab.noaa.gov/web/osti-modeling/air-quality/faqs" rel="noopener noreferrer" target="_blank">FAQs</a></li> </ul> <div style="float:right"> <!--<a href="https://epa.gov"><img src="staticimages/epalogo.jpg" width="60" alt="EPA"></a>--> <a href="https://epa.gov"><img src="staticimages/epalogo.jpg" width="60" alt="EPA" class="epaseal"></a> </div> </div> </div> </nav> <div class="header"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <div id="eltitle" style="margin-left:25px;font-size:14px;font-weight:bold;padding-bottom:5px"> <span id="spaneltitle" title="tooltip"></span> </div> </div> </div> <!--/row--> </div> <!--container--> </div> <script type="text/javascript"> const urlParams = new URLSearchParams(window.location.search); //var date = ${date}; //var date = 2024120312; var eldate = "2024120312"; var subregion = "CONUS"; var region = "CONUS"; var mapcenter = "-96,40"; var mapzoom = 5; var minjsdate = "2024-11-27"; var maxjsdate = "2024-12-04"; var latestrun = "2024120312"; var todaydate = "20241203"; var yesfile = null; var latestrunfile = null; var elment = "ozone01_bc"; //var latestts = 1733227200; //var mints = 1704585600; //var timest = 1733227200; //if(timest < mints || timest > latestts) { // eldate = latestrun; //} //console.log(mints + " " + timest + " " + latestrun + " " + eldate); //updateURL(); // 2024-08-23 DTM see repo history why this was changed // Define bucket name to S3 alert file. var alertFileBucket = "nws-aqvwr-images"; // default as of 2024-08-23 if (window.location.href.indexOf("ndfd-dev") > -1) { alertFileBucket = "ndfd-dev-"+alertFileBucket; } else if (window.location.href.indexOf("airquality") > -1 && window.location.href.indexOf("mdl") < 0) { alertFileBucket = "ndfd-prod-"+alertFileBucket; } </script> <div class="row content"> <div class="col-md-12 center-content text-left"> <div id="rolloverdiv"> <div id="rollovercenter"> <br style="clear:both;"/> </div> </div> <div class=sliderorig> <div id="slider-vertical"></div> </div> <div id="map_canvas" class="sidebar-map"><!--</div>--> <!--style="width: 75%; float: left"></div>--> </div> <div style="display: none;"> <div id="popup" title=""></div> </div> <div id="rsidebar" class="sidebar collapsed fullHeightWidth"> <!-- Nav tabs --> <div class="sidebar-tabs"> <ul role="tablist"> <li><a href="#options" role="tab"><span class="glyphicon glyphicon-list"></span></a></li> <li><a href="#gis-options" role="tab"><span class="glyphicon glyphicon-road"></span></a></li> <li><a href="#locatelatlon" role="tab"><span class="glyphicon glyphicon-map-marker"></span></a></li> <li><a href="#aqtextbulletins" role="tab"><span class="glyphicon glyphicon-cloud-download"></span></a></li> </ul> </div> <!-- Tab panes --> <div class="sidebar-content"> <div class="sidebar-pane" id="options"> <h1 class="sidebar-header"> Map View Options <span class="sidebar-close"><i class="fa fa-caret-right"></i></span> </h1> <div class="panel-group sidebar-body" id="accordion-right"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#basemap-choice"> <i class="fa fa-list-alt"></i> Basemaps </a> </h4> </div> <div id="basemap-choice" class="panel-collapse collapse in"> <div class="panel-body" id="basemaps"> </div> <div id="baseopacity" style="margin-left: 15px"> <span id="baseoplabel">Opacity: <span id="basespan">50</span></span> <!--<label>Opacity</label>--> <input id="baseopslider" type="text" data-provide="slider" data-slider-tooltip="hide" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50"/> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#overlay-choice"> <i class="fa fa-list-alt"></i> Data Overlays </a> </h4> </div> <div id="overlay-choice" class="panel-collapse collapse in"> <div class="panel-body" id="overlays"> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#interactions-choice"> <i class="fa fa-list-alt"></i> Map Interactions </a> </h4> </div> <div id="interaction-choice" class="panel-collapse collapse in"> <div class="panel-body" id="interactions"> <div class="input-group" id="mousoverpref"> <span class="input-group-addon"><input type="checkbox" name="checkbox-mousepref" checked="checked">Disable Table Mouseover</span> </div> <div class="input-group" id="mapmvzm"> <span class="input-group-addon"><input type="checkbox" name="checkbox-mapmvzm">Enable Map Zoom/Pan</span> </div> </div> </div> </div> </div> </div> <div class="sidebar-pane" id="gis-options"> <h1 class="sidebar-header"> GIS Overlays <span class="sidebar-close"><i class="fa fa-caret-right"></i></span> </h1> <div class="panel panel-default"> <div class="panel-body" id="gis"> </div> </div> </div> <div class="sidebar-pane" id="locatelatlon"> <h1 class="sidebar-header"> Locate by Lat/Lon or Name <span class="sidebar-close"><i class="fa fa-caret-right"></i></span> </h1> <div class="panel panel-default"> <div class="panel-body" id="locate"> <form id="latlonform"> <div class="form-group"> <label for="inputlatitude">Latitude</label> <input type="text" class="form-control" id="inputlatitude" placeholder="Latitude e.g. 35.1 (North Latitude)"> </div> <div class="form-group"> <label for="inputlongitude">Longitude</label> <input type="text" class="form-control" id="inputlongitude" placeholder="Longitude e.g. -90.5 (West Longitude)"> </div> <button id="latlonbtn" type="submit" class="btn btn-default">Submit</button> <br><br> </form> <div class="searchlocation"> <label for="stnlist">Location</label> <select id="stnlist" class="selectpicker" data-width="350px" data-show-tick="true" data-live-search="true"></select> </div> </div> </div> </div> <div class="sidebar-pane" id="aqtextbulletins"> <h1 class="sidebar-header"> State AQFG Tables <span class="sidebar-close"><i class="fa fa-caret-right"></i></span> </h1> <!--AL, AZ, CA, CT, GA, ME, MN, NC, NY, OH, TN, PA, VA--> <div class="panel panel-default"> <div class="panel-body" id="textbulletin"> <form id="textbulletinform"> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="alradio" value="AL" checked> <label class="form-check-label" for="alradio">Alabama</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="azradio" value="AZ"> <label class="form-check-label" for="azradio">Arizona</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="caradio" value="CA"> <label class="form-check-label" for="caradio">California</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="ctradio" value="CT"> <label class="form-check-label" for="ctradio">Connecticut</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="dcradio" value="DC"> <label class="form-check-label" for="dcradio">District of Columbia</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="garadio" value="GA"> <label class="form-check-label" for="garadio">Georgia</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="iaradio" value="IA"> <label class="form-check-label" for="iaradio">Iowa</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="mdradio" value="MD"> <label class="form-check-label" for="mdradio">Maryland</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="meradio" value="ME"> <label class="form-check-label" for="meradio">Maine</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="mnradio" value="MN"> <label class="form-check-label" for="mnradio">Minnesota</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="ncradio" value="NC"> <label class="form-check-label" for="ncradio">North Carolina</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="nyradio" value="NY"> <label class="form-check-label" for="nyradio">New York</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="ohradio" value="OH"> <label class="form-check-label" for="ohradio">Ohio</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="paradio" value="PA"> <label class="form-check-label" for="paradio">Pennsylvania</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="tnradio" value="TN"> <label class="form-check-label" for="tnradio">Tennessee</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="aqtextradios" id="varadio" value="VA"> <label class="form-check-label" for="varadio">Virginia</label> </div> <br> <button id="aqgftextbtn" type="button" class="btn btn-default" onclick="downloadAQFGtxt()">Download</button> <br><br> </form> </div> </div> </div> </div> </div> </div> </div> <footer class="page-row" style="float: left;"> <div class="div-full row"> <div id="digitalservices" class="col-xs-12 col-sm-6 col-md-6"> <h4 class='location-pagetitle'>NWS Office of Science and Technology Integration (OSTI) Air Quality Program</h4> <ul class="list-unstyled"> <li><a href="https://vlab.noaa.gov/web/osti-modeling/air-quality">Air Quality Program</a></li> <li><a href="https://vlab.noaa.gov/web/mdl">Meteorological Development Laboratory (MDL)</a></li> <li><a href="https://vlab.noaa.gov/web/nws-osti">Office of Science and Technology Integration</a></li> <li><a href="https://www.weather.gov">Weather.gov</a></li> </ul> </div> <div id="ndfdquestions" class="col-xs-12 col-sm-6 col-md-6"> <h4 class="contact">QUESTIONS?</h4> <ul class="list-unstyled"> <li><a href="https://vlab.noaa.gov/web/osti-modeling/contact-us" rel="noopener noreferrer" target="_blank">Contact OSTI Air Quality Program</a></li> <!-- 02-01-21 DTM note that the rel= below may not work for MS Edge, IE, and a few other browswers --> <!-- 06-30-2023 DTM Moved to top of page--> <!-- 10-31-2023 DTM AQ requested second FAQ link here. So put it back.--> <li><a href="https://vlab.noaa.gov/web/osti-modeling/air-quality/faqs" rel="noopener noreferrer" target="_blank">FAQs</a></li> <!--<li><a href="staticpages/help.php" rel="noopener noreferrer" target="_blank">Help</a></li>--> </ul> <h4 class="contact">Report system outages and product loss, </h4> <ul class="list-unstyled"> <li>send email to: <a href="mailto:SDM@noaa.gov">Senior Duty Meteorologist (SDM)</a></li> </ul> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="pagedisclaimer">(*) DISCLAIMER: This website displays computer-generated guidance. For authoritative forecasts please visit AirNow.gov. NOTE: Page contents are not supported 24x7.</div> </div> </div> </footer> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <script type="text/javascript" src="js/date.js"></script> <script type="text/javascript" src="js/objextension.js"></script> <script type="text/javascript" src="myjs/Gridlayer_v3_bs.js"></script> <script type="text/javascript" src="myjs/ol4gefsbs-jq.js"></script> <script type="text/javascript" src="myjs/aq_popcontent.js"></script> <script type="text/javascript" src="myjs/ol4aqbs_probe.js"></script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10