/* Script percentile.js
Goal is to control visualization of KML overlays on PWPF Google Maps interface.
This will include percentile accumulation 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.
*/
percentile_divs = new Array("p05","p10","p25","p50","p75","p90","p95");
percentiles = new Array("05", "10", "25", "50", "75", "90", "95");
function initialize (ptype,fcstpd,filelist) {
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 and the mouse on/off option.
opacity = "60";
mouse_opt = "on";
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('percentile','initload',ptype,fcstpd,filelist);
}
/****************************** 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 'percentile' or 'fhr'. 'percentile' is sent at initial onload and if user selects a percentile
* 'fhr' is sent if user selects an ending valid time to view all percentiles.
* -- 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-, 72-hour percentile 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 (the rollover tab)
* -- The forecast hour
* -- ID of the rollover tab whose background color will change
* -- 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-, 72-hour percentile 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) {
// Set 3 array variables based on whether the ptype is snow or ice...and whether we are looking at 24-, 48- or 72-hour accumulation periods.
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;
}
// Check the "Accumulation by Percentile" radio button
document.selector.product_choice[1].checked=true;
var init_td_id = 'td1_50';
var init_tnum = 'p50';
if ( fcstpd == "24" ) {
var init_fhr = "024";
document.selector.duration_choice[0].checked = true;
} else if ( fcstpd == "48" ) {
var init_fhr = "048";
document.selector.duration_choice[1].checked = true;
} else {
var init_fhr = "072";
document.selector.duration_choice[2].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") {
var opac = 60;
//document.getElementById('map_overlay').checked = false;
document.getElementById('states_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');
/* -------------------------------------------------------------------------------------------------------------------
* 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 == "percentile") {
// Find which threshold was chosen
for (var i=0; i < document.percentile_select.percentile_choice.length; i++) {
if (document.percentile_select.percentile_choice[i].checked) {
var selindex = document.percentile_select.percentile_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) {
if (mouse_opt == "off" && method == "mouseover") {
return;
}
if (typeof(newkml) != "undefined"){newkml.hide();}
var flarray = filelist.split(',');
if ( whichload == "initload" ) {
if (fcstlength != 72) {
document.hour_select.reset();
}
document.percentile_select.reset();
document.change_opacity.reset();
}
viewtype = tnumid.substring(0,1);
if (viewtype == "p") {
chosen_percentile = 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 {
tabnum = tdid.substring(2,3) - 1;
chosen_percentile = percentiles[tabnum];
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.percentile_select.reset();
document.percentile_select.percentile_choice[3].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";
} else {
pngtxt = "Ice";
clrbar += "\"/images/pctl_gmaps_icez_clrbar_opaque.png\">";
}
document.getElementById('overmap').innerHTML=clrbar;
document.getElementById('logos').innerHTML = ""
legendlink = "";
document.getElementById('legend').innerHTML=legendlink;
/********************* */
/* 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 = "";
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 percentile selected.
for (var i=0; i < document.percentile_select.percentile_choice.length; i++) {
if (document.percentile_select.percentile_choice[i].checked) {
var selindex = document.percentile_select.percentile_choice[i].value;
}
}
var td_id = "td1" + "_" + selindex;
var tnum_id = "p" + selindex;
show_tab(td_id, '072', tnum_id, ptype, filelist, fcstpd, 'inpage', selected_opacity);
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<=percentile_divs.length; cnt++) {
ptr_thold = cnt - 1;
selected_id = "td" + i + "_" + percentiles[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
if ( td_id == "none" ) {
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=percentile_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];
var tnum_id = "p" + td_id.substring(4,6);
}
show_tab(td_id, fhr, tnum_id, ptype, filelist, fcstpd, 'inpage', selected_opacity, method);
}
/*************************************************************************************************************
*
* FUNCTION toggle_contours
*
* Toggles the contours of the percentiles on or off
*
***************************************************************************************************************/
function toggle_contours (ptype, filelist, fcstpd) {
var flarray = filelist.split(',');
if (fcstpd == "72") {
// Find percentile selected.
for (var i=0; i < document.percentile_select.percentile_choice.length; i++) {
if (document.percentile_select.percentile_choice[i].checked) {
var chosen_percentile = document.percentile_select.percentile_choice[i].value;
}
}
var fhr = "072";
var inittime = filelist.substring(0,10);
var filefhr = "f072";
} 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<=percentile_divs.length; cnt++) {
ptr_thold = cnt - 1;
selected_id = "td" + i + "_" + percentiles[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
if ( td_id == "none" ) {
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=percentile_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 pctindx = td_id.substring(2,3) - 1;
var chosen_percentile = percentiles[pctindx];
var tnumid = td_id.substring(4,10);
for (cnt=0; cnt 4) {
var fname_cntr = "percentile_" + fcstpd + "h" + ptype + chosen_percentile + "_" + inittime + filefhr + "_cntr.kml?rev=16";
} else {
//var fname_cntr = "percentile_" + fcstpd + "h" + ptype + chosen_percentile + "_" + inittime + "f" + fhr + "_cntr_lesslabels.kml?rev=16";
var fname_cntr = "percentile_" + fcstpd + "h" + ptype + chosen_percentile + "_" + inittime + filefhr + "_cntr.kml?rev=16";
}
var urlcntr = "http://origin.wpc.ncep.noaa.gov/pwpf_" + fcstpd + "hr/kml/" + ptype + "/" + fname_cntr;
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/pwpf_esri/" + 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/pwpf_esri/" + 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);
}
}
|