/* 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.
M. Gerhardt 06/2016 Added State/County Overlays
*/
/**************************** 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.
*/
var map, kml;
var layers;
function initialize (ptype,fcstpd,filelist, amt, day, latest_fhr) {
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
});
var newkmlUrl = "http://origin.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/medr_pwpf_24h_2016013112f096_60pct.kml"
var newLayer;
newkml = new KMLLayer(newkmlUrl);
//map.addLayer(newkml);
/*
newkml.on("load", function() {
newLayer = newkml.getLayers();
});
*/
});
/*
// 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";
if (latest_fhr == 156) {
fhr_divs = new Array("fpd084","fpd108","fpd132","fpd156");
fhrlist = new Array("084","108","132","156");
} else {
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,latest_fhr);
}
/****************************** 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, latest_fhr) {
// 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 (latest_fhr == 156) {
var init_fhr = "084";
} else {
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") {
if (day == 4) {
if (latest_fhr == 156) {
var init_fhr = "084";
} else {
var init_fhr = "096";
}
var init_td_id = 'td1';
var init_tnum='t1';
} else if (day == 5) {
if (latest_fhr == 156) {
var init_fhr = "108";
} else {
var init_fhr = "120";
}
var init_td_id = 'td2';
var init_tnum='t1';
} else if (day == 6) {
if (latest_fhr == 156) {
var init_fhr = "132";
} else {
var init_fhr = "144";
}
var init_td_id = 'td3';
var init_tnum='t1';
} else if (day == 7) {
if (latest_fhr == 156) {
var init_fhr = "156";
} else {
var init_fhr = "168";
}
var init_td_id = 'td4';
var init_tnum='t1';
}
/* 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.getElementById('states_overlay').checked = false;
//document.getElementById('counties_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 (whichload!= "initload"){
if (mouse_opt == "off" && method == "mouseover") {
return;
}
}
if (typeof(newkml) != "undefined"){newkml.hide();}
if (typeof(contourkml) != "undefined"){contourkml.hide();}
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('map').style.display = "block";
document.getElementById('overmap').style.display = "block";
document.getElementById('legend').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
require(["esri/layers/KMLLayer", "esri/map"], function(KMLLayer) {
fname="medr_pwpf_24h_" + fullddatecycle + filefhr + "_" + opacity + "pct.kml";
newkmlUrl = "http://origin.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/" + fname;
var newLayer;
newkml = new KMLLayer(newkmlUrl);
newkml.on("load", function() {
newLayer = newkml.getLayers();
});
map.addLayer(newkml);
});
if (document.getElementById('map_overlay').checked == true) {
require(["esri/layers/KMLLayer", "esri/map"], function(KMLLayer) {
var fname = "medr_pwpf_24h_" + fullddatecycle + filefhr + "_cntr.kml";
var contourUrl = "http://origin.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/" + fname;
var newLayer2;
contourkml = new KMLLayer(contourUrl);
contourkml.on("load", function() {
newLayer2 = contourkml.getLayers();
});
map.addLayer(contourkml);
});
}
if (document.getElementById('states_overlay').checked == true) {
require(["esri/layers/KMLLayer", "esri/map"], function(KMLLayer) {
var overlayUrl = "http://origin.wpc.ncep.noaa.gov/wwd/pwpf_d47/" + ofilename;
var newLayer;
overlaykml = new KMLLayer(overlayUrl);
overlaykml.on("load", function() {
overlayLayer = overlaykml.getLayers();
});
map.addLayer(overlaykml);
});
}
/* 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";
//urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
urlcntr = "http://www.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/" + fname;
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";
//urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
urlcntr = "http://www.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/" + 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";
//urlcntr = "http://origin.wpc.ncep.noaa.gov/wwd/.virus/" + fname_cntr;
urlcntr = "http://www.wpc.ncep.noaa.gov/wwd/pwpf_d47/kml/" + 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);
}
}
*/
// Attempt to add in the legend at bottom
imglink = "";
document.getElementById('legend').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;
}
}
// 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 |