/* Script pwpf.js
Goal is to control visualization of KML overlays on PWPF Google Maps interface.
This will include probabilistic forecasts of snow and ice.
Log:
M. Klein 07/09/2013 Creation.
*/
/**************************** PAGE SETUP INFO ******************************************
* The page essentially has two sections; one where the user can choose a certain threshold...the other where
* they can choose a valid ending time period
* Multiple
tags with different ids are written to separate out the options. For thresholds:
* - the main div is "txx" where xx is 01,02,04,08, etc...
* - the individual tabs are "tdp_xx where p is 1,2,3 (representing the forecast period).
* xx is 01,02,04,08, etc... for the thresholds
*
* For forecast days/time periods:
* - the main divs are fpd024, fpd030, etc... to fpd072 representing the forecast period
* - the individual tabs are "tdp_fpd024, tdp_fpd048, etc... where p represents the threshold number
* e.g. p=1 is t01 for 24-hour snow, p=2 is t02, p=3 is t04 and so on.
*/
/***************************** FUNCTION initialize ************************************************************
*
* This function is called on page load from wwd_prob.php. It sets several global variables/arrays that
* will be used in later functions.
*/
function initialize (ptype,fcstpd,filelist, amt, day) {
require([
"esri/map", "esri/layers/KMLLayer", "dojo/parser", "dojo/dom-style", "dojo/domReady!"
], function(
Map, KMLLayer
) {
map = new Map("map", {
basemap: "topo",
center: [-96.00, 37.00],
zoom: 4
});
});
// Global variable to represent the opacity of the KML being viewed.
opacity = "60";
// Global variable to represent the mouseover function.
mouse_opt = "on";
if (ptype == "snow" ) {
if ( fcstpd == "24" ) {
accums = new Array("01","02","04","06","08","12","18");
thold_divs = new Array("t01","t02","t04","t06","t08","t12","t18");
} else {
accums = new Array("02","04","08","12","18", "24","30");
thold_divs = new Array("t02","t04","t08","t12","t18", "t24","t30");
}
} else {
if ( fcstpd == "24" ) {
accums = new Array("01","10","25","50");
thold_divs = new Array("t01","t10","t25","t50");
} else {
accums = new Array("10","25","50","100");
thold_divs = new Array("t10","t25","t50","t100");
}
}
if ( fcstpd == 24 ) {
fhr_divs = new Array("fpd024","fpd030","fpd036","fpd042","fpd048","fpd054","fpd060","fpd066","fpd072");
fhrlist = new Array("024","030","036","042","048","054","060","066","072");
lastpd = 9;
} else if ( fcstpd == "48" ) {
fhr_divs = new Array("fpd048","fpd054","fpd060","fpd066","fpd072");
fhrlist = new Array("048","054","060","066","072");
lastpd = 5;
} else {
fhr_divs = new Array("fpd072");
fhrlist = new Array("072");
lastpd = 1;
}
// Call the "select_parameter" function, which will set additional variables and call the show_tab function.
select_parameter('thold','initload',ptype,fcstpd,filelist, amt, day);
}
/****************************** FUNCTION select_parameter **************************************************************************
*
* This function is called at body onload and whenever a user changes the radio button selection
* Arguments sent to this function:
* -- viewing_option: Either 'thold' or 'fhr'. 'thold' is sent at initial onload and if user selects an accumulation threshold
* 'fhr' is sent if user selects a forecast period to view all thresholds.
* -- whichload: Determines whether this function is called when the page initially loads OR if it's called using the radio
* buttons on the page.
* -- ptype: Precipitation type. Either 'snow' or 'icez'
* -- fcstpd: The forecast length, 24-, 48- or 72-hour probabilities or accumulations.
* -- filelist: A list of comma-delimited entries corresponding to the file names that we may display. (Format is 2013080712f024...)
*
* The function calls function "show_tab", sending the following information:
* -- ID of the div block that will be displayed (this div block is associated with the mouseover tabs of period or threshold)
* -- The forecast hour (024 --> 072 hours)
* -- ID of the rollover tab whose background color will change (this specific table column containing the selected period or threshold)
* -- Indication if this is the initial page load
* -- ptype: Precipitation type. Either 'snow' or 'icez'
* -- filelist: A list of comma-delimited entries corresponding to the file names that we may display. (Format is 2013080712f024...)
* -- fcstpd: The forecast length, 24-, 48-, or 72-hour probabilities or accumulations.
* -- opacity: The level of opacity displaying (0-100 in 20% increments)
* -- method: Whether users select the tab via mouseover or click.
*/
function select_parameter(viewing_option, whichload, ptype, fcstpd, filelist, amt, day) {
// Set 3 array variables based on whether the ptype is snow or ice...and whether we are looking at 24- or 48-hour totals.
if (ptype == "snow" ) {
document.selector.ptype_choice[0].checked=true;
document.selector.ptype_choice[1].checked=false;
} else {
document.selector.ptype_choice[0].checked=false;
document.selector.ptype_choice[1].checked=true;
}
if ( fcstpd == "24" ) {
var init_fhr = "024";
var init_td_id = 'td1_01';
var init_tnum = 't01';
document.selector.duration_choice[0].checked = true;
} else if ( fcstpd == "48" ) {
var init_fhr = "048";
if (ptype == "snow" ) {
var init_td_id = 'td1_02';
var init_tnum = 't02';
} else {
var init_td_id = 'td1_10';
var init_tnum = 't10';
}
document.selector.duration_choice[1].checked = true;
} else {
var init_fhr = "072";
if (ptype == "snow" ) {
var init_td_id = 'td1_02';
var init_tnum = 't02';
} else {
var init_td_id = 'td1_10';
var init_tnum = 't10';
}
document.selector.duration_choice[2].checked = true;
}
// Check the Probability Forecasts radio button.
document.selector.product_choice[0].checked=true;
// Get opacity level from radio buttons.
for (var i=0; i < document.change_opacity.opacity_choice.length; i++) {
if (document.change_opacity.opacity_choice[i].checked) {
var opac = document.change_opacity.opacity_choice[i].value;
}
}
if (fcstpd == "24" || fcstpd == "48") {
// Get whether we are accessing via mouseover or click.
var opt = document.mouseover_status.mouse_over.selectedIndex;
mouse_opt = document.mouseover_status.mouse_over.options[opt].value;
if ( mouse_opt == "on" ) {
var way = "mouseover";
} else {
var way = "click";
}
}
//----------------------------------------------------------------------------------------
// On initial body onload...call function to show Day 1 prob snow >= 1 inch by default
if (whichload == "initload") {
/* Run the section below if the user is coming from the main winter weather page and
chooses one of the thumbnail images
*/
if (fcstpd == "24" && amt != "null" && day != "null") {
if (day == 1) {
document.threshold_select.threshold_choice[0].checked = true;
} else if (day == 2) {
var init_td_id = 'td5_01';
document.threshold_select.threshold_choice[0].checked = true;
} else if (day == 3) {
var init_td_id = 'td9_01';
document.threshold_select.threshold_choice[0].checked = true;
}
// Run the section below if user chooses a threshold from the WWD page
// Snow situations
} else if (fcstpd == "24" && amt != "null") {
if (amt == 1 || amt == 01) {
document.threshold_select.threshold_choice[0].checked = true;
} else if (amt == 2) {
var init_td_id = 'td1_02';
var init_tnum = 't02';
document.threshold_select.threshold_choice[1].checked = true;
} else if (amt == 4) {
var init_td_id = 'td1_04';
var init_tnum = 't04';
document.threshold_select.threshold_choice[2].checked = true;
} else if (amt == 6) {
var init_td_id = 'td1_06';
var init_tnum = 't06';
document.threshold_select.threshold_choice[3].checked = true;
} else if (amt == 8) {
var init_td_id = 'td1_08';
var init_tnum = 't08';
document.threshold_select.threshold_choice[4].checked = true;
} else if (amt == 12) {
var init_td_id = 'td1_12';
var init_tnum = 't12';
document.threshold_select.threshold_choice[5].checked = true;
} else if (amt == 18) {
var init_td_id = 'td1_18';
var init_tnum = 't18';
document.threshold_select.threshold_choice[6].checked = true;
// Ice situations
} else if (amt == 10) {
var init_td_id = 'td1_10';
var init_tnum = 't10';
document.threshold_select.threshold_choice[1].checked = true;
} else if (amt == 25) {
var init_td_id = 'td1_25';
var init_tnum = 't25';
document.threshold_select.threshold_choice[2].checked = true;
} else if (amt == 50) {
var init_td_id = 'td1_50';
var init_tnum = 't50';
document.threshold_select.threshold_choice[3].checked = true;
}
// Run the section below if user chooses a DAY from the WWD page
} else if (fcstpd == "24" && amt == "null") {
/* Need to force the correct radio button to be checked...so set them all to false and
whichever day is chosen, set that one to true. */
for (var i=0; i < document.hour_select.hour_choice.length; i++) {
document.hour_select.hour_choice[i].checked = false;
}
if (day == 1) {
var init_td_id = 'td1_fpd024';
var init_tnum = 'fpd024';
document.hour_select.hour_choice[0].checked = true;
} else if (day == 2) {
var init_td_id = 'td1_fpd048';
var init_tnum = 'fpd048';
document.hour_select.hour_choice[4].checked = true;
} else {
var init_td_id = 'td1_fpd072';
var init_tnum = 'fpd072';
document.hour_select.hour_choice[8].checked = true;
}
}
var opac = 60;
//document.getElementById('map_overlay').checked = false;
document.getElementById('states_overlay').checked = true;
//document.getElementById('interstate_overlay').checked = false;
//document.getElementById('artcc_overlay').checked = false;
// On first page load, set Google maps view as default
document.ui.viewing_format[0].checked=true;
if (fcstpd == "24" || fcstpd == "48") {
document.mouseover_status.mouse_over.selectedIndex = 0;
}
show_tab(init_td_id, init_fhr, init_tnum, ptype, filelist, fcstpd, 'initload', opac, 'mouseover', amt, day);
/* -------------------------------------------------------------------------------------------------------------------
* If NOT the initial load of the page, the following will run if the user picks an accumulation amount under
* "Viewing Options" (1", 2", 4", etc...)
*/
} else if (viewing_option == "thold") {
// Find which threshold was chosen
for (var i=0; i < document.threshold_select.threshold_choice.length; i++) {
if (document.threshold_select.threshold_choice[i].checked) {
var selindex = document.threshold_select.threshold_choice[i].value;
}
}
if (fcstpd != 72) {
// Find which time period is being displayed. When user changes threshold, we want the day to remain constant.
// We will do this by determining the text color of the column. If it's "blue", then that period is active.
/* CASE 1: User is currently on a threshold and selects a different threshold
This case will *NOT* work if the user is currently viewing all thresholds for a
given day. See case #2 below.
*/
var idfound = "no";
for (i=1; i<=lastpd; i++) {
for (cnt=0; cnt
td1_01, td2_01, td3_01 (i.e. td[day]_[threshold])
For time pds --> td1_fpd024, td2_fpd024 (i.e. td[threshold_counter]_fpd[024,048,072]
tnumid -- For thresholds --> t01,t02, etc (i.e. t[threshold])
For time pds --> fpd024, fpd048, (i.e. fpd[fhr])
*/
function show_tab(tdid, fcsthr, tnumid, preciptype, filelist, fcstlength, whichload, opacity, method, amt, day) {
if (mouse_opt == "off" && method == "mouseover") {
return;
}
if (typeof(newkml) != "undefined"){newkml.hide();}
var flarray = filelist.split(',');
if ( whichload == "initload" ) {
if (fcstlength != 72 && day == "null") {
document.hour_select.reset();
}
if (fcstlength == 72 || fcstlength == 48 || amt == "null") {
document.threshold_select.reset();
}
document.change_opacity.reset();
}
// tnumid will be t01,t02, etc... if thresholds chosen under "Viewing options".
// tnumid will be fpd024,fpd048, etc... if a day/period is chosen under "Viewing options"
var viewtype = tnumid.substring(0,1);
var fhr = "f" + fcsthr;
if (preciptype == "snow" ) {
pngtxt = "Snow";
selindex = tnumid.substring(1,3);
var ptype_fname = "snow";
if (viewtype == "t" ) {
thold = tnumid.substring(1,3);
var fileindex = tdid.substring(2,3) - 1;
var fl = flarray[fileindex];
var fullddatecycle = fl.substring(0,10);
var filefhr = "f" + fl.substring(11,14);
} else {
var thold_active_id = tdid.substring(2,3);
var tptr = thold_active_id - 1;
thold = accums[tptr];
for (cnt=0; cnt ids for the thresholds (t01, t02, t04, etc...) to display --> none.
for (cnt=0; cnt ids for the days/periods (fpd024,fpd048,fpd072) to display --> none.
for (cnt=0; cnt attributes (change text color and background color.
document.getElementById(tnumid).style.display = "block";
document.getElementById(tdid).style.backgroundColor="#C0E0EE";
document.getElementById(tdid).style.color="blue";
} else {
document.getElementById(tnumid).style.display = "block";
document.getElementById(tdid).style.backgroundColor="#0A2390";
document.getElementById(tdid).style.color="white";
}
// If a Day is chosen, make sure to clear all radio button selections.
// If a threshold is chosen, make sure to clear all the Day options.
if (viewtype == "f" ) {
document.threshold_select.reset();
document.threshold_select.threshold_choice[0].checked = false;
} else if (fcstlength != 72 ) {
document.hour_select.reset();
document.hour_select.hour_choice[0].checked = false;
}
/* IF PARAMETER CHOSEN IS A "THRESHOLD" (Also the default on initial page load)
* The following sets display characteristics of the chosen valid period rollover label for a given threshold
* For 24-hour PWPF, there'll be 3 periods, for the 48-hour, only 2
*/
// Initialize the color of all tab text to white (these are the rollover tabs).
// if (viewtype == "t") {
//for (i=1; i<= lastpd; i++) {
// for (cnt=1; cnt"
// Attempt to add in the legend at bottom.
legendlink = "";
document.getElementById('legend').innerHTML=legendlink;
toggle_overlays('states');
/********************* */
/* BELOW HANDLES GIF VIEWING OPTIONS */
} else {
document.getElementById('map').style.display = "none";
document.getElementById('overmap').style.display = "none";
document.getElementById('logos').style.display = "none";
document.getElementById('legend').style.display = "none";
document.getElementById('showgifs').style.display = "block";
document.getElementById('mapOverlaySection').style.display = "none";
document.getElementById('opacity_display').style.display = "none";
imglink = "";
//imglink = "";
//alert(imglink);
document.getElementById('showgifs').innerHTML=imglink;
}
}
function changeViewingParameters(ptype, filelist, fcstpd) {
// Get value of the opacity
for (var i=0; i < document.change_opacity.opacity_choice.length; i++) {
if (document.change_opacity.opacity_choice[i].checked) {
var selected_opacity = document.change_opacity.opacity_choice[i].value;
}
}
// Hit the 72-hour case first...which is easier..
if (fcstpd == "72") {
// Find chosen accumulation selected.
for (var i=0; i < document.threshold_select.threshold_choice.length; i++) {
if (document.threshold_select.threshold_choice[i].checked) {
var chosen_accum = document.threshold_select.threshold_choice[i].value;
}
}
var td_id = "td1" + "_" + chosen_accum;
var tnum_id = "t" + chosen_accum;
var amnt = "null";
show_tab(td_id, '072', tnum_id, ptype, filelist, fcstpd, 'inpage', selected_opacity, amnt);
return;
}
// 24 AND 48-HOUR PROBABILITY CASES.....
// Get whether we are accessing via mouseover or click.
var opt = document.mouseover_status.mouse_over.selectedIndex;
mouse_opt = document.mouseover_status.mouse_over.options[opt].value;
if ( mouse_opt == "on" ) {
var method = "mouseover";
} else {
var method = "click";
}
/* Want to find which forecast is currently displayed, so that when the opacity changes, we don't
reset the page. To find this, we'll search for which text within the elements is
colored blue. ONLY that id is active.
*/
var td_id = "none";
// Below works if current viewing option show times across the top tabs.
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = cnt - 1;
selected_id = "td" + i + "_" + accums[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
// Below works if current viewing option shows thresholds across the top tabs.
if ( td_id == "none" ) {
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = i - 1;
selected_id = "td" + cnt + "_" + fhr_divs[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
}
var fpdpos = td_id.search("fpd");
if (fpdpos > 0 ) {
var fhr = td_id.substring(7,10);
var tnum_id = td_id.substring(4,10);
} else {
var fhrindx = td_id.substring(2,3) - 1;
var fhr = fhrlist[fhrindx];
// Find chosen accumulation selected.
for (var i=0; i < document.threshold_select.threshold_choice.length; i++) {
if (document.threshold_select.threshold_choice[i].checked) {
var chosen_accum = document.threshold_select.threshold_choice[i].value;
}
}
var tnum_id = "t" + chosen_accum;
}
var amnt="null";
show_tab(td_id, fhr, tnum_id, ptype, filelist, fcstpd, 'inpage', selected_opacity, method, amnt);
}
function toggle_contours (ptype, filelist, fcstpd) {
var flarray = filelist.split(',');
if (fcstpd == "72") {
// Find chosen accumulation selected.
for (var i=0; i < document.threshold_select.threshold_choice.length; i++) {
if (document.threshold_select.threshold_choice[i].checked) {
var chosen_thold = document.threshold_select.threshold_choice[i].value;
}
}
var filefhr = "f072";
var inittime = filelist.substring(0,10);
} else {
/* Want to find which forecast is currently displayed, so that when the opacity changes, we don't
reset the page. To find this, we'll search for which text within the | elements is
colored blue. ONLY that id is active.
*/
var td_id = "none";
// Below works if current viewing option show times across the top tabs.
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = cnt - 1;
selected_id = "td" + i + "_" + accums[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
// Below works if current viewing option shows thresholds across the top tabs.
if ( td_id == "none" ) {
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = i - 1;
selected_id = "td" + cnt + "_" + fhr_divs[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
}
var fpdpos = td_id.search("fpd");
if (fpdpos > 0 ) {
var fhr = td_id.substring(7,10);
var thold_indx = td_id.substring(2,3) - 1;
var chosen_thold = accums[thold_indx];
var tnumid = td_id.substring(4,10);
for (cnt=0; cnt 4) {
var fname = "prb_" + fcstpd + "h" + ptype + "_ge" + chosen_thold + "_" + inittime + filefhr + "_cntr.kml";
} else {
var fname = "prb_" + fcstpd + "h" + ptype + "_ge" + chosen_thold + "_" + inittime + filefhr + "_cntr_lesslabels.kml";
}
var urlcntr = "http://origin.wpc.ncep.noaa.gov/pwpf_" + fcstpd + "hr/kml/" + ptype + "/" + fname;
mapOptions.center = map.getCenter();
mapOptions.zoom = map.getZoom();
pwpfcontour.setMap(null);
pwpfcontour = new google.maps.KmlLayer(urlcntr, pwpfkmlOptions);
pwpfcontour.setMap(map);
google.maps.event.addListener(map, 'zoom_changed', function () {
if (document.getElementById('map_overlay').checked == true) {
if (map.getZoom() > 4) {
var fname = "prb_" + fcstpd + "h" + ptype + "_ge" + chosen_thold + "_" + inittime + filefhr + "_cntr.kml";
} else {
var fname = "prb_" + fcstpd + "h" + ptype + "_ge" + chosen_thold + "_" + inittime + filefhr + "_cntr_lesslabels.kml";
}
var urlcntr = "http://origin.wpc.ncep.noaa.gov/pwpf_" + fcstpd + "hr/kml/" + ptype + "/" + fname;
mapOptions.center = map.getCenter();
mapOptions.zoom = map.getZoom();
pwpfcontour.setMap(null);
pwpfcontour = new google.maps.KmlLayer(urlcntr, pwpfkmlOptions);
pwpfcontour.setMap(map);
}
});
} else {
pwpfcontour.setMap(null);
}
*/
if (document.getElementById('states_overlay').checked == true) {
var ofilename = 'states_overlay.kml';
require(["esri/layers/KMLLayer", "esri/map"], function(KMLLayer) {
var overlayUrl = "http://origin.wpc.ncep.noaa.gov/pwpf/" + ofilename;
var newLayer;
overlaykml = new KMLLayer(overlayUrl);
overlaykml.on("load", function() {
overlayLayer = overlaykml.getLayers();
});
map.addLayer(overlaykml);
});
} else if (document.getElementById('states_overlay').checked == false && typeof(overlaykml) != "undefined") {
map.removeLayer(overlaykml);
}
}
function toggle_overlays(whichoverlay) {
if (document.getElementById('states_overlay').checked == true) {
var ofilename = 'states_overlay.kml';
require(["esri/layers/KMLLayer", "esri/map"], function(KMLLayer) {
var overlayUrl = "http://origin.wpc.ncep.noaa.gov/pwpf/" + ofilename;
var newLayer;
overlaykml = new KMLLayer(overlayUrl);
overlaykml.on("load", function() {
overlayLayer = overlaykml.getLayers();
});
map.addLayer(overlaykml);
});
} else if (document.getElementById('states_overlay').checked == false && typeof(overlaykml) != "undefined") {
map.removeLayer(overlaykml);
}
}
|