Experimental Beach Forecast Webpage (2024)

').css({ 'background': '#f00' ,'width': 100 ,'height': 100 }) .text("BUTTON!"); ol.control.Control.call(this, { element: $button[0], target: options.target }); }; ol.inherits(forecastLabel, ol.control.Control);*/ var map = new ol.Map({/* controls: [ new forecastLabel(), ], controls: ol.control.defaults().extend([ new forecastLabel(), ]),*/ layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ attributions: [attribution], url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?appid=45ad401c-fa23-4a10-8b2f-a7ad29a3e2a0" }) }), new ol.layer.Tile({ source: new ol.source.XYZ({ attributions: [attribution], url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}?appid=45ad401c-fa23-4a10-8b2f-a7ad29a3e2a0" }) })/*, new ol.layer.Tile({ source: new ol.source.XYZ({ attributions: [attribution], url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}?appid=45ad401c-fa23-4a10-8b2f-a7ad29a3e2a0" }) })*/, new ol.layer.Vector({ source: new ol.source.Vector({ url: options.kmlUrl, format: new ol.format.KML() }) }), new ol.layer.Vector({ source: new ol.source.Vector({ features: beachPoints }) }) ], target: $('#' + options.map.canvasId)[0], controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), logo: false, view: new ol.View({ center: ol.proj.fromLonLat([parseFloat(options.map.lon), parseFloat(options.map.lat)], 'EPSG:3857'), zoom: options.map.zoom }) }); if (otherSites) { $.each(otherSites, function (i, item) { adjacentSite = otherSites[i][0]; log(otherSites[i][0].toUpperCase() + " is an adjacent site."); adjacentKmlUrl = "/source/" + adjacentSite + "/beachforecast/SRF.kml"; log("Checking " + adjacentSite.toUpperCase() + " KML expiration"); $.ajax({ url: adjacentKmlUrl, async: false }).done(function(data, status, jqXHR) { if (checkKMLExpiration (jqXHR)) { log("Loading KML at /source/" + otherSites[i][0] + "/beachforecast/SRF.kml"); var otherSitesKML = new ol.layer.Vector({ source: new ol.source.Vector({ url: "/source/" + otherSites[i][0] + "/beachforecast/SRF.kml", format: new ol.format.KML() }) }); map.addLayer(otherSitesKML); document.getElementById(otherSites[i][1]).innerHTML = ""; } else { log("Invalid KML expiration"); } }).fail(function(x, status) { log (adjacentSite.toUpperCase() + " KML failed to load"); }); }); } map.on('pointermove', function(e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { if (feature.get('type') === 'beachPoint') { displayForecast(feature.get('loc'), feature.get('id'), feature.get('name')); } else { // presume KML click var zoneDetails = '

'; zoneDetails += '

'+feature.get('description')+'

'; $('#riskDetailsModal').modal(); document.getElementById("riskDetailsModal").innerHTML = zoneDetails; } } }); if(!validData) { $('#beachForecastMapLabel') .attr('src', options.siteImagePath + 'srfLabel_expired.png') .show(); $('#beachForecastMapOL').css('opacity', .2); $('#riskDetails').html("Notice!
The beach foreach for this area is not valid or expired.") map.removeLayer(map.getLayers().item(2)); map.getInteractions().forEach(function(interaction) { map.removeInteraction(interaction); }, this); map.getControls().forEach(function(control) { map.removeControl(control); }, this); } } function displayForecast(loc, id, name) { log("Forecast for " + loc + ", " + id + " (" + name + ")"); $('#beachForecastOverlay') .click(function () { hideForecast(); }) .show(); $('#beachForecastOverlayContent').show(); var $forecast = $('#beachForecastTemplate'); // if different location than previous click if (id != currentForecastId) { currentForecastId = id; updateForecastMessage(0); // have to used secondary deferreds to because jQuery stops any one promise fails var $forecastDeferred = $.Deferred(); var $beachesDeferred = $.Deferred(); $.ajax({ url: '//forecast.weather.gov/MapClick.php', jsonp: 'callback', dataType: 'jsonp', data: { FcstType: 'json', lon: loc[0], lat: loc[1] } }).complete($forecastDeferred.resolve); $.ajax({ url: options.siteSourcePath + "/beaches.json", dataType: 'json' }).complete($beachesDeferred.resolve); $.when($forecastDeferred, $beachesDeferred) .done(function(forecast, beach) { if(forecast[1] == 'success') { forecast[0].done(function(data) { $forecast.find('#beachForecastTemplateWFO').text(data.productionCenter); $forecast.find('#beachForecastTemplateName').text(name); $forecast.find('#beachForecastTemplateUpdate').text(data.creationDateLocal); $forecast.find('#beachForecastTemplateExtendedContainer').html(buildForecastHTML(data)); }); if(beach[1] == 'success') { beach[0].done(function(data) { if(typeof data[id] !== 'undefined') { var beachData = data[id]; var $beachForecastTemplateSrfHTML = $forecast.find('#beachForecastTemplateSrf').append($('#beachForecastTemplateHTML-srf').clone()); $beachForecastTemplateSrfHTML.find('#beachForecastTemplateSrfSurf') .find('.beachForecastTemplateSrfTitle') .css({ 'background-color': rip[beachData.riprisk].color }) .end() .find('.beachForecastTemplateSrfLevel') .html($('#riskTable-' + beachData.riprisk + ' .riskTableLevel').html()) .end() .find('.beachForecastTemplateSrfContent') .html($('#riskTable-' + beachData.riprisk + ' .riskTableDescription').html()) .end() .find('.beachForecastTemplateSrfBackgrounds') .css({ 'border-color': rip[beachData.riprisk].color }); $beachForecastTemplateSrfHTML.find('#beachForecastTemplateSrfUV') .each(function() { var $template = $(this); if(typeof beachData.uvindex !== 'undefined') { $template .find('.beachForecastTemplateSrfTitle') .css({ 'background-color': uvindex[beachData.uvindex].color }) .end() .find('.beachForecastTemplateSrfLevel') .html($('#uvTable-' + beachData.uvindex + ' .uvTableRisk').html()) .end() .find('.beachForecastTemplateSrfContent') .html($('#uvTable-' + beachData.uvindex + ' .uvTableDescription').html()) .end() .find('.beachForecastTemplateSrfBackgrounds') .css({ 'border-color': uvindex[beachData.uvindex].color }); } else { $template.hide(); } }); $beachForecastTemplateSrfHTML.find('#beachForecastTemplateSrfTemperature') .each(function() { var $template = $(this); if(typeof beachData.surftemp !== 'undefined') { $template .find('.beachForecastTemplateSrfTitle') .css({ 'background-color': '#66CCFF' }) .end() .find('.beachForecastTemplateSrfContent') .html(beachData.surftemp) .end(); } else { $template.hide(); } }); $beachForecastTemplateSrfHTML.find('#beachForecastTemplateSrfQRCode').append($('', {src:options.siteImagePath + 'qrcode.png'})); } else { log("Cannot find beach information for " + id); } }); } updateForecastMessage(); $('#beachForecastTemplate').show(); } else { updateForecastMessage(1); } }) } else { $('#beachForecastTemplate').show(); } } var forecastMessages = [ 'Retrieving forecast, please wait...', 'Error retrieving forecast, please close this message and try again.' ]; function updateForecastMessage(messageNumber) { if (!isNaN(messageNumber)) { $('#beachForecastMessage') .html(forecastMessages[messageNumber]) .show(); } else { $('#beachForecastMessage').hide(); } } $('#beachForecastOverlay').click(function() { hideForecast(); }); function hideForecast() { $('#beachForecastOverlay').hide(); $('#beachForecastOverlayContent').hide(); $('#beachForecastTemplate').hide(); } function buildForecastHTML(json) { var numPeriods = 7; var bodyText = ""; bodyText += '

