/* 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) {
// Incorporate July 2013 changes to Google Maps.
google.maps.visualRefresh = true;
// Set starting variables for the map center and the minimum zoom level, as well as KML layers.
map = null;
minZoomLevel = 4;
pwpfkml = null;
pwpfcontour = null;
mapCenter = new google.maps.LatLng(37.00, -96.00);
// Set initial map options below. Not allowing Streetview and setting the initial display to a terrain map.
mapOptions = {
center: mapCenter,
zoom: 4,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Set custom styles for the Google Map - turn off labels for the country names
styles = [
{
featureType: "administrative.country",
elementType: "labels.text",
stylers: [
{ visibility: "off" }
]
}
];
// When display changes from one day or threshold to the next, make sure that the display does not reset to
// the full U.S. Keep display area the same and let user change as they wish.
pwpfkmlOptions = {
preserveViewport: true
};
// Global variable to represent the opacity of the KML being viewed.
opacity = "60";
// Global variable to represent the mouseover function.
mouse_opt = "on";
fhr_divs = new Array("fpd096","fpd120","fpd144","fpd168");
fhrlist = new Array("096","120","144","168");
lastpd = 4;
// Call the "select_parameter" function, which will set additional variables and call the show_tab function.
select_parameter('thold','initload',filelist,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, filelist, 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.
//
var init_fhr = "096";
var init_td_id = 'td1';
var init_tnum='t1';
// 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;
}
}
// 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
*/
var opac = 60;
document.getElementById('map_overlay').checked = false;
//document.getElementById('county_overlay').checked = false;
document.mouseover_status.mouse_over.selectedIndex = 0;
show_tab(init_td_id, init_fhr, init_tnum, filelist, 'initload', opac, 'mouseover');
}
}
// ----------------------------- End select_parameter function ----------------
/********************************************* FUNCTION show_tab ************************************************************
This script is called from "select_parameter" if a user clicks on a button under "Viewing Options on the page
or if a user mouses over a forecast period/day or threshold.
The purpose is two-fold. First to correctly change the color/background color of the forecast period or
threshold displayed. And second to display the proper KML on the Google Map.
tdid -- For thresholds --> 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, filelist, whichload, opacity, method) {
if (mouse_opt == "off" && method == "mouseover") {
return;
}
var flarray = filelist.split(',');
if ( whichload == "initload" ) {
document.change_opacity.reset();
document.TimeZone.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;
selindex = tnumid.substring(1,3);
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);
}
var fpd_fname = 24;
// Initialize the color of all tab text to white (these are the rollover tabs). Not for the 72-hour prob.
for (i=1; i<= lastpd; i++) {
//ptr_thold = cnt - 1;
ptr_fpd = i - 1;
tholdid = "td" + i;
document.getElementById(tholdid).style.color = "white";
document.getElementById(tholdid).style.backgroundColor="#0A2390";
document.getElementById(tholdid).style.cursor="default";
}
// Set the chosen
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";
// Get opacity level from button value.
if ( opacity == 'xxx' ) {
for (var i=0; i < document.change_opacity.opacity_choice.length; i++) {
if (document.change_opacity.opacity_choice[i].checked) {
opacity = document.change_opacity.opacity_choice[i].value;
}
}
}
/********************* */
/* TWO WAYS TO VIEW THE MAPS...VIA GOOGLE MAPS AND VIA GIFS. BELOW HANDLES GOOGLE MAPS VIEWING OPTIONS */
// Set which div blocks display.
document.getElementById('testmap').style.display = "block";
document.getElementById('showgifs').style.display = "none";
document.getElementById('mapOverlaySection').style.display = "block";
document.getElementById('opacity_display').style.display = "block";
document.getElementById('map_overlay').disabled=false;
//document.getElementById('county_overlay').disabled=false;
// Get the KML file name to view
//fname="medr_pwpf_24h_" + fullddatecycle + filefhr + "_" + opacity + "pct.kml?rev=8";
//url = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname;
fname="prb_24hsnow_ge01_2015100112f072_60pct.kml?rev=9";
url = "http://origin.wpc.ncep.noaa.gov/wwd/.pwpf_d47/" + fname;
//alert(url);
// Load the map.
// If this is the initial page load, then create a new map.
if ( whichload == "initload" ) {
map = new google.maps.Map(document.getElementById("testmap"), mapOptions);
pwpfkml = new google.maps.KmlLayer(url, pwpfkmlOptions);
fname_cntr="medr_pwpf_24h_" + fullddatecycle + filefhr + "_cntr.kml?rev=7";
urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
pwpfcontour = new google.maps.KmlLayer(urlcntr, pwpfkmlOptions);
// If NOT the initial page load, then first remove the KML layer and set map center/zoom to
// that previously viewed by the user. Also, set a variable to the contour URL. If user has selected contours on,
// need to carry this forward.
} else {
mapOptions.center = map.getCenter();
mapOptions.zoom = map.getZoom();
pwpfkml.setMap(null);
pwpfcontour.setMap(null);
pwpfkml = new google.maps.KmlLayer(url, pwpfkmlOptions);
if (document.getElementById('map_overlay').checked == true) {
fname_cntr="medr_pwpf_24h_" + fullddatecycle + filefhr + "_cntr.kml?rev=7";
urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
pwpfcontour = new google.maps.KmlLayer(urlcntr, pwpfkmlOptions);
}
}
// Set map options (e.g. turn off the country names.
map.setOptions({styles: styles});
// Add the filled KML layer if opacity is NOT 0.
if (opacity != 0) {
pwpfkml.setMap(map);
}
// Stop user from zooming out past level 4.
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) {
map.setZoom(minZoomLevel);
}
if (document.getElementById('map_overlay').checked == true) {
fname_cntr="medr_pwpf_24h_" + fullddatecycle + filefhr + "_cntr.kml?rev=7";
urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
mapOptions.center = map.getCenter();
mapOptions.zoom = map.getZoom();
pwpfcontour.setMap(null);
pwpfcontour = new google.maps.KmlLayer(urlcntr, pwpfkmlOptions);
pwpfcontour.setMap(map);
}
});
/* In order to make sure that the contours draw AFTER the filled areas draw, we need to "listen" for 'metadata_changed',
which somehow is an indicator that the pwpfkml layer has drawn. Then clear the listener...and draw the contour layer.
*/
if (document.getElementById('map_overlay').checked == true) {
if (opacity != 0) {
var listener1 = google.maps.event.addListener(pwpfkml, 'metadata_changed', function() {
google.maps.event.clearListeners(pwpfkml, 'metadata_changed');
pwpfcontour.setMap(map);
});
} else {
pwpfcontour.setMap(null);
pwpfcontour.setMap(map);
}
}
}
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;
}
}
// 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++) {
selected_id = "td" + i;
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];
var tnum_id = "t1";
}
var amnt="null";
show_tab(td_id, fhr, tnum_id, filelist, 'inpage', selected_opacity, method, amnt);
}
function toggle_contours (ptype, filelist, fcstpd) {
var flarray = filelist.split(',');
/* 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++) {
selected_id = "td" + i;
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 |