// FUNCTION to create the marker and set up the event window
function createWindMarker(point,label,html,html2,notes,wind,tooltiptext) {
// create new icon for the marker
var icon = new GIcon(baseIcon);
icon.image = "http://www.windonthewater.com/g_icons/m" + wind + ".png";
var marker = new GMarker(point, icon);
// === store the name so that the tooltip function can use it ===
marker.tooltip = '
'+tooltiptext+'
';
GEvent.addListener(marker, "click", function() {
if (notes != "") {
// notes += " ";
marker.openInfoWindowTabsHtml([new GInfoWindowTab("today",html), new GInfoWindowTab("yesterday",html2), new GInfoWindowTab("Notes",notes)]);
// get the html from a php file, will be more uptodate..
// update the marker if it is a meso and the data is older..hmm..need to fetch the data..?
//marker.setImage("coldmarker.png");
} else {
if (html2 != "") {
marker.openInfoWindowTabsHtml([new GInfoWindowTab("today",html), new GInfoWindowTab("yesterday",html2)]);
} else { // used for cams and simple windows
marker.openInfoWindowHtml(html);
}
}
});
gmarkers[i] = marker;
htmls[i] = html;
htmls2[i] = html2;
notess[i] = notes;
side_bar_html += '' + label + ' ';
i++;
map.addOverlay(marker);
// ====== The new marker "mouseover" and "mouseout" listeners ======
GEvent.addListener(marker,"mouseover", function() {
showTooltip(marker);
});
GEvent.addListener(marker,"mouseout", function() {
tooltip.style.visibility="hidden"
});
return marker;
}
function createDirMarker(point,angle,color) {
// create new icon for the marker
var icon = new GIcon(baseDirIcon);
icon.image = "http://www.windonthewater.com/g_icons/m" + color + "-" + angle + ".png";
var marker = new GMarker(point, icon);
return marker;
}
// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a side_bar mouseover
function showTooltip(marker) {
tooltip.innerHTML = marker.tooltip;
var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
var anchor=marker.getIcon().iconAnchor;
var width=marker.getIcon().iconSize.width;
var height=tooltip.clientHeight;
var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height));
pos.apply(tooltip);
tooltip.style.visibility="visible";
}
// ===== This function is invoked when the mouse goes over an entry in the side_bar =====
// It launches the tooltip on the icon
function mymouseover(i) {
showTooltip(gmarkers[i])
}
// ===== This function is invoked when the mouse leaves an entry in the side_bar =====
// It hides the tooltip
function mymouseout() {
tooltip.style.visibility="hidden";
}
// This function picks up the side_bar click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
/*
if (notess[i] != "") {
gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab("today",htmls[i]), new GInfoWindowTab("yesterday",htmls2[i]), new GInfoWindowTab("Notes",notess[i])]);
} else {
if (htmls2[i] != "") {
gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab("today",htmls[i]), new GInfoWindowTab("yesterday",htmls2[i])]);
// marker.openInfoWindowTabsHtml([new GInfoWindowTab("today",html), new GInfoWindowTab("yesterday",html2)]);
} else { // used for cams and simple windows
gmarkers[i].openInfoWindowHtml(htmls[i]);
// marker.openInfoWindowHtml(html);
}
}
*/
}
// pressure markers
function pressure(region) {
// urchinTracker('/js/' + region + '/pressure');
pageTracker._trackPageview('/js/' + region + '/pressure');
// hide the info window, otherwise it still stays open where the removed marker used to be
map.getInfoWindow().hide();
map.clearOverlays();
// empty the array
gmarkers = [];
// reset the side_bar
side_bar_html="";
document.getElementById("side_bar").innerHTML = "Loading.... ";
// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "xx-xml-p.php?s=" + region + "&" + new Date().getTime(), true);
// request.open("GET", "xml/" + region + "-pressure.xml?" + new Date().getTime(), true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
// two types here..
// add graph img..
// pass the date to the graph function
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
if (day < 10){
day = "0" + day;
}
if (month < 10){
month = "0" + month;
}
var today = year + "." + month + "." + day;
var yesterdayTime = new Date();
yesterdayTime.setDate(yesterdayTime.getDate() - 1);
var month = yesterdayTime.getMonth() + 1;
var day = yesterdayTime.getDate();
var year = yesterdayTime.getFullYear();
if (day < 10){
day = "0" + day;
}
if (month < 10){
month = "0" + month;
}
var yesterday = year + "." + month + "." + day;
var site1 = markers[i].getAttribute("site1");
if (site1 == "single") {
var label = markers[i].getAttribute("label");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var pressure = parseFloat(markers[i].getAttribute("pressure"));
var tooltip = markers[i].getAttribute("tooltip");
var timestamp = markers[i].getAttribute("timestamp");
var currentTime = new Date();
var curtimestamp = .001 * currentTime.getTime(); // milliseconds to seconds
var timesincelast = Math.round((curtimestamp - timestamp)/60-600); // seconds to minutes - 10 minutes(for some reason)
html = tooltip + "(Updated " + timesincelast + "min ago)";
// html += " ";
// don't want to cache this one, updates frequently
html += " ";
// caching on this one is ok (speed things up a bit
var html2 = "
"
var marker = createWindMarker(point,label,html,html2,"","-2",tooltip);
map.addOverlay(marker);
} else {
var site2 = markers[i].getAttribute("site2");
var lat1 = parseFloat(markers[i].getAttribute("lat1"));
var lng1 = parseFloat(markers[i].getAttribute("lng1"));
var lat2 = parseFloat(markers[i].getAttribute("lat2"));
var lng2 = parseFloat(markers[i].getAttribute("lng2"));
var point1 = new GLatLng(lat1,lng1);
var point2 = new GLatLng(lat2,lng2);
var html = markers[i].getAttribute("html");
var s1 = markers[i].getAttribute("s1");
var s2 = markers[i].getAttribute("s2");
var angle = markers[i].getAttribute("angle");
var label = markers[i].getAttribute("label");
var pressure1 = markers[i].getAttribute("pressure1");
var pressure2 = markers[i].getAttribute("pressure2");
var pressure_diff = markers[i].getAttribute("pressure_diff");
pressure_diff = pressure_diff.replace(/-/,""); // some error here.. it is null?
var wind = markers[i].getAttribute("wind");
var tooltip = markers[i].getAttribute("tooltip");
var offset = parseFloat(markers[i].getAttribute("offset"));
var timestamp = parseFloat(markers[i].getAttribute("timestamp"));
var localTime = new Date(); // gets current timestamp in client browser
var localTimestamp = .001 * localTime.getTime(); // milliseconds to seconds
var localOffset = secondsFromGMT();
var timesincelast = Math.round((localTimestamp - timestamp - localOffset)/60-600); // seconds to minutes - 10 minutes(for some reason)
// var timestamp = markers[i].getAttribute("timestamp");
// var currentTime = new Date();
// var curtimestamp = .001 * currentTime.getTime(); // milliseconds to seconds
// var timesincelast = Math.round((curtimestamp - timestamp)/60-600); // seconds to minutes - 10 minutes(for some reason)
html = tooltip + "(Updated " + timesincelast + "min ago)";
html += " ";
// caching on this one is ok (speed things up a bit
var html2 = "
";
// marker with correct direction in the middle..
// draw a line between the two......
var pts = [];
pts[1] = new GLatLng(lat1,lng1);
pts[2] = new GLatLng(lat2,lng2);
map.addOverlay(new GPolyline(pts,"#008800",3));
var latmid = (lat1 + lat2) / 2;
var lngmid = (lng1 + lng2) / 2;
var midpoint = new GLatLng(latmid,lngmid);
if (timesincelast > 300) {
// if out of date don't display number on icon
html += " OUT OF DATE";
var marker = createDirMarker(midpoint,1,""); // PRESSURE
map.addOverlay(marker);
var marker = createWindMarker(midpoint,label,html,html2,"","",tooltip);
map.addOverlay(marker);
}
else {
var marker = createDirMarker(midpoint,angle,""); // PRESSURE
map.addOverlay(marker);
var marker = createWindMarker(midpoint,label,html,html2,"",pressure_diff,tooltip);
map.addOverlay(marker);
}
// var label = parseFloat(markers[i].getAttribute("label"));
// var lat = parseFloat(markers[i].getAttribute("lat"));
// var lng = parseFloat(markers[i].getAttribute("lng"));
// var point = new GLatLng(lat,lng);
// var pressure = parseFloat(markers[i].getAttribute("pressure"));
// var tooltip = markers[i].getAttribute("tooltip");
// var timestamp = markers[i].getAttribute("timestamp");
// var marker = createWindMarker(point,label,html,"","","-2",tooltip);
// map.addOverlay(marker);
}
}
document.getElementById("side_bar").innerHTML = side_bar_html;
document.getElementById("about").innerHTML = "";
}
}
request.send(null);
}
// wind markers
function wind(region) {
// urchinTracker('/js/' + region + '/wind');
pageTracker._trackPageview('/js/' + region + '/wind');
document.getElementById("topbutton").innerHTML = 'Loading';
// hide the info window, otherwise it still stays open where the removed marker used to be
map.getInfoWindow().hide();
map.clearOverlays();
// empty the array
gmarkers = [];
// reset the side_bar
side_bar_html="";
document.getElementById("side_bar").innerHTML = "Loading.... ";
// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "xx-xml-w.php?s=" + region + "&" + new Date().getTime(), true);
// request.open("GET", "xml/" + region + ".xml?"+ new Date().getTime(), true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
//var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var id = markers[i].getAttribute("id");
var label = markers[i].getAttribute("label");
var wind = markers[i].getAttribute("wind");
var angle = markers[i].getAttribute("angle");
var tooltip = markers[i].getAttribute("tooltip");
var notes = markers[i].getAttribute("notes");
var offset = parseFloat(markers[i].getAttribute("offset"));
var age = parseFloat(markers[i].getAttribute("age"));
var timestamp = parseFloat(markers[i].getAttribute("timestamp"));
// var localTime = new Date(); // gets current timestamp in client browser
// var localTimestamp = .001 * localTime.getTime(); // milliseconds to seconds
// var localOffset = secondsFromGMT();
// var timesincelast = Math.round((localTimestamp - timestamp - localOffset)/60-600); // seconds to minutes - 10 minutes(for some reason)
// html += " (Updated " + timesincelast + "min ago)";
// add graph img..
// pass the date to the graph function
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
if (day < 10){
day = "0" + day;
}
if (month < 10){
month = "0" + month;
}
// var today = "2007.06.10";
var today = year + "." + month + "." + day;
var yesterdayTime = new Date();
yesterdayTime.setDate(yesterdayTime.getDate() - 1);
var month = yesterdayTime.getMonth() + 1;
var day = yesterdayTime.getDate();
var year = yesterdayTime.getFullYear();
var myDays=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var yDay = yesterdayTime.getDay();
yDay = myDays[yDay];
if (day < 10){
day = "0" + day;
}
if (month < 10){
month = "0" + month;
}
var yesterday = year + "." + month + "." + day;
// don't want to cache this one, updates frequently
// html += " ";
html += " ";
// caching on this one is ok (speed things up a bit
var html2 = "