'; bodyText += ''; for (var i = 0; i < numPeriods; i++) { var validName = json.time.startPeriodName[i].replace(/ /g,"
"); bodyText += ''; } bodyText += ''; for (var i = 0; i < numPeriods; i++) { var iconLink = json.data.iconLink[i].replace("http:","https:"); bodyText += ''; } bodyText += ''; for (var i = 0; i < numPeriods; i++) { var weatherText = json.data.weather[i]; if (json.data.weather[i].match(/^[a-zA-Z]* [a-zA-Z]* [a-zA-Z]*$/)) { var rgExp = /([a-zA-Z]*) ([a-zA-Z]*) ([a-zA-Z]*)/ var weatherText = json.data.weather[i].replace(rgExp,"$1 $2
$3"); } else if (json.data.weather[i].match(/^[a-zA-Z]* [a-zA-Z]*$/)) { var rgExp = /([a-zA-Z]*) ([a-zA-Z]*)/ var weatherText = json.data.weather[i].replace(rgExp,"$1
$2"); } bodyText += ''; } bodyText += ''; for (var i = 0; i < numPeriods; i++) { if (json.time.tempLabel[i] == "High") { var hiloColor = "red"; var hilo = "Hi" } else if (json.time.tempLabel[i] == "Low") { var hiloColor = "blue"; var hilo = "Lo" } else { var hiloColor = "black"; } bodyText += ''; } bodyText += '

'+validName+'

'+weatherText+'

'+hilo+''+json.data.temperature[i]+'°F

'; for (var i = 0; i < 7; i++) { bodyText += ''+json.time.startPeriodName[i]+':'+json.data.text[i]; bodyText += '

'; } bodyText += '

Point Forecast: '+json.location.areaDescription+'
'+json.location.latitude+''+json.location.longitude+'(Elev. '+json.location.elevation+' ft)

'; bodyText += 'Visit your local NWS office at https://www.weather.gov/'+json.location.wfo.toLowerCase()+'
'; //bodyText += 'or call us at '+phoneNum; //bodyText += ''; //bodyText += srfText; //bodyText += ''; return (bodyText); } function associateEvents() { $('#beachForecastTemplateAction-Print').click(function() { var divToPrint=document.getElementById('beachForecastTemplate'); newWin= window.open(""); newWin.document.write(divToPrint.outerHTML); var newWinHead = newWin.document.getElementsByTagName("head")[0]; var $arrStyleSheets = $('style, link'); $arrStyleSheets.each(function() { newWinHead.appendChild(this.cloneNode(true)); }); newWin.document.body.style.backgroundImage = "none"; newWin.document.body.style.backgroundColor = "#fff"; newWin.print(); newWin.close(); }); } function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } })();

UNDER DEVELOPMENT

The map below is color-coded to indicate the forecast rip current risk level. Click on the beach area of your choice for more information, or click a beach umbrella for the detailed, beach forecast. View the product description document for more information on the rip current graphic. Comments are currently being accepted.