Weather Prediction Center

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html lang="en"> <head> <title>Weather Prediction Center</title> <meta name="DC.title" content="Weather Prediction Center"> <meta name="DC.description" content="Weather Prediction Center"> <meta name="DC.subject" content="Weather Prediction Center"> <meta name="DC.creator" content="NOAA's National Weather Service"> <meta name="DC.date.created" scheme="ISO8601" content="2016-10-28"> <meta name="DC.date.reviewed" scheme="ISO8601" content="2016-10-28"> <meta name="DC.language" scheme="DCTERMS.RFC1766" content="EN-US"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta content="NCEP Web Team" name="GENERATOR"> <link href="/nwscwi/main.css" rel="stylesheet" type="text/css" /> <link href="/para/para_css/WPC.css" rel="stylesheet" type="text/css" /> <link href="/para/para_css/pulldown.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="../../para/para_javascript/options.js"></script>  <script type="text/javascript" async="true" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOC&subagency=WPC&pua=ua-86992316-1"></script>  </head> <body>   <h1> <div class="header"> <div class="header-content"> <a href="http://www.noaa.gov" title="Explore other NOAA products" class="header-noaa-icon"><img src="/para/para_css/images/header-noaa.png" alt="NOAA" /></a> <a href="http://www.weather.gov" title="Access to the latest watches and warnings" class="header-nws-icon"><img src="/para/para_css/images/header-nws.png" alt="NWS" /></a> <a href="http://www.commerce.gov" title="Learn about the Department of Commerce" class="header-doc"><img src="/para/para_css/images/header_doc.png" alt="DOC" /></a> <a href="#contents"><img height="1" src="/para/para_css/images/skipgraphic.gif" alt="Skip Naviagation Links" width="1" border="0"></a> <div class="header-center-text"><a class="header-center-text" href="/index.php">Weather Prediction Center</a></div> <div class="header-noaa-text"><a class="header-noaa-text" href="http://www.noaa.gov">National Oceanic and Atmospheric Administration</a></div> </div> </div> <div class="header-shadow"><div class="header-shadow-content"></div></div> </h1>   <div class="ncep-menu-content"> <div class="ncep-links"> <a href="https://www.weather.gov/ncep/" title="National Centers for Environmental Prediction (NCEP)'s website" target="_blank">NCEP</a>: <a href="https://www.aviationweather.gov/" title="Aviation Weather Center's website" target="_blank">AWC</a> · <a href="http://www.cpc.ncep.noaa.gov/" title="Climate Prediction Center's website" target="_blank">CPC</a> · <a href="http://www.emc.ncep.noaa.gov/" title="Environmental Modeling Center's website" target="_blank">EMC</a> · <a href="http://www.nco.ncep.noaa.gov/" title="NCEP Central Operations' website" target="_blank">NCO</a> · <a href="https://www.nhc.noaa.gov/" title="National Hurricane Center's website" target="_blank">NHC</a> · <a href="https://ocean.weather.gov" title="Ocean Prediction Center's website" target="_blank">OPC</a> · <a href="https://www.spc.noaa.gov/" title="Storm Prediction Center's website" target="_blank">SPC</a> · <a href="https://www.swpc.noaa.gov/" title="Space Weather Prediction Center's website" target="_blank">SWPC</a> · <a href="https://www.wpc.ncep.noaa.gov/" title="Weather Prediction Center's website (that's us!)" target="_blank">WPC</a> <br> </div> <div class="ncep-localforecast"> <form target="_blank" name="getForecast" id="getForecast" action="https://forecast.weather.gov/zipcity.php" method="get"> <input id="inputstring" name="inputstring" type="text" size="13" style='font-size: 10px;' title="type in your "City, State" or Zip Code to get a local forecast" value="Local Forecast" onclick="this.value=''"> <input name="btnSearch" id="btnSearch" type="submit" title="type in your "City, State" or Zip Code to get a local forecast" style='font-size: 10px;' value="Go"> </form> </div> <div class="ncep-socialmedia"> <a href="https://origin.wpc.ncep.noaa.gov/mail_webmaster/" title="send WPC an email" target="_blank"><img src="/para/para_css/images/email_sm.png" alt="email" height="18"/></a> <a href="https://www.facebook.com/NWSWPC" title="visit WPC on Facebook!" target="_blank"><img src="/para/para_css/images/fb_sm.png" alt="facebook" height="18"/></a>  <a href="https://x.com/NWSWPC" title="follow WPC on X!" target="_blank"><img src="/para/para_css/images/x-logo-white-on-gray.png" alt="twitter" height="18"/></a> </div>   </div> <div class="center"> <div class="content">   <div class="topnav"> <ul id="topnav"> <li> <div class="left-section-link"> <a href="/index.shtml">Home </a> </div>  </li> <li> <div class="center-section-link"> <a href="#">Forecasts & Analyses ▼</a> </div> <div class="drop"> <ul> <li><a href="/dwm/dwm.shtml">Daily Weather Map</a></li> <li><a href="/basicwx/basicwx_wbg.php">Day ½–2½</a></li> <li><a href="/medr/medr.shtml">Day 3–7 CONUS</a></li> <li><a href="/threats/threats.php">Day 3–7 Hazards</a></li> <li><a href="/alaska/akmedr.shtml">Day 4–8 Alaska</a></li> <li><a href="/qpf/excess_rain.shtml">Excessive Rainfall</a></li> <li><a href="/nationalfloodoutlook/index.html">Flood Outlook</a></li> <li><a href="/kml/kmlproducts.php">GIS Products</a></li> <li><a href="/heat_index.shtml">Heat Index</a></li> <li><a href="/metwatch/metwatch_mpd.php">Mesoscale Precip Discussion</a></li> <li><a href="/national_forecast/natfcst.php?day=1">National Forecast Charts</a></li> <li><a href="/discussions/hpcdiscussions.php?disc=nathilo&version=0&fmt=reg">National High & Low</a></li> <li><a href="/pqpf/conus_hpc_pqpf.php">PQPF</a></li> <li><a href="/qpf/qpf2.shtml">QPF</a></li> <li><a href="/storm_summaries/storm_summaries.shtml">Storm Summaries</a></li> <li><a href="/html/sfc2.shtml">Surface Analysis</a></li> <li><a href="/tropical/tropstorms.shtml">Tropical Products</a></li> <li><a href="/wwd/winter_wx.shtml">Winter Weather</a></li> <li><a href="/html/discuss.shtml">WPC Discussions</a></li> </ul> </div> </li> <li> <div class="center-section-link"> <a href="#">Archives ▼</a> </div> <div class="drop"> <ul> <li><a href="/dailywxmap/index.html">Daily Weather Maps</a></li> <li><a href="/archives/web_pages/medr/get_medr_products.php">Day 3-7</a></li> <li><a href="/archives/web_pages/ero/ero.shtml">Excessive Rainfall Outlooks</a></li> <li><a href="/qpf/eroclimo/index.php">Excessive Rainfall Outlook Climatology</a></li> <li><a href="/archives/metwatch/mpd_archive_days.php">Mesoscale Precip Discussions</a></li> <li><a href="/noaa/noaa_archive.php">National Forecast Charts</a></li> <li><a href="/archives/web_pages/discussions/archive_nathilo.php">National High & Low</a></li> <li><a href="/archives/qpf/get_qpf_images.php">QPF</a></li> <li><a href="/storm_summaries/storm_summaries.shtml">Storm Summaries</a></li> <li><a href="/archives/web_pages/sfc/sfc_archive.php">Surface Analysis</a></li> <li><a href="/tropical/tropstorms.shtml">Tropical Advisories</a></li> <li><a href="/archives/web_pages/winwx/get_winwx_images.php">Winter Weather</a></li> <li><a href="/archives/web_pages/wpc_arch/get_wpc_archives.php">WPC Archive Page</a></li> </ul> </div> </li> <li> <div class="center-section-link"> <a href="#">Verification ▼</a> </div> <div class="drop"> <ul> <li><a href="/html/hpcverif.shtml#medmin">Day 3–7</a></li> <li><a href="/storm_summaries/event_reviews.php">Event Reviews</a></li> <li><a href="/html/model2.shtml">Model Diagnostics</a></li> <li><a href="/html/hpcverif.shtml#qpf">QPF</a></li> <li><a href="/verification/winwx/winwx.php">Winter Weather</a></li> </ul> </div> </li> <li> <div class="center-section-link"> <a href="#">International ▼</a> </div> <div class="drop"> <ul> <li><a href="/international/intl2.shtml">Desks</a></li> <li><a href="/international/gdi/">GDI</a></li> <li><a href="/international/wng/">Desk Forecasting Tools</a></li> <li><a href="/qpf/pr_qpf24.php">Puerto Rico QPF</a></li> </ul> </div> </li> <li> <div class="center-section-link"> <a href="#">Development ▼</a> </div> <div class="drop"> <ul> <li><a href="/hmt/">HydroMet Testbed</a></li> <li><a href="/research/res2.shtml">Training</a></li> <li><a href="/html/wpc_publications.shtml">Publications</a></li> </ul> </div> </li> <li> <div class="center-section-link"> <a href="#">About ▼</a> </div> <div class="drop"> <ul> <li><a href="/html/about2.shtml">About the WPC</a></li> <li><a href="/html/faq.shtml">FAQ</a></li> <li><a href="/html/WPC_history.pdf">History</a></li> <li><a href="/html/fcst2.shtml">Mission&Vision</a></li> <li><a href="/html/fam2.shtml">Product Description</a></li>  <li><a href="/para/para_includes/WPC_Student_Opportunities.pdf">Student Opportunities</a></li> </ul> </div> </li> <li> <div class="center-section-link">  <a href="https://www.weather.gov/search">Search</a> </div> <div class="dropsearch"> <div class="site-search"> <form method="get" action="https://search.usa.gov/search" style="margin-bottom: 0; margin-top: 0;"> <input type="hidden" name="v:project" value="firstgov" /> <label for="query">Search For</label> <input type="text" name="query" id="query" size="12" /> <input type="submit" value="Go" /> <p> <input type="radio" name="affiliate" checked="checked" value="nws.noaa.gov" id="nws" /> <label for="nws" class="search-scope">NWS</label> <input type="radio" name="affiliate" value="noaa.gov" id="noaa" /> <label for="noaa" class="search-scope">All NOAA</label> </p> </form> </div> </div> </li> </ul> </div>    <head> <link rel="stylesheet" href="plugins/leaflet1.4.0/leaflet.css" /> <script src="plugins/leaflet1.4.0/leaflet.js"></script> <link rel="stylesheet" href="style/leaflet.zoomhome.css"/> <script src="plugins/leaflet.zoomhome.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>   <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js" integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ==" crossorigin=""></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="plugins/leaflet.pattern.js"></script> <script src="plugins/Leaflet.PolylineDecorator-master/dist/leaflet.polylineDecorator.js"></script> <script src="plugins/leaflet.groupedlayercontrol.js"></script> <script src="plugins/leaflet-control-topcenter-master/src/leaflet-control-topcenter.js"></script> <link rel="style/leaflet.groupedlayercontrol.css"> <script src="plugins/L.Control.ZoomMin.js"></script> <link rel="stylesheet" href="style/L.Control.ZoomMin.css" media="screen"> <script src="plugins/Control.FullScreen.js"></script> <link rel="stylesheet" href="style/Control.FullScreen.css" />   <script> window.onload=function(){init();}; var LOWS = []; var TROF = []; var HIGHS = []; var WARM = []; var COLD = []; var STNRY = []; var OCFNT = []; var valid = []; var types = []; var load = 0; var day = 0; function init() { $("#0").addClass('active-forecast'); LoadLayer(0); } </script>  <script type="text/javascript" src="mapdata/fronts92f.js"> //Loads the latest D1 fronts. </script> <script type="text/javascript" src="mapdata/fronts96f.js"> //Loads the latest D2 fronts. </script> <script type="text/javascript" src="mapdata/fronts99f.js"> //Loads the latest D3 fronts. </script>  <script language="JavaScript"> function DisplayInfo(divId) { if(document.getElementById(divId).style.display == 'none') { document.getElementById(divId).style.display='block'; } else { document.getElementById(divId).style.display = 'none'; } } </script> <style> #content-frt { padding-top: 5px; padding-bottom: 5px; } .LegendInfo { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: #ded3d1; box-shadow: 0 0 15px rgba(0,0,0,1); border-radius: 5px; } .ValidTimeInfo { padding: 6px 8px; font: 12px arial, sans-serif; background: #ded3d1; box-shadow: 0 0 15px rgba(0,0,0,1); border-radius: 5px; } .LogoClass { padding: 0px 0px; } .LegendIcon { font: 11px arial, sans-serif; line-height: 14px; color: black; } .LegendIcon i { width: 12px; height: 12px; float: left; margin-right: 4px; opacity: 1; } .ExInfoClass { padding: 2px 4px; font: 11px arial, sans-serif; color: black; background-color:rgba(255,255,255,0.9); } .leaflet-control-layers-group-name { font-weight: bold; } .leaflet-top .leaflet-control { margin-top: 0px; margin-left: 200px; margin-right: 0px; } .labelClass { font: 18px/22px Arial, Helvetica, sans-serif; font-weight: bold; white-space:nowrap; text-align: center; color: black; text-shadow: 2px 0px #FFFFFF; } .labelClassStateID { font: 12px/14px Arial, Helvetica, sans-serif; font-weight: bold; white-space:nowrap; text-align: center; color: black; text-shadow: 2px 0px #FFFFFF; } </style> </head>  <div id='content' class='display-content-max'>   <div class='display-text'> <div class="display-title"><font color="black">WPC National Forecast Chart</font></div>    <div class="navbar" id="fordays"> <ul id="minitabs"> <li class="cforday" id="0"><a href="#" OnMouseOver="LoadLayer(0);" class="overview" alt="Day1"><span id="TABday1T-frt" class="blank">Tue Feb 25, 2025</span></a></li><li class="cforday" id="1"><a href="#" OnMouseOver="LoadLayer(1);" class="overview" alt="Day2"><span id="TABday2T-frt" class="blank">Wed Feb 26, 2025</span></a></li><li class="cforday" id="2"><a href="#" OnMouseOver="LoadLayer(2);" class="overview" alt="Day3"><span id="TABday3T-frt" class="blank">Thu Feb 27, 2025</span></a></li> </ul> </div> </div> <table id="layout" cellspacing="0" cellpadding="0" border="0" align="center" style="display:block;"> <tr> <td><div id="map" style="width:800px; height:550px; border:3px ridge black; border-radius:3px; margin-left: 27px"> </div></td> </tr> </table>  <div id='links-frt' class='links-max'> <a href="/NationalForecastChart/staticmaps" target="_blank" class="linksmajor"> » Link to static maps</a><br> <a onclick="javascript:displaylinks('dlinks-more')" href="javascript:;"> + Additional Links</a> <div id="dlinks-more" style="display: none"> <ul class="linkslist"> <li>» <a href="/html/about_Gudes.shtml" target="_blank" alt="Product Description">Description of the National Forecast Chart</a></li> <li>» <a href="/noaa/noaa_archive.php?reset=yes" target="_blank" alt="Product Archive">Product Archives</a></li> <li>» Download hazards in <a href="/kml/kmlproducts.php#sigwx" alt="KML">KML</a> or <a href="https://ftp.wpc.ncep.noaa.gov/shapefiles/noaa_chart/" alt="shapefile">shapefile format</a> or <a href="/NationalForecastChart/mapdata/" alt="GeoJSON">GeoJSON format</li> </ul> </div> </div>   <script> now_f = "12:51:10: 0"; now = "17"; nowDate = "17:51:10 UTC"; console.log("Current Hour : " + now_f); // Check current hour console.log("Current Hour : " + nowDate); // Check current hour console.log("Daylight? : 0");  // Event Handling //$("#0").addClass('active-forecast'); $("#0").mouseover(function(){ $("#0").addClass('active-forecast'); $("#1").removeClass('active-forecast'); $("#2").removeClass('active-forecast'); }); $("#1").mouseover(function(){ $("#1").addClass('active-forecast'); $("#0").removeClass('active-forecast'); $("#2").removeClass('active-forecast'); }); $("#2").mouseover(function(){ $("#2").addClass('active-forecast'); $("#1").removeClass('active-forecast'); $("#0").removeClass('active-forecast'); }); window.addEventListener("keydown", function(e) { // space and arrow keys if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } }, false); window.addEventListener("keydown", checkKeyPressed, false); function checkKeyPressed(e){ if ($("#0").hasClass('active-forecast')){ var day = 0; } if ($("#1").hasClass('active-forecast')){ var day = 1; } if ($("#2").hasClass('active-forecast')){ var day = 2; } if (e.keyCode == "37"){ if ((day - 1) < 0){ $("#2").addClass('active-forecast'); $("#1").removeClass('active-forecast'); $("#0").removeClass('active-forecast'); LoadLayer(0); } else { if(day == 0){ var num = 2; var add = "#2"; var remove1 = "#1"; var remove2 = "#0"; } if(day == 1){ var num = 0; var add = "#0"; var remove1 = "#1"; var remove2 = "#2"; } if(day == 2){ var num = 1; var add = "#1"; var remove1 = "#0"; var remove2 = "#2"; } console.log("add: " + add); console.log("remove: " + remove1); console.log("remove: " + remove2); $(add).addClass('active-forecast'); $(remove1).removeClass('active-forecast'); $(remove2).removeClass('active-forecast'); LoadLayer(num); } } if (e.keyCode == "39"){ if ((day+ 1) > 2){ $("#0").addClass('active-forecast'); $("#1").removeClass('active-forecast'); $("#2").removeClass('active-forecast'); LoadLayer(0); } else { if(day == 0){ var num = 1; var add = "#1"; var remove1 = "#2"; var remove2 = "#0"; } if(day == 1){ var num = 2; var add = "#2"; var remove1 = "#1"; var remove2 = "#0"; } if(day == 2){ var num = 0; var add = "#0"; var remove1 = "#1"; var remove2 = "#2"; } console.log("add: " + add); console.log("remove: " + remove1); console.log("remove: " + remove2); $(add).addClass('active-forecast'); $(remove1).removeClass('active-forecast'); $(remove2).removeClass('active-forecast'); LoadLayer(num); } } }  // Initialize map var map = L.map('map', { //center: [39.5, -98.5], center: [38.2, -96.1], zoom: 4.1, minZoom: 4.1, maxZoom: 7, zoomControl: false, zoomSnap: 0.1, }); console.log("map initialized"); // RFC boundary layer //var rfcLayer = new L.geoJson(rfc_GeoJSON); //rfcLayer.setStyle({ "color": "LightSeaGreen", // "weight": 1, // "fill": false, // "opacity": 1.0 //}); //Load in the basemaps from Esri and Stadia/Stamen var ShadedReliefBase = L.esri.basemapLayer('ShadedRelief'); //var Toner_Lines = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}{r}.png', { //}); //var Toner_Labels = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}{r}.png', { //attribution: '© <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://stamen.com/" target="_blank"> Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors', //}); //var GudesMap = L.layerGroup([ShadedReliefBase, Toner_Lines, Toner_Labels]).addTo(map); var GudesMap = L.layerGroup([ShadedReliefBase]).addTo(map); // Initialize the layer groups var Frontlayer = new L.LayerGroup(); var QPFlayer = new L.LayerGroup(); var snLayer = new L.LayerGroup(); var rsLayer = new L.LayerGroup(); var trwLayer = new L.LayerGroup(); var hotLayer = new L.LayerGroup(); var coldLayer = new L.LayerGroup(); var SPClayer = new L.LayerGroup(); var HsnowLayer = new L.LayerGroup(); var Floodlayer = new L.LayerGroup(); var Firelayer = new L.LayerGroup(); var LabelLayer = new L.FeatureGroup(); var trop_markers = new L.FeatureGroup(); var Icelayer = new L.FeatureGroup(); //var genPrecip = new L.FeatureGroup(); var WxIcon = L.Icon.extend({ options: { iconSize: [50, 50], iconAnchor: [20, 20], popupAnchor: [0, -10] } }); var hur_icon = new WxIcon({iconUrl: 'icons/hur.png',iconSize:[30,30]}); var NoIcon = new WxIcon({iconUrl: 'icons/noicon.png',iconSize:[3,3]}); var ts_icon = new WxIcon({iconUrl: 'icons/ts.png',iconSize:[40,40]}); // Set basemap control options var baseMaps = { //"Shaded Relief": ShadedRelief, }; console.log("Base maps loaded"); var groupedOverlays = { "Weather Layers": { "Fronts": Frontlayer, //"General Precip": genPrecip, "Rain/Thunderstorms": trwLayer, "Rain": QPFlayer, "Mixed Precipitation": rsLayer, "Snow": snLayer, "Severe Thunderstorms Possible": SPClayer, "Heavy Rain/Flash Flooding Possible": Floodlayer, "Critical Fire Wx Possible": Firelayer, "Freezing Rain Possible": Icelayer, "Heavy Snow Possible": HsnowLayer, }, //"Boundary Layers": { // "River Forecast Center": rfcLayer, // "None": none, //} }; console.log("Grouped layers loaded"); // Options for grouped layer control //var options = { // exclusiveGroups:["Boundary Layers"], // Show a checkbox next to non-exclusive group labels for toggling all // groupCheckboxes: true //}; //Add Layer control //L.control.groupedLayers(baseMaps, groupedOverlays, options, {position:'topleft'}).addTo(map); L.control.groupedLayers(baseMaps, groupedOverlays, {position:'topright'}).addTo(map); // Add Date Control var info = L.control({position: 'topleft'}); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'ValidTimeInfo'); this.update(); return this._div; }; info.update = function (num) { if (num == 0) { this._div.innerHTML = "<center>Weather Valid 7am EST Tue Feb 25 2025 to 7am EST Wed Feb 26 2025 <br> Fronts Valid 7pm EST Tue Feb 25 2025 <br>Issued 3:36 AM EST </center>"; } if (num == 1) { this._div.innerHTML = "<center>Weather Valid 7am EST Wed Feb 26 2025 to 7am EST Thu Feb 27 2025 <br> Fronts Valid 7am EST Wed Feb 26 2025 <br>Issued 3:39 AM EST </center>"; } if (num == 2) { this._div.innerHTML = "<center>Weather Valid 7am EST Thu Feb 27 2025 to 7am EST Fri Feb 28 2025 <br> Fronts Valid 7am EST Thu Feb 27 2025 <br>Issued 3:39 AM EST </center>"; } }; info.addTo(map); console.log("Valid times loaded"); var exInfo = L.control({position: 'bottomleft'}); exInfo.onAdd = function (map) { this._div = L.DomUtil.create('div', 'ExInfoClass'); this.update(); return this._div; }; exInfo.update = function (num) { if (num == 0) { this._div.innerHTML = "<center>Prepared by Dolan with WPC/SPC/NHC forecasts.</center>"; } if (num == 1) { this._div.innerHTML = "<center>Prepared by Dolan with WPC/SPC/NHC forecasts.</center>"; } if (num == 2) { this._div.innerHTML = "<center>Prepared by Dolan with WPC/SPC/NHC forecasts.</center>"; } }; exInfo.addTo(map); console.log("Prepared by loaded"); // Add NWS Logo var logo = L.control({position: 'bottomright'}); logo.onAdd = function (map) { var div = L.DomUtil.create('div', 'LogoClass'); div.innerHTML += '<img src="icons/noaa-nws-combined-logos.png" alt="noaa-nws-logo" width="144" height="72">'; return div; }; logo.addTo(map); console.log("Logo loaded"); // Add zoom control button //map.addControl(new L.Control.ZoomMin()); // Add fullscreen control //var fsControl = new L.Control.FullScreen(); //map.addControl(fsControl); //L.control.zoom({ // position:'topright' //}).addTo(map); var zoomHome = L.Control.zoomHome({position: 'topright'}); zoomHome.addTo(map); var fsControl = new L.Control.FullScreen({ position:'topright' }); map.addControl(fsControl); // Create Legend var type_out = []; var hazards = []; function getColor(d) { return d == "Rain" ? '#31A354' : d == "Rain/Thunderstorms" ? '#51240C' : d == "Mixed Precipitation" ? '#3BEDED' : d == "Snow" ? '#E0E0E0' : d == "Freezing Rain Possible" ? '#DF65B0' : d == "Heavy Snow Possible" ? '#225EA8' : d == "Heavy Rain/Flash Flooding Possible" ? '#F03B20' : d == "Critical Fire Weather Possible" ? 'black' : d == "Severe Thunderstorms Possible" ? 'yellow' : //'#FEB24C' : '#FFEDA0'; } var legend = L.control({position: 'bottomleft'}); var div = L.DomUtil.create('div', 'LegendIcon LegendInfo'), labels = []; legend.onAdd = function (map) { // loop through our hazard types and generate a label with a colored square for each interval for (var i = 0; i < type_out.length; i++) { //console.log(type_out[i]); if (type_out[i] == "Severe Thunderstorms Possible") { div.innerHTML += '<i style="background-image: url(icons/svr.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Rain/Thunderstorms") { div.innerHTML += '<i style="background-image: url(icons/rains.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Heavy Rain/Flash Flooding Possible") { div.innerHTML += '<i style="background-image: url(icons/hvyrain.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Rain") { div.innerHTML += '<i style="background-image: url(icons/rain.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Mixed Precipitation") { div.innerHTML += '<i style="background-image: url(icons/rainsnow.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Heavy Snow Possible") { div.innerHTML += '<i style="background-image: url(icons/hsnow.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Critical Fire Weather Possible") { div.innerHTML += '<i style="background-image: url(icons/fwx.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Freezing Rain Possible") { div.innerHTML += '<i style="background-image: url(icons/zrain.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } if (type_out[i] == "Snow") { div.innerHTML += '<i style="background-image: url(icons/snow.png); background-size: contain;"></i> ' + type_out[i] + ('<br>'); } } return div; };  map.on('overlayadd', onOverlayAdd); map.on('overlayremove', onOverlayRemove); function checkHasLayer(e){ // Determine what layers should be displayed based on control checkboxes //console.log(types); var layers = [SPClayer, Floodlayer, Firelayer, HsnowLayer, Icelayer, trwLayer, QPFlayer, snLayer, rsLayer, hotLayer, coldLayer]; var desc = ["Severe Thunderstorms Possible", "Heavy Rain/Flash Flooding Possible", "Critical Fire Weather Possible", "Heavy Snow Possible", "Freezing Rain Possible", "Rain/Thunderstorms", "Rain", "Snow", "Mixed Precipitation"]; for (y = 0; y < layers.length ; y++) { if(map.hasLayer(layers[y]) == true) { types.push(desc[y]); } if (types.indexOf(desc[y]) >= 0) { if (map.hasLayer(layers[y]) == false) { index = types.indexOf(desc[y]); if (index > -1) { types.splice(index, 1); } } } } // Get rid of duplicates for (var i in types) { if(type_out.indexOf(types[i]) === -1){ type_out.push(types[i]); } } //console.log("output: " + type_out); } function onOverlayAdd(e){ type_out = []; div.innerHTML = " "; checkHasLayer(); legend.addTo(map); //console.log("added layer") } function onOverlayRemove(e){ type_out = []; types = []; div.innerHTML = " "; checkHasLayer(); legend.addTo(map); //console.log("removed layer") }  // Function to load layers for selected day function LoadLayer(num){ load += 1; //console.log(load); console.log("Loaded " + (num+1)); var length_check = 0; types.length = 0; var allLayers = [Frontlayer, LabelLayer, SPClayer, QPFlayer, HsnowLayer, Floodlayer, Firelayer, Icelayer, trwLayer, snLayer, rsLayer, hotLayer, coldLayer, trop_markers]; div.innerHTML = " "; // Clear layers from map for ( x = 0; x < allLayers.length; x++){ allLayers[x].clearLayers(); map.removeLayer(allLayers[x]); } // Set icons for Lows var LowIcon = L.icon({ iconUrl: 'icons/low.png', iconAnchor: [20, 20], iconSize: [30, 30] }); // Set icons for Highs var HighIcon = L.icon({ iconUrl: 'icons/high.png', iconAnchor: [20, 20], iconSize: [30, 30] }); // Set icons for Cold var ColdDayIcon = L.icon({ iconUrl: 'icons/coldday.png', iconAnchor: [50, 20], iconSize: [150, 50] }); // Set icons for Hot var HotDayIcon = L.icon({ iconUrl: 'icons/hotday.png', iconAnchor: [50, 20], iconSize: [150, 50] }); // Make Label Icon var createIcon = function(labelText){return L.divIcon({className: 'labelClass', html: labelText, iconAnchor: [-17, 8],})}; // variables for consistent anchor and size var iAnchor = 10; var iSize = 20; // Draw Lows for(var i=0; i<LOWS[num].length; i++) {L.marker(LOWS[num][i], {icon: LowIcon, zIndexOffset: 100}).addTo(Frontlayer);} // Draw Highs for(var i=0; i<HIGHS[num].length; i++) {L.marker(HIGHS[num][i], {icon: HighIcon, zIndexOffset: 100}).addTo(Frontlayer);} // Draw warm fronts var plArray = []; for(var i=0; i<WARM[num].length; i++) { WARMsmooth = getCurvePoints(WARM[num][i]); plArray.push(L.polyline(WARMsmooth, {color: 'red', opacity: 1, weight: 2}).addTo(Frontlayer)); L.polylineDecorator(WARMsmooth, { patterns: [ { offset: 25, endOffset: 10, repeat: 40, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/warmpip.png',iconAnchor: [iAnchor,iAnchor ],iconSize: [iSize,iSize ]})}})} ] }).addTo(Frontlayer); } // Draw cold fronts var plArray = []; for(var i=0; i<COLD[num].length; i++) { COLDsmooth = getCurvePoints(COLD[num][i]); plArray.push(L.polyline(COLDsmooth, {color: 'blue', opacity: 1, weight: 2}).addTo(Frontlayer)); L.polylineDecorator(COLDsmooth, { patterns: [ { offset: 25, endOffset: 10, repeat: 40, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/coldpip.png', iconAnchor: [iAnchor,iAnchor ], iconSize: [iSize,iSize ]})}})} ] }).addTo(Frontlayer); } // Draw stationary fronts var plArray = []; for(var i=0; i<STNRY[num].length; i++) { STNRYsmooth = getCurvePoints(STNRY[num][i]); plArray.push(L.polyline(STNRYsmooth, {offset: 0, color: 'red', opacity: 1, weight: 2, dashArray: '30, 30', dashOffset: '45'}).addTo(Frontlayer)); plArray.push(L.polyline(STNRYsmooth, {offset: 0, color: 'blue', opacity: 1, weight: 2, dashArray: '30, 30', dashOffset: '15'}).addTo(Frontlayer)); L.polylineDecorator(STNRYsmooth, { patterns: [ { offset: 30, endOffset: 10, repeat: 60, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/wpipf2.png', iconAnchor: [iAnchor,iAnchor ], iconSize: [iSize,iSize ] })}})}, { offset: 0, endOffset: 10, repeat: 60, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/cpipf2.png', iconAnchor: [iAnchor+1,iAnchor ], iconSize: [iSize,iSize ] })}})} ] }).addTo(Frontlayer); } // Draw trofs for(var i=0; i<TROF[num].length; i++) { TROFsmooth = getCurvePoints(TROF[num][i]); L.polylineDecorator(TROFsmooth, { patterns: [ { offset: 10, endOffset: 0, repeat: 35, symbol: L.Symbol.dash({pixelSize: 20, pathOptions: {color: '#B87333', weight: 4, opacity: 1}})} ] }).addTo(Frontlayer); } // Draw occluded fronts var plArray = []; for(var i=0; i<OCFNT[num].length; i++) { OCFNTsmooth = getCurvePoints(OCFNT[num][i]); plArray.push(L.polyline(OCFNTsmooth, {color: '#6633CC', opacity: 1, weight: 2}).addTo(Frontlayer)); L.polylineDecorator(OCFNTsmooth, { patterns: [ { offset: 15, endOffset: 0, repeat: 60, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/owpip2.png', iconAnchor: [iAnchor,iAnchor ], iconSize: [iSize,iSize ] })}})}, { offset: 45, endOffset: 0, repeat: 60, symbol: L.Symbol.marker({rotate: true, markerOptions: { icon: L.icon({iconUrl: 'icons/ocpipf2.png', iconAnchor: [iAnchor,iAnchor ], iconSize: [iSize,iSize ] })}})} ] }).addTo(Frontlayer); } // fill patterns var circle = new L.PatternCircle({x:6, y:6, radius: 2, fill: true, color: 'darkgreen'}); var circle_pattern = new L.Pattern({width: 7, height: 7}); circle_pattern.addShape(circle); circle_pattern.addTo(map); var svr_stripes = new L.StripePattern({color:'yellow', weight:2, spaceWeight:5, angle: -45, spaceColor:'black', spaceOpacity: 0.4}); svr_stripes.addTo(map); var flood_stripes = new L.StripePattern({color:'red', weight:2, spaceWeight:5, angle: 45, spaceColor:'black', spaceOpacity: 0.4}); flood_stripes.addTo(map); var hs_stripes = new L.StripePattern({color:'white', weight:2, spaceWeight:5, angle: 45, spaceColor:'black', spaceOpacity: 0.3}); hs_stripes.addTo(map); var zr_stripes = new L.StripePattern({color:'#DF65B0', weight:2, spaceWeight:5, angle: -45, spaceColor:'black', spaceOpacity: 0.4}); zr_stripes.addTo(map); var fwx_stripes = new L.StripePattern({color:'gray', weight:2, spaceWeight:5, angle: -45, spaceColor:'black', spaceOpacity: 0.4}); fwx_stripes.addTo(map); var smooth = .5; var fillOpacity1 = 0.5; var fillOpacity2 = 0.8; var OceanPatch = [{ "type": "Feature", "properties": {"Test": "Patch"}, "geometry": { "type": "Polygon", "coordinates": [[ [-64, 29], [-55, 29], [-55, 27], [-64, 27], [-64, 29] ]] } }]; function areaStyle(){ return { fillColor: '#9ebcd8', weight: 2, opacity: 1, color: '#9ebcd8', dashArray: '3', fillOpacity: 1 } }; L.geoJson(OceanPatch, {style: areaStyle}).addTo(map); // More maps // Coastlines $.getJSON("GeoJSON_static/coastal.json", function(data) { L.geoJson(data, { style: function (feature) { style = { weight: 3, color: 'gray', } return feature.properties && style; }, onEachFeature: function (feature, layer) { //console.log(style); }, }).addTo(map); }); // States $.getJSON("GeoJSON_static/states.json", function(data) { L.geoJson(data, { style: function (feature) { style = { weight: 1, color: 'black', color: 'black', fillColor: 'green', fillOpacity: 0 } return feature.properties && style; }, onEachFeature: function (feature, layer) { //console.log(style); }, }).addTo(map); }); $.getJSON("GeoJSON_static/noam_coasts.json", function(data) { L.geoJson(data, { style: function (feature) { style = { weight: 2, color: 'black', } return feature.properties && style; }, onEachFeature: function (feature, layer) { //console.log(style); }, }).addTo(map); }); $.getJSON("GeoJSON_static/mexico.geojson", function(data) { L.geoJson(data, { style: function (feature) { style = { weight: 0.4, color: 'black', fillOpacity: 0 } return feature.properties && style; }, onEachFeature: function (feature, layer) { //console.log(style); }, }).addTo(map); }); $.getJSON("GeoJSON_static/canada.geojson", function(data) { L.geoJson(data, { style: function (feature) { style = { weight: 0.4, color: 'black', fillOpacity: 0 } return feature.properties && style; }, onEachFeature: function (feature, layer) { //console.log(style); }, }).addTo(map); }); // State Labels var pointst = [["AL",32.7935,-86.8268], ["AR",34.8998,-92.4392], ["AZ",34.2932,-111.6646], ["CA",37.2454,-119.6082], ["CO",38.9986,-105.5478], ["CT",41.822,-72.7262], ["DC",38.9093,-77.5146], ["DE",38.9956,-75.0059], ["FL",28.674,-82.0093], ["GA",32.6516,-83.4485], ["IA",42.0746,-93.5], ["ID",44.3891,-114.6593], ["IL",40.065,-89.1984], ["IN",39.908,-86.2755], ["KS",38.4847,-98.3802], ["KY",37.5267,-85.2905], ["LA",31.0891,-92.029], ["MA",42.5579,-71.8142], ["ME",45.3805,-69.23], ["MI",44.3472,-85.4368], ["MN",46.3119,-94.3136], ["MS",32.752,-89.6655], ["MT",47.0335,-109.6451], ["NC",35.5437,-79.3786], ["ND",47.4463,-100.4694], ["NE",41.5271,-99.8106], ["NH",43.6856,-71.5775], ["NJ",40.2005,-74.6688], ["NM",34.4214,-106.1084], ["NV",39.3565,-116.6554], ["NY",42.948,-75.5149], ["OH",40.2912,-82.79], ["OK",35.5834,-97.5082], ["OR",43.9359,-120.5523], ["PA",40.8737,-77.7993], ["RI",41.0754,-71.5558], ["SD",44.4361,-100.2305], ["TN",35.843,-86.3433], ["TX",31.4942,-99.3594], ["UT",39.3238,-111.6782], ["VA",37.5164,-78.8296], ["VT",44.0751,-72.6627], ["WA",47.3808,-120.44], ["WI",44.6373,-90.0114], ["WV",38.6426,-80.6137], ["WY",42.9996,-107.5514], ["MO",38.3208,-92.3855], ["SC",33.9357,-80.899], ["MD",39.6453,-76.7859]]; var marker1 = []; var i; for (i = 0; i < pointst.length; i++) { marker1[i] = new L.Marker([pointst[i][1], pointst[i][2]], { icon: L.divIcon({ className: 'labelClassStateID', html: '<div>'+pointst[i][0]+'</div>' }), win_url: pointst[i][3] }); marker1[i].addTo(map); }; // Read and draw departures ######################################################## // load GeoJSON from an external file day = num + 1; dir = "mapdata/"; $(document).ready(function() { $.ajaxSetup({ cache: false }); }); $.getJSON(dir + "hotareas" + day + ".json", function(data) { var hot = L.geoJson( data, { filter: function (feature) { console.log(feature.properties.Area); return feature.properties.Area >= 100000.00 }, onEachFeature: function (feature, layer) { centroid = feature.properties.Centroid; length_check = feature.geometry.coordinates; L.marker(centroid, {icon: HotDayIcon, zIndexOffset: 100}).bindPopup(feature.properties.popupContent).addTo(hotLayer); }, }); if (length_check != "") { console.log("hotLayer marked"); map.addLayer(hotLayer); } else {console.log("hotLayer blank");} }); $.getJSON(dir + "coldareas" + day + ".json", function(data) { var cold = L.geoJson( data, { filter: function (feature) { console.log(feature.properties.Area); return feature.properties.Area >= 100000.00 }, onEachFeature: function (feature, layer) { centroid = feature.properties.Centroid; length_check = feature.geometry.coordinates; L.marker(centroid, {icon: ColdDayIcon, zIndexOffset: 100}).bindPopup(feature.properties.popupContent).addTo(coldLayer); }, }); if (length_check != "") { console.log("coldLayer marked"); map.addLayer(coldLayer); } else {console.log("coldLayer blank");} }); // Draw tstorm layer ################################################################ //directory = "testdata/"; $.getJSON(dir + "trwD" + day + ".json", function(data) { var trw = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'darkgreen', fillOpacity: fillOpacity1, fillPattern: circle_pattern, } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent); console.log("Rain/Thunderstorms Layer ON"); }, smoothFactor: smooth }); if (length_check != ""){ console.log("Rain/Thunderstorms has points!"); trw.addTo(trwLayer); map.addLayer(trwLayer); } }); // Draw QPF layer ####################################################### $.getJSON(dir + "qpfD" + day + ".json", function(data) { var qpf = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'green', fillOpacity: 0.2, fillColor:' green', } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent);; console.log("Rain Layer ON"); }, smoothFactor: smooth }); if (length_check != ""){ console.log("Rain Layer has points!"); qpf.addTo(QPFlayer); map.addLayer(QPFlayer); } }); // Draw rain/snow layer #################################################### $.getJSON(dir + "rsnD" + day + ".json", function(data) { var rs = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'blue', fillOpacity: 0.2, } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent); console.log("Mixed Precip Layer ON"); }, smoothFactor: smooth }); if (length_check != ""){ console.log("Mixed Precip Layer has points!"); rs.addTo(rsLayer); map.addLayer(rsLayer); } }); // Draw snow layer ############################################################## $.getJSON(dir + "snoD" + day + ".json", function(data) { var sn = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'black', fillOpacity: fillOpacity1, fillColor:'white', } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent); console.log("Snow Layer On"); }, smoothFactor: smooth }); if (length_check != ""){ sn.addTo(snLayer); console.log("Snow Layer has points!"); map.addLayer(snLayer); } }); // Draw flood layer ################################################################### //$.getJSON(dir + "eroD" + day + ".json", function(data) { $.getJSON(dir + "ERODay" + day + ".geojson", function(data) { var ero = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'red', fillOpacity: 1, fillPattern: flood_stripes, } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.PRODUCT + "</br>" + feature.properties.VALID_TIME + "</br>" + feature.properties.OUTLOOK); console.log("Flash Flood Layer is ON"); } }); if (length_check != ""){ console.log("Flash Flood Layer has points!"); ero.addTo(Floodlayer); map.addLayer(Floodlayer); types.push("Heavy Rain/Flash Flooding Possible"); } }); // Draw fire layer ################################################################### //$.getJSON(dir + "fwxD" + day + ".json", function(data) { $.getJSON(dir + "FWXDay" + day + ".geojson", function(data) { var fwx = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'black', fillOpacity: 1, fillPattern: fwx_stripes, } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup("<center>Critical Fire Weather Risk Area. For latest information, refer to the<br><a href=https://www.spc.noaa.gov/products/fire_wx/overview.html>Storm Prediction Center</a>."); } }); if (length_check != ""){ fwx.addTo(Firelayer); map.addLayer(Firelayer); types.push("Critical Fire Weather Possible"); } }); // Draw winter layer ################################################################### $.getJSON(dir + "wwD" + day + ".json", function(data) { var winter = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'black', fillOpacity: 1, fillPattern: hs_stripes, } return feature.properties && style; }, onEachFeature: function (feature, layer) { console.log("Heavy Snow Layer is ON"); length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent); } }); if (length_check != ""){ console.log("Heavy Snow Layer has points!"); winter.addTo(HsnowLayer); map.addLayer(HsnowLayer); types.push("Heavy Snow Possible"); } }); // Draw freezing rain layer ################################################################### $.getJSON(dir + "zrD" + day + ".json", function(data) { var zr = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: '#DF65B0', fillOpacity: 1, fillPattern: zr_stripes, } return feature.properties && style; }, onEachFeature: function (feature, layer) { console.log("Freezing Rain Layer is ON"); length_check = feature.geometry.coordinates; layer.bindPopup(feature.properties.popupContent); } }); if (length_check != ""){ console.log("Freezing Rain Layer has points!"); zr.addTo(Icelayer); map.addLayer(Icelayer); types.push("Freezing Rain Possible"); } }); // Draw severe layer ################################################################## //$.getJSON(dir + "svrD" + day + ".json", function(data) { $.getJSON(dir + "SWODay" + day + ".geojson", function(data) { var svr = L.geoJson(data, { style: function (feature) { style = { weight: 1, opacity: 1, color: 'yellow', fillOpacity: 1, fillPattern: svr_stripes, } return feature.properties && style; }, onEachFeature: function (feature, layer) { length_check = feature.geometry.coordinates; layer.bindPopup("<center>Slight Risk area for severe storms. For latest information, refer to the<br><a href=https://www.spc.noaa.gov/products/outlook/>Storm Prediction Center</a>."); console.log("Severe Thunderstorms Layer is ON"); } }); if (length_check != ""){ console.log("Severe Thunderstorm Layer has points!"); svr.addTo(SPClayer); map.addLayer(SPClayer); types.push("Severe Thunderstorms Possible"); } }); // Update date control info.update(num); exInfo.update(num); // Get data from tropical points ################################################################### $(document).ready(function () { // Get Tropical information from generated json file $.getJSON(dir + "tropical" + day + ".json", function(data) { console.log(data); data.features.forEach(function (feature) { var name = feature.properties.name; var lat = feature.properties.lat; var lon = feature.properties.lon; var micon = feature.properties.Icon; console.log(name); console.log(micon); var tropicon = new WxIcon({iconUrl: micon,iconSize:[45,45]}); L.marker([lat,lon],{icon:tropicon}).addTo(trop_markers).bindPopup("<center>For latest advisory please refer to the<br><a href=https://www.nhc.noaa.gov/>National Hurricane Center</a>."); trop_markers.addTo(map); L.marker([lat,lon], {icon: createIcon(name)}).addTo(LabelLayer); LabelLayer.addTo(map); }); }); }); //########################################################################################################################## // add fronts/ highs/ lows to map map.addLayer(Frontlayer); } function getCurvePoints(pts, tension, isClosed, numOfSegments) { var points = []; for (i=0; i < pts.length; i++) { points.push([pts[i][0]]); points.push([pts[i][1]]) } pts = points; // use input value if provided, or use a default value tension = (typeof tension != 'undefined') ? tension : 0.5; isClosed = isClosed ? isClosed : false; numOfSegments = numOfSegments ? numOfSegments : 16; var _pts = [], res = [], // clone array x, y, // our x,y coords t1x, t2x, t1y, t2y, // tension vectors c1, c2, c3, c4, // cardinal points st, t, i; // steps based on num. of segments // clone array so we don't change the original _pts = pts.slice(0); // The algorithm require a previous and next point to the actual point array. // Check if we will draw closed or open curve. // If closed, copy end points to beginning and first points to end // If open, duplicate first points to beginning, end points to end if (isClosed) { _pts.unshift(pts[pts.length - 1]); _pts.unshift(pts[pts.length - 2]); _pts.unshift(pts[pts.length - 1]); _pts.unshift(pts[pts.length - 2]); _pts.push(pts[0]); _pts.push(pts[1]); } else { _pts.unshift(pts[1]); //copy 1. point and insert at beginning _pts.unshift(pts[0]); _pts.push(pts[pts.length - 2]); //copy last point and append _pts.push(pts[pts.length - 1]); } // ok, lets start.. // 1. loop goes through point array // 2. loop goes through each segment between the 2 pts + 1e point before and after for (i=2; i < (_pts.length - 4); i+=2) { for (t=0; t <= numOfSegments; t++) { // calc tension vectors t1x = (_pts[i+2] - _pts[i-2]) * tension; t2x = (_pts[i+4] - _pts[i]) * tension; t1y = (_pts[i+3] - _pts[i-1]) * tension; t2y = (_pts[i+5] - _pts[i+1]) * tension; // calc step st = t / numOfSegments; // calc cardinals c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1; c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st; c4 = Math.pow(st, 3) - Math.pow(st, 2); // calc x and y cords with common control vectors x = c1 * _pts[i] + c2 * _pts[i+2] + c3 * t1x + c4 * t2x; y = c1 * _pts[i+1] + c2 * _pts[i+3] + c3 * t1y + c4 * t2y; //store points in array res.push([x, y]); } } return res; } </script> </div>  </div>      <div class="footer"> <div class="footer-content"> <div class='footer-header'> Quick Links and Additional Resources<br> </div>  <div class='footer-column-left'> <div class = 'footer-column-head'>NWS Regional and Forecast Offices<br></div> <a href="https://weather.gov/erh" target="_blank">Eastern Region</a><br> <a href="https://weather.gov/srh" target="_blank">Southern Region</a><br> <a href="https://weather.gov/crh" target="_blank">Central Region</a><br> <a href="https://weather.gov/wrh" target="_blank">Western Region</a><br> <a href="https://weather.gov/arh" target="_blank">Alaska Region</a><br> <a href="https://weather.gov/prh" target="_blank">Pacific Region</a><br> <a href="http://www.nws.noaa.gov/organization.php#maps" target="_blank">NWS Local Offices</a><br> <a href="http://water.weather.gov/ahps/rfc/rfc.php" target="_blank">River Forecast Centers</a><br> <a href="http://www.nws.noaa.gov/aviation/pages/CWSU/CWSU.php" target="_blank">Center Weather Service Units</a><br> <a href="http://water.noaa.gov" target="_blank">National Water Center</a><br> </div> <div class='footer-column'> <div class='footer-column-head'>Observations and Forecasts<br></div> <a href="http://www.wpc.ncep.noaa.gov/archives/web_pages/wpc_arch/get_wpc_archives.php" target="_blank">WPC Product Archives</a><br> <a href="http://www.weather.gov/Radar" target="_blank">Radar</a><br> <a href="http://www.star.nesdis.noaa.gov/GOES/GOES16_CONUS.php" target="_blank">GOES-East Satellite</a><br> <a href="http://www.goes.noaa.gov/goes-w.html" target="_blank">GOES-West Satellite</a><br> <a href="http://www.nesdis.noaa.gov" target="_blank">Satellite and Information Service</a><br> <a href="http://www.ncdc.noaa.gov" target="_blank">National Climatic Data Center</a><br> <a href="http://weather.noaa.gov/international.html" target="_blank">International Weather</a><br> <a href="http://worldweather.wmo.int" target="_blank">World Forecasts</a><br> <a href="http://www.wpc.ncep.noaa.gov/html/calc.shtml" target="_blank">Meteorological Calculators</a><br> </div> <div class='footer-column'> <div class='footer-column-head'>Weather Awareness<br></div> <a href="http://www.floodsafety.noaa.gov/" target="_blank">Floods</a><br> <a href="http://www.weather.gov/om/winter" target="_blank">Winter Weather</a><br> <a href="http://www.weather.gov/om/heat" target="_blank">Heat</a><br> <a href="http://www.weather.gov/safety" target="_blank">Weather Safety</a><br> <a href="http://www.weather.gov/stormready" target="_blank">Storm Ready</a><br> <a href="http://www.nws.noaa.gov/com/weatherreadynation" target="_blank">Weather Ready Nation</a><br> <a href="http://www.fema.gov" target="_blank">FEMA</a><br> <a href="http://www.weather.gov/nwr" target="_blank">NOAA Weather Radio</a><br> </div> <div class='footer-column-right'> <div class='footer-column-head'>About WPC<br></div> <a href="/para/para_includes/wpc_flyer.pdf" target="_blank">WPC Flyer</a><br> <a href="/html/fcst2.shtml" target="_blank">Mission & Vision</a><br> <a href="/html/WPC_history.pdf" target="_blank">History</a><br>  <a href="/staff/wpc_staff.shtml" target="_blank">Staff</a><br> <a href="/para/para_includes/WPC_Student_Opportunities.pdf" target="_blank">Student Opportunities at WPC</a><br> <a href="/mail_webmaster" target="_blank">Contact Us</a><br> <br> <div class='footer-column-head'>Social Media<br></div> <a href="https://www.facebook.com/NWSWPC" target="_blank">Facebook</a><br> <a href="https://x.com/NWSWPC" target="_blank">X</a><br> </div> </div> </div>   <div class="footer-legal"> <div class="footer-legal-content"> <div class="footer-legal-gov"> <a href="http://www.usa.gov"><img src="/para/para_css/images/usa_gov.png" alt="usa.gov" width="110" height="30"></a> </div> <div class="footer-legal-column"> <p> <a href="http://www.commerce.gov">US Dept of Commerce</a><br> <a href="http://www.noaa.gov">NOAA</a>/<a href="http://www.weather.gov.gov">NWS</a>/<a href="http://www.ncep.noaa.gov/">NCEP</a><br> Weather Prediction Center<br> 5830 University Research Court<br> College Park, MD 20740<br> <a href='http://www.wpc.ncep.noaa.gov/mail_webmaster/'>Weather Prediction Center Web Team</a> </p> </div> <div class="footer-legal-column2"> <a href="http://www.weather.gov/disclaimer">Disclaimer</a><br> <a href="http://www.cio.noaa.gov/Policy_Programs/info_quality.html">Information Quality</a><br> <a href="http://www.weather.gov/help">Help</a><br> <a href="http://www.weather.gov/glossary">Glossary</a> </div> <div class="footer-legal-column3"> <a href="http://www.weather.gov/privacy">Privacy Policy</a><br> <a href="http://www.rdc.noaa.gov/~foia">Freedom of Information Act (FOIA)</a><br> <a href="http://www.weather.gov/about">About Us</a><br> <a href="http://www.weather.gov/careers">Career Opportunities</a> </div> </div> </div> </body>

CINXE.COM

Weather Prediction Center