![\"Zoom](\"./Images/map/zoomin.png\" "\\"Zoom")
<\/a>";
htmlString+="![\"Zoom](\"./Images/map/zoomout.png\" "\\"Zoom")
<\/a>";
for (i=1;i![\"Zoom](\"./Images/map/zoomlevel.png\" "\\"Zoom")
<\/a>";
}
htmlString+="![\"West\"](\"./Images/map/west1.png\" "\\"West\\"")
<\/a>";
htmlString+="![\"East\"](\"./Images/map/east1.png\" "\\"East\\"")
<\/a>";
htmlString+="![](\"./Images/map/north1.png\" "\\"North\\"")
<\/a>";
htmlString+="![](\"./Images/map/south1.png\" "\\"South\\"")
<\/a>";
htmlString+="![](\"./Images/map/southwest2.png\" "\\"Southwest\\"")
<\/a>";
htmlString+="![](\"./Images/map/southeast2.png\" "\\"Southeast\\"")
<\/a>";
htmlString+="![\"Northwest\"](\"./Images/map/northwest2.png\" "\\"Northwest\\"")
<\/a>";
htmlString+="![](\"./Images/map/northeast2.png\" "\\"Northeast\\"")
<\/a>";
}
if (wmsLayerInfo) {
//alert("creating the wmsLayerInfo table");
htmlString+="<\/div>";
}
if (statistics) {
//alert("creating the wmsLayerInfo table");
htmlString+="
<\/div>";
}
htmlString+="
";
htmlString+="
<\/div>";
htmlString+="
<\/div>";
htmlString+="
<\/div>";
//Another layer holds the selected points
htmlString+="
<\/div>";
htmlString+="
<\/div>";
htmlString+="
<\/div>";
/*
htmlString+="
";
htmlString+="";
htmlString+="<\/div>";
htmlString+="
";
htmlString+="![](\"./Images/map/cluster_trans.gif\")
";
htmlString+="
";
*/
if (legend) {
htmlString+="";
htmlString+="";
htmlString+="![](\""+iPath+"legend.png"+"\"</a)
";
htmlString+="<\/div>";
htmlString+="
";
htmlString+="<\/div>";
htmlString+="";
htmlString+="<\/div>";
}
if (coordDisplay) {
htmlString+="
";
htmlString+="";
htmlString+="<\/div>";
}
htmlString+="
";
htmlString+="![\"Loading...\"](\"./Images/map/loading-progress.gif\" "\\"Loading...\\"")
";
htmlString+="<\/div>";
htmlString+="<\/div>";
htmlString+="<\/div>";
//htmlString+="";
mapComp.innerHTML=htmlString;
}
function addStationInteractionControls() {
var div = null;
if (theOtherWMSLayer) {
div = document.getElementById('theOtherWMSLayerControlDiv');
if (div != null) {
div.style.visibility="visible";
div = document.getElementById('theOtherWMSLayerDiv');
if (div != null) {
div.innerHTML='';
}
}
}
if (navTools) {
div = document.getElementById('zoomDiv');
if (div != null) {
div.innerHTML='Zoom + Re-Center' +
'Re-Center';
}
}
if (!clusterSupress) {
div = document.getElementById('statInterObj');
if (div != null) {
div.innerHTML = 'On' +
'Off';
}
}
if (ptSelection) {
div = document.getElementById('statClickModeObj');
if (div != null) {
div.innerHTML = 'Homepage' +
'Select/Deselect' +
'';
}
}
}
//This function adds the elements for the map component, including select boxes,etc. It uses the settings in the config file
function addElements() {
addNavTools();
addMapComponents();
addStationInteractionControls();
mapLog.debug("Done adding html elements");
}
//This function preloads images, and stores symbology information
function prepareSymbology() {
var symbolInfo, layer, lyrName, theLayers,symbolFieldName;
var imageArray = new Array();
var symbolImage, tempChildNodeList, tempChildNode, tempSymbol;
//Preload the image icons for all layers, and populate symbology values arrays
for (i=0;i>","999",false,false)');
document.getElementById("mapStyleList").style.width="200px";;
}
mapLog.debug("perpareMapStyles: completed");
return defaultMapStyleString;
}//end prepare map styles
//This function parses the map style information and adds an option in the select box for each one
function prepareOtherMapStyles() {
var mapStyle,id,mapStyleName,wmsLayerString,defaultYesNo,defaultMapStyleString,valueString;
//if (document.navForm != null) {
var elem = document.getElementById("otherWMSLayerStyle");
for (i=0;i>","999",false,false);
elem.otherWMSLayerStyle.style.width="200px";
// eval('document.navForm.otherWMSLayerStyle.options[theOtherMapStyles.length] = new Option("GPS Velocities Test----->>","999",false,false)');
// eval('document.navForm.otherWMSLayerStyle.style.width="200px";');
}
//}
return defaultMapStyleString;
}//end prepare map styles
//This function parses the region information and adds an option in the select box for each one
function prepareRegions(defaultRegionName) {
var region,minx,maxx,miny,maxy,id,regionName,defaultRegionString,defaultYesNo;
var new_option, extentRatio,diffRatio,yShift,yShiftHalf;
//Add the options from the config file to the select box
for (i=0;imapSizeRatio) {
miny=miny+yShiftHalf;
maxy=maxy-yShiftHalf;
}
valueString = '"'+id + "," + minx + "," + maxx + "," + miny + "," + maxy+'"';
//alert(valueString);
//Check for the default region (it will be returned from this function, and executed on startup)
if (document.getElementById("aoiList") != null) {
if (defaultYesNo.toUpperCase()=="NO") {
document.getElementById("aoiList").options[i] = new Option(regionName,valueString,false,false);
} else {
document.getElementById("aoiList").options[i] = new Option(regionName,valueString,false,true);
defaultRegionString = valueString;
}//end if default startup option
} else {
//FIXME: Shouldn't this always be the case?
defaultRegionString = valueString;
}
}//end for each config layer
//alert(theRegions.length);
//eval('document.frmMapSelect.aoiList.options[theRegions.length] = new Option("Jump to Location---------->>","0",false,false)');
if (document.getElementById("aoiList") != null) {
document.getElementById("aoiList").options[theRegions.length] = new Option("-","0",false,false);
document.getElementById("aoiList").style.width="200px";
}
return defaultRegionString;
}
//This function parses the point layers information and adds an option in the select box for each one
function prepareLayers() {
var layer,id,lyrName,defaultLayerString,defaultYesNo,unique;
var new_option;
//Add the options from the config file to the select box
for (i=0;i>","999",false,false)');
if (theConfigLayers.length > 1) {
var lyrList = document.getElementById('lyrList');
if (lyrList != null) {
lyrList.style.width="200px";
}
//eval('document.navForm.lyrList.style.width="200px";');
}
mapLog.debug("prepareLayers: " + defaultLayerString);
return defaultLayerString;
}
//Display a small table showing how many of each point are on the map
function displayStatistics() {
var statObj = document.getElementById("statistics");
var htmlString="";
htmlString+="
";
//alert(htmlString);
//theWMSLayersInfo is the node list
statObj.innerHTML=htmlString;
statObj.style.visibility="visible";
}
//Display the WMS layer information, stored in the config file. Each map style has different wms layers, linked to the metadata by ID
function displayWMSLayerInfo(mapStyleString) {
//alert(mapStyleString);
var mapStyles=mapStyleString.substring(1,mapStyleString.length-1).split(",");
var id,lyrName,lyrNotes,layer;
var layerInfoObj = document.getElementById("wmsLayerInfo");
var htmlString="";
htmlString+="
";
//alert(htmlString);
//theWMSLayersInfo is the node list
layerInfoObj.innerHTML=htmlString;
layerInfoObj.style.visibility="visible";
}
//This function handles the mouse move event over the map(getting coordinate display,etc)
function mapMouseMove(e) {
var posx = 0;
var posy = 0;
var mapObj=document.getElementById("mapContainer");
var coordObj=document.getElementById("coord");
var offsetX=findPosX(mapObj);
var offsetY=findPosY(mapObj);
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
//Use the offset position figures of the element and subtract them from the x,y locations, which are relative to the document
//This gives us the true x,y location, inside the div element, of the mouse click (we need to use this to convert to map coords)
var mouseX=posx-offsetX;
var mouseY=posy-offsetY
//window.status=mouseX + "," + mouseY;
var mapXYString = getMapXY(mouseX,mouseY);
mapXYArray=mapXYString.split(",");
var mapX=parseFloat(mapXYArray[0]);
var mapY=parseFloat(mapXYArray[1]);
coordObj.innerHTML="X: " + mapX.toString().slice(0,7)+"
"+"Y: " + mapY.toString().slice(0,6); if (clusterSupress) { if (showAttTable(mapX,mapY)==true) { window.status=""; } else { window.status="Stations are clustered at this scale. Click to zoom-in for more detail and station attribute table."; } } //window.status="X: " + mapX.toString().slice(0,7) + " Y: " + mapY.toString().slice(0,6); } //Get the true x,y of the mouse click, inside the map div element, and then use it to ZOOM in and re-center the image function mapClick(e) { var posx = 0; var posy = 0; var mapObj=document.getElementById("mapContainer"); //Get the offset position of the map div element, for use to figure out the real x,y location in the element var offsetX=findPosX(mapObj); var offsetY=findPosY(mapObj); //Get the mouse click x,y position RELATIVE TO THE DOCUMENT if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft; posy = e.clientY + document.body.scrollTop; } //alert(mapObj.style.top); //alert(posx); //alert(posy); //Use the offset position figures of the element and subtract them from the x,y locations, which are relative to the document //This gives us the true x,y location, inside the div element, of the mouse click (we need to use this to convert to map coords) var mouseX=posx-offsetX; var mouseY=posy-offsetY var mapXYString = getMapXY(mouseX,mouseY); mapXYArray=mapXYString.split(","); var mapX=parseFloat(mapXYArray[0]); var mapY=parseFloat(mapXYArray[1]); var halfX = parseFloat(Math.abs(mapXDistance/2)); var halfY = parseFloat(Math.abs(mapYDistance/2)); var tempRight,tempLeft,tempTop,tempBottom,mapString; var tempXDistance, tempYDistance,tempHalfX,tempHalfY; //If user wants to zoom and re-center if (mapClickAction==1) { //If the level chosen is different from the previously selected level, and the level requested is greater than 1 and less than the number of levels if (currentZoomLevel\n\nleft: " + mapLeft + "\n"+"right: " + mapRight+ "\n"+ "bottom: " + mapBottom+ "\n" + "top: " + mapTop);
//Change the zoom level's width distance here, hard-coded in an array (defined at the top of this file, or thereabouts...use the config file for defining these things, if possible)
tempXDistance=zoomLevelDistanceArray[currentZoomLevel-1];
tempYDistance=tempXDistance*mapSizeRatio;
tempHalfX = parseFloat(Math.abs(tempXDistance/2));
tempHalfY = parseFloat(Math.abs(tempYDistance/2));
//alert(tempYDistance);
//alert("center point: " + mapX + "," + mapY);
tempLeft = mapX-(tempHalfX);
tempRight = mapX+(tempHalfX);
tempTop = mapY+(tempHalfY);
tempBottom = mapY-(tempHalfY);
//Correct the extent, if the map extent requested is beyond the "flat map extent" i.e. past -180, and above 180, etc
if (tempTop>90) {
tempTop=90;
tempBottom=90-tempYDistance;
}
if (tempBottom<-90) {
tempBottom=-90;
tempTop=-90 + tempYDistance;
}
if (tempLeft<-180) {
tempLeft=-180;
tempRight=-180+tempXDistance;
}
if (tempRight>180) {
tempRight=180;
tempLeft=180-tempXDistance;
}
//Update the zoom level, variable and icons
if (navTools) {
updateActiveZoom(currentZoomLevel);
}
//Put together the value string needed by the updateMap function
mapString='"'+'999' + "," + tempLeft + "," + tempRight + "," + tempBottom + "," + tempTop+'"';
//Call this function and redraw the map, and the currently selected point layer
var timeout=setTimeout("updateMap("+mapString+",lastPointLayer,lastOtherMapStyle);",0);
//updateMap(mapString,lastPointLayer,lastOtherMapStyle);
}//end if check that the level chosen is different
} else if (mapClickAction==2) {
showLoading();
//Reset the jump to location extent select box...because the user is using the zoom tools
updateDefaultSelections();
//Just recenter around clicked coordinate
tempLeft = mapX-(halfX);
tempRight = mapX+(halfX);
tempTop = mapY+(halfY);
tempBottom = mapY-(halfY);
//Correct the extent, if the map extent requested is beyond the "flat map extent" i.e. past -180, and above 180, etc
if (tempTop>90) {
tempTop=90;
tempBottom=90-mapYDistance;
}
if (tempBottom<-90) {
tempBottom=-90;
tempTop=-90 + mapYDistance;
}
if (tempLeft<-180) {
tempLeft=-180;
tempRight=-180+mapXDistance;
}
if (tempRight>180) {
tempRight=180;
tempLeft=180-mapXDistance;
}
//Put together the value string needed by the updateMap function
mapString='"'+'999' + "," + tempLeft + "," + tempRight + "," + tempBottom + "," + tempTop+'"';
//Call this function and redraw the map, and the currently selected point layer
var timeout=setTimeout("updateMap("+mapString+",lastPointLayer,lastOtherMapStyle);",0);
}//if user wants to zoom AND re-center
}//end function mapClick
//These functions are a cross-browser way to help get the offset of the current object (useful for finding the position of an element)
//Since our map windows, etc are relative, getting the position of the element requires this script (for non-ie browsers)
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function zoomInOutMap(zoomType) {
switch (zoomType) {
//Zoom in
case 1:
zoomLevel(currentZoomLevel+1);
break;
//Zoom Out
case 2:
zoomLevel(currentZoomLevel-1);
break;
default:
}
}//end function zoom
//Zoom to a specific level
function zoomLevel(level) {
if (level < 1 ) level = 1;
else if (level > numZoomLevels) level = numZoomLevels;
//If the level chosen is different from the previously selected level, and the level requested is greater than 1 and less than the number of levels
if (level!=currentZoomLevel && level>=1 && level<=numZoomLevels) {
var tempRight,tempLeft,tempTop,tempBottom,mapString;
var tempXDistance, tempYDistance,tempHalfX,tempHalfY;
var halfX = parseFloat(Math.abs(mapXDistance/2));
var halfY = parseFloat(Math.abs(mapYDistance/2));
//Get center point, so that we can zoom in or out from it
var mapX = parseFloat(mapRight-halfX);
var mapY = parseFloat(mapTop-halfY);
showLoading();
//Reset the jump to location extent select box...because the user is using the zoom tools
updateDefaultSelections();
//Change the zoom level's width distance here
tempXDistance=zoomLevelDistanceArray[level-1];
tempYDistance=tempXDistance*mapSizeRatio;
tempHalfX = parseFloat(Math.abs(tempXDistance/2));
tempHalfY = parseFloat(Math.abs(tempYDistance/2));
//alert(tempYDistance);
//alert("center point: " + mapX + "," + mapY);
tempLeft = mapX-(tempHalfX);
tempRight = mapX+(tempHalfX);
tempTop = mapY+(tempHalfY);
tempBottom = mapY-(tempHalfY);
//Correct the extent, if the map extent requested is beyond the "flat map extent" i.e. past -180, and above 180, etc
if (tempTop>90) {
tempTop=90;
tempBottom=90-tempYDistance;
}
if (tempBottom<-90) {
tempBottom=-90;
tempTop=-90 + tempYDistance;
}
if (tempLeft<-180) {
tempLeft=-180;
tempRight=-180+tempXDistance;
}
if (tempRight>180) {
tempRight=180;
tempLeft=180-tempXDistance;
}
//Update the zoom level, variable and icons
if (navTools) {
updateActiveZoom(level);
}
//alert("After->\n\nleft: " + tempLeft + "\n"+"right: " + tempRight+ "\n"+ "bottom: " + tempBottom+ "\n" + "top: " + tempTop);
//Put together the value string needed by the updateMap function
mapString='"'+'999' + "," + tempLeft + "," + tempRight + "," + tempBottom + "," + tempTop+'"';
//Call this function and redraw the map, and the currently selected point layer
var timeout=setTimeout("updateMap("+mapString+",lastPointLayer,lastOtherMapStyle);",0);
}//end if check that the level chosen is different
}//end function zoom level
//Pan the map.
function panMap(panType) {
showLoading();
var tempRight,tempLeft,tempTop,tempBottom,mapString;
var halfX = parseFloat(Math.abs(mapXDistance/2));
var halfY = parseFloat(Math.abs(mapYDistance/2));
//Update the jump to location select box, because we are
updateDefaultSelections();
switch (panType.toUpperCase()) {
case "W":
tempLeft=mapLeft-halfX;
tempRight=mapRight-halfX;
tempBottom=mapBottom;
tempTop=mapTop;
break;
case "E":
tempLeft=mapLeft+halfX;
tempRight=mapRight+halfX;
tempBottom=mapBottom;
tempTop=mapTop;
break;
case "S":
tempLeft=mapLeft;
tempRight=mapRight;
tempBottom=mapBottom-halfY;
tempTop=mapTop-halfY;
break;
case "N":
tempLeft=mapLeft;
tempRight=mapRight;
tempBottom=mapBottom+halfY;
tempTop=mapTop+halfY;
break;
case "SW":
tempLeft=mapLeft-halfX;
tempRight=mapRight-halfX;
tempBottom=mapBottom-halfY;
tempTop=mapTop-halfY;
break;
case "SE":
tempLeft=mapLeft+halfX;
tempRight=mapRight+halfX;
tempBottom=mapBottom-halfY;
tempTop=mapTop-halfY;
break;
case "NW":
tempLeft=mapLeft-halfX;
tempRight=mapRight-halfX;
tempBottom=mapBottom+halfY;
tempTop=mapTop+halfY;
break;
case "NE":
tempLeft=mapLeft+halfX;
tempRight=mapRight+halfX;
tempBottom=mapBottom+halfY;
tempTop=mapTop+halfY;
break;
default:
}//end switch
//This code checks if the user is trying to pan outside the extents, if so...it stops panning. This can be improved at some point, so that you could
//for example, pan west around the world (past -180) and it would be seamless. Just need to figure out the math to do so (use 360 degree model perhaps)
if (tempTop>90) {
tempTop=90;
tempBottom=90-mapYDistance;
}
if (tempBottom<-90) {
tempBottom=-90;
tempTop=-90 + mapYDistance;
}
if (tempLeft<-180) {
tempLeft=-180;
tempRight=-180+mapXDistance;
}
if (tempRight>180) {
tempRight=180;
tempLeft=180-mapXDistance;
}
mapString='"'+'999' + "," + tempLeft + "," + tempRight + "," + tempBottom + "," + tempTop+'"';
var timeout=setTimeout("updateMap("+mapString+",lastPointLayer,lastOtherMapStyle);",0);
}//end pan
//This function switches out the layers that we are selecting from the map service
//This is called when a different map style is chosen.
//In the future, if more than one map service is used, then this function should also switch the map service URL, rather than just the layers.
function changeMap(wmsLayers) {
if (wmsLayers!=999) {
lastMapStyle=wmsLayers;
var tempBefore,tempAfter,indexOfLayers;
var wmsLayerSelection = wmsLayers.substring(1,wmsLayers.length-1);
//Hide the hover dot and the attribute table
hidePointInfo();
//Clear the map image, and the map image, because we are about to redraw with new extents
var indexOfLayers = wmsBaseString.toUpperCase().indexOf("LAYERS=");
var tempBefore = wmsBaseString.substring(0,indexOfLayers+7);
var tempAfter = wmsBaseString.substring(tempBefore.length,wmsBaseString.length);
tempAfter = tempAfter.substring(tempAfter.indexOf("&"),tempAfter.length);
wmsBaseString=tempBefore+wmsLayerSelection+tempAfter;
var queryImgStr = wmsBaseString + mapLeft + "," + mapBottom + "," + mapRight + "," + mapTop + "&WIDTH=" + pixelWidth + "&HEIGHT=" + pixelHeight;
wmsCanvas.clear();
wmsCanvas.drawImage(queryImgStr, 0,0, pixelWidth+"px", pixelHeight+"px");
wmsCanvas.setColor("#0000ff");
//Draw map
wmsCanvas.paint();
if (wmsLayerInfo) {
displayWMSLayerInfo(document.getElementById("mapStyleList").value);
}
}
mapLog.debug("changeMap: completed");
}
//This function is called when changing the map styles for the "other" wms map service (this will need to be
//revisited if we ever adopt a true "multi-service" approach
function changeOtherMap(wmsLayers) {
mapLog.debug("changeOtherMap: start " + wmsLayers);
if (wmsLayers!=999) {
if (wmsLayers!='""') {
lastOtherMapStyle=wmsLayers;
var tempBefore,tempAfter,indexOfLayers;
var wmsLayerSelection = wmsLayers.substring(1,wmsLayers.length-1);
//Hide the hover dot and the attribute table
hidePointInfo();
//Clear the map image, and the map image, because we are about to redraw with new extents
otherWMSCanvas.clear();
var indexOfLayers = otherWMSBaseString.toUpperCase().indexOf("LAYERS=");
var tempBefore = otherWMSBaseString.substring(0,indexOfLayers+7);
var tempAfter = otherWMSBaseString.substring(tempBefore.length,otherWMSBaseString.length);
tempAfter = tempAfter.substring(tempAfter.indexOf("&"),tempAfter.length);
otherWMSBaseString=tempBefore+wmsLayerSelection+tempAfter;
var queryImgStr = otherWMSBaseString + mapLeft + "," + mapBottom + "," + mapRight + "," + mapTop + "&WIDTH=" + pixelWidth + "&HEIGHT=" + pixelHeight;
mapLog.debug("changeOtherMap: queryImgStr " + queryImgStr);
otherWMSCanvas.drawImage(queryImgStr, 0,0, pixelWidth+"px", pixelHeight+"px");
otherWMSCanvas.setColor("#0000ff");
//Draw map
otherWMSCanvas.paint();
} else {
otherWMSCanvas.clear();
}
}
}
//This function is called when the user changes the area of interest.
function updateMap(wmsInfo,lyrInfo,otherWMSInfo) {
mapLog.debug("updateMap: invoked with: " + wmsInfo + ":" + lyrInfo + ":" + otherWMSInfo);
var wmsInfoArray;
// Default to last layer used.
if (lyrInfo == null) {
lyrInfo = lastPointLayer;
}
if (wmsInfo == null) {
wmsInfoArray = lastWMSInfo;
} else {
//Changing from string to array
wmsInfoArray = checkWMSInfo(wmsInfo);
mapLog.debug("updateMap: after check: " + wmsInfoArray[0] + "," + wmsInfoArray[1] + "," + wmsInfoArray[2] + "," + wmsInfoArray[3] + "," + wmsInfoArray[4] );
if (wmsInfoArray) {
lastWMSInfo = wmsInfoArray;
} else {
mapLog.error("updateMap: checkWMSInfo found invalid info: " + wmsInfo);
}
}
mapLog.debug("updateMap: after updating defaults: " + wmsInfo + ":" + lyrInfo + ":" + otherWMSInfo);
if (lyrInfo!=999) {
lastPointLayer=lyrInfo;
if (wmsInfoArray){
updateBBoxFromWMSString(wmsInfoArray);
//alert("About to update Layers");
//alert("updateMap: calling updateLayers with: " + lastPointLayer + ", 'same'");
updateLayers(lastPointLayer,"same");
//alert("About to update WMSMap");
updateWMSMap(wmsInfoArray);
}
}
//mapLog.debug("updateMap: checking for other: " + theOtherWMSLayer + ":::" + otherWMSInfo);
if (theOtherWMSLayer && otherWMSInfo) {
lastOtherMapStyle=otherWMSInfo;
changeOtherMap(otherWMSInfo);
}
//If there are any selected points, we must re-calc and re-draw them
if (statSelArray.length!=0) {
redrawSelection();
}
hideLoading();
}
function checkWMSInfo(wmsInfo) {
// Make sure we have a least four ',' values
if (wmsInfo == null || wmsInfo.length < 4) {
return null;
} else {
// Looks like we sometimes have a quoted string and sometimes don't
// could be careful and only pull " off of beginning and end of string, but for now we'll kill 'em all
wmsInfo = wmsInfo.replace(/"/g, '');
var values = wmsInfo.split(',');
//alert(values.length + ": " + values[0]);
//Public call to this function, use some arbitrary mode, not map clicking
if (values.length==4) values.unshift(998);
//alert(values.length + ":" + values[0]);
if (values.length != 5) {
//alert("Incomplete WMS map information: " + wmsInfo);
mapLog.error("updateWMSMap: Incomplete WMS map information: " + wmsInfo);
return null;
}
}
return values;
}
function updateBBoxFromWMSString(wmsInfo) {
//Set global map extents
mapLeft=parseFloat(wmsInfo[1]);
mapRight=parseFloat(wmsInfo[2]);
mapBottom=parseFloat(wmsInfo[3]);
mapTop=parseFloat(wmsInfo[4]);
mapXDistance = Math.abs(mapRight-mapLeft);
mapYDistance = Math.abs(mapTop-mapBottom);
mapLog.debug("updateBBox: " + mapLeft + "," + mapRight + "," + mapBottom + "," + mapTop);
}
//This function finishes the assembly of the WMS request, and is used to get a map (for a given area)
function updateWMSMap(wmsInfo) {
//This if statement checks to see if the user is using the dynamic zoom tools (999) rather than the jump to location
//The for loop is checking the array which has the xDistance values for each zoom level...if the "jump to region" is in between a zoom level
//then...the next zoomed out level, is made to be the active one.
//if (navToolsYesNo.toUpperCase()=="YES") {
mapLog.debug("updateWMSMap: zoom level based on " + wmsInfo[0] + ":" + wmsInfo[0].type);
if (!(wmsInfo[0]==999 || wmsInfo[0]=='999') ) {
var i;
for (i=0;iparseFloat(zoomLevelDistanceArray[i+1])) {
var level=i+1;
mapLog.debug("updateWMSMap: decided to update zoom to level " + level);
updateActiveZoom(level);
break;
}
//}
}
//Ensure that the zoom levels are not messed up, if some areas of interest are outside the minimum and maximum zoom distances
//If the width of the map is larger than the largest zoom level...change the current level to the largest
if (mapXDistance > parseFloat(zoomLevelDistanceArray[0])) {
var level = 1;
updateActiveZoom(level);
}
//Same thing as above, but for areas of interest smaller than the smallest zoom level (further zoomed in)
if (mapXDistance < parseFloat(zoomLevelDistanceArray[zoomLevelDistanceArray.length-1])) {
var level = zoomLevelDistanceArray.length;
updateActiveZoom(level);
}
}
//}
//Hide the hover dot and the attribute table
hidePointInfo();
//Clear the map image, and the map image, because we are about to redraw with new extents
wmsCanvas.clear();
var queryImgStr = wmsBaseString + wmsInfo[1] + "," + wmsInfo[3] + "," + wmsInfo[2] + "," + wmsInfo[4] + "&WIDTH=" + pixelWidth + "&HEIGHT=" + pixelHeight;
mapLog.debug("updateWMSMap: " + queryImgStr);
wmsCanvas.drawImage(queryImgStr, 0,0, pixelWidth+"px", pixelHeight+"px");
wmsCanvas.setColor("#0000ff");
//Draw map
wmsCanvas.paint();
updateBBoxCallbacks();
mapLog.debug("updateWMSMap: completed.");
}
//This function is called when the lyr selection changes (or if someone changes the region of interest). The points for the current selection are drawn
function updateLayers(lyrInfo,newOrSame) {
mapLog.debug("updateLayers: started with lyrInfo: " + lyrInfo);
if (lyrInfo != null && lyrInfo!=999) {
if (newOrSame.toUpperCase()=="NEW") {
clearSelection();
updateSelectionCallbacks("'Clear'");
}
lastPointLayer=lyrInfo;
lyrInfo=lyrInfo.substring(1,lyrInfo.length-1);
var values = lyrInfo.split(',');
if (values.length != 3) {
//alert("Incomplete point layer information: " + lyrInfo);
mapLog.error("Incomplete point layer information: " + lyrInfo);
} else {
//Clear the points before re-drawing
hidePointInfo();
pointCanvas.clear();
//Check to see if we have already downloaded point content for this layer yet, if not...must do a query
//Keep in mind that if a static XML file is being used (for testing), the entire file is downloaded, and stored
//in each array element in pointLayerArray...which isn't the most efficient (but static files are for testing currently)
//if (pointLayerArray[values[0]]=="nil") {
if (queryType=="DYNAMIC") {
//If the point GML for the current selection has not been downloaded yet, then query the points and store content in an array
//Currently, we are not caching server-side requests for GML...so this should be called everytime (unless using a static file)
mapLog.debug("updateLayers: dynamic");
queryPoints(values[0],values[1]);
//drawPoints(values[0]);
} else if (queryType=="STATIC" && staticPointXML=="") {
mapLog.debug("updateLayers: static1");
//The point GML is available client-side...just draw it
queryPoints(values[0],values[1]);
//drawPoints(values[0]);
} else if (queryType=="STATIC" && staticPointXML!="") {
mapLog.debug("updateLayers: static2");
drawPoints(values[0]);
}
//Set the global variable which holds the field name which holds the info that uniquely identifies each point (station id)
uniquePtField = values[2];
}
}
mapLog.debug("updateLayers: completed");
}
//This function is called when a new point layer has been selected for the first time, the database must be queried for the points
//So, an AJAX query is performed, and passes the coordinate extents which we want to use to query the points. If we are using a static
//XML file for testing, the entire file is downloaded and stored in each array element (not the greatest efficiency, but only meant for
//testing at this point)
function queryPoints(lyrID,symbolFieldName) {
mapLog.debug("queryPoints: started");
//var xmlhttp;
var queryURL;
//xmlhttp = new createXMLHttpRequest();
//if (xmlhttp) {
// alert("already processing.");
// return;
//}
var xmlReq = new XMLRequestWrapper();
xmlReq.createXMLHttpRequest();
xmlhttp = xmlReq.getReq();
//Check the file extension of the URL in the config file...if it is pointing to a server side file (to perform a query), then
//attach the selected bounding extents. If not, just download the static file.
if (queryType=="DYNAMIC") {
mapLog.debug("queryPoints: 1");
//Loading dynamically generated GML/XML from a server (need bounding extents to filter points on server)
queryURL = gmlPointContentURL;
if (queryURL.indexOf("?") < 0) {
queryURL += "?";
} else {
queryURL += "&";
}
queryURL += "FIELD="+symbolFieldName+"&LEFT="+mapLeft+"&RIGHT="+mapRight+"&BOTTOM="+mapBottom+"&TOP="+mapTop+"&geom="+POINT_TAG;
mapLog.debug("queryPoints: " + queryURL);
} else if (queryType=="STATIC") {
//Loading an XML file directly (testing)
queryURL = gmlPointContentURL;
}
//queryURL += "&disableGzip=true";
//alert(queryURL);
xmlhttpLyrId = lyrID;
xmlhttp.onreadystatechange = queryPointsCallback;
// Still more race conditions to resolve before making async...
//alert(queryURL);
xmlhttp.open("GET", queryURL, false);
//xmlhttp.onreadystatechange = function() {
// if http request for each file
//}//end http function
//alert("here");
xmlhttp.send(null);
queryPointsProcess();
showLoading();
}
function queryPointsCallback() {
if (xmlhttp.readyState == 4) {
hideLoading();
if (xmlhttp.status == 200) {
mapLog.debug("queryPointsCallback: Successful response");
queryPointsProcess();
} else {
// Warn the user?
mapLog.error("queryPointsCallback: Failure status code " + filterXMLReq.status);
//alert("problem receiving data");
return;
//xmlhttp = null;
}
}
return;
}
function queryPointsProcess() {
//alert(lyrID);
//Re-populate the "dynamic" variable, if we are using a server-side language, or just store the static file's content in the "static" varaible once
if (queryType=="DYNAMIC") {
var contentType = xmlhttp.getResponseHeader("Content-Type");
mapLog.debug("queryPointsCallback: " + contentType);
if (contentType!=null && "TEXT/XML"==contentType.substring(0,8).toUpperCase()) {
featureManager = new GMLFeatureManager(symbolFieldNameArray[xmlhttpLyrId].toUpperCase(),
addNamespace(POINT_TAG).toUpperCase());
featureManager.setXMLDoc(xmlhttp.responseXML);
} else if (contentType!=null && ("TEXT/PLAIN"==contentType.substring(0,10).toUpperCase() || "TEXT/CSV"==contentType.substring(0,8).toUpperCase())) {
featureManager = new CSVFeatureManager(symbolFieldNameArray[xmlhttpLyrId].toUpperCase(),
addNamespace(POINT_TAG).toUpperCase());
featureManager.processCSV(xmlhttp.responseText);
} else {
alert("Unsupported content-type: " + contentType);
}
//dynamicPointXML=xmlhttp.responseText;
//alert(dynamicPointXML);
} else if (queryType=="STATIC") {
staticPointXML=xmlhttp.responseText;
//alert(staticPointXML);
}
updateQueryPointsCallbacks();
mapLog.debug("queryPointsCallback: completed processing points");
drawPoints(xmlhttpLyrId);
//xmlhttp = null;
//alert("Added points after query");
}
//This function is called to redraw the client-side points. Features are parsed from the downloaded content, and the coordinates and symbology
//are determined for each point...and then the coordinates are translated into pixel coords, and drawn on map using WZ graphics library
function drawPoints(layerID) {
var feature,geometry;
var problem=false;
var imageName;
var lat,lon,featureSymbolVal,xyArray,symbolVal,imageSymbol,pointFID;
var inXCoord, inYCoord, endXCoordPos, imagePixelX, imagePixelY, imagePixelString, endXPos;
var xDistance, yDistance;
var discrepWarn = false;
// var d1,d2,d3,d4,d5,d6=0,d7=0,d8=0;
var validFeatureCount=0;
// (Re)Initialize the global associative array of features.
//features = new Array();
//Figure out the width and height of the map, in map coordinates
xDistance = Math.abs(mapRight-mapLeft);
yDistance = Math.abs(mapTop-mapBottom);
//------------------------------------------------
//Get the XML for the current point layer, which is stored in the pointLayerArray
//d1 = Date();
// var featureManager = new GMLFeatureManager(symbolFieldNameArray[layerID].toUpperCase(),
// addNamespace(POINT_TAG).toUpperCase());
//theFeatures = featureManager.getFeatures();
//d2 = Date();
//theGeometrys = featureManager.getGeometries();
//d3 = Date();
if (currentZoomLevel>3) {
scalePtSize=parseInt(ptSize)+2;
} else if (currentZoomLevel<=1) {
scalePtSize=parseInt(ptSize)-2;
} else {
scalePtSize=ptSize;
}
var symbols = symbolLookup[layerID];
//Loop through each point record to symbolize and draw
//for (i=0;i=tempArray[2] && mapX<=tempArray[3] &&mapY>=tempArray[4] && mapY<=tempArray[5]) {
//Put Tooltip here, and do something with mapclick event
//isInCluster=true;
hidePointInfo();
window.status="Stations are clustered at this scale. Click to zoom-in for more detail and station attribute table.";
return false;
//break;
} else {
return true;
}
}
}
} else {
if (showStationInfo==1) {
window.status="";
return true;
} else if (showStationInfo==2) {
window.status="";
return false;
}
//return false;
}
}
//This function changes the attribute table HTML on mouseover of a specific point
//This saves having to draw a separate HTML table for each point.
//Currently, the for loop, which searches for the current mouseover information, is not searching all records, but rather,
//it is using an incremental unique ID, which each feature has. the first feature in the returned content has an id of 1 or 0 or whatever
//as long as the next feature has an id which is one more than the feature before. This is done so that when we have hundreds or thousands of points,
//The for loop can start in the general vicinity of the feature list, because it is using its point id.
//In the for loop below, it is starting to search the "theFeatures" list, 5 records below the input pointID and 5 records above...so that if for some reason
//the point ids in the gml content were not perfectly aligned with the loop index in the feature list..it should be with 5 records below and above.
//*This kind of smart looping results in a snappy quick mouseover effect, and is recommended that we use it.
//The point ids are extracted from the "fid" attribute for each point (they should always start at zero...but just in case they don't..use the smart loop
function showPointInfo(xPos,yPos,lon,lat,inPointID,hover) {
if (showPointInfoFunctionList!="" && showPointInfoFunctionList!=null) {
var funcArray = showPointInfoFunctionList.split(",");
for (i=0;ipixelWidth*0.45 && xPospixelWidth*0.55 && xPospixelHeight*0.40 && yPospixelHeight*0.55 && yPospixelWidth*0.45 && xPospixelHeight*0.40 && yPospixelWidth*0.50) newX = (xPos - (feature.getMaxFieldNameLength()+feature.getMaxFieldLength()+130)) + "px";
// }
var estimatedWindowWidth = (feature.getMaxFieldNameLength()+feature.getMaxFieldLength()) * 6.2;
if (feature._imageLink) {
estimatedWindowWidth += 150;
//alert(estimatedWindowWidth + '=' + feature.getMaxFieldNameLength() + '+' + feature.getMaxFieldLength() + '*' + '6.2' + '+' + '150');
} else {
//alert(estimatedWindowWidth + '=' + feature.getMaxFieldNameLength() + '+' + feature.getMaxFieldLength() + '*' + '6.2');
}
var estimatedWindowHeight = feature.getFieldCount()*11.5;
//alert(estimatedWindowHeight + '=' + feature.getFieldCount() + '*' + '11.5');
var left, top, bottom;
// If the cursor is on the left, but the image on the right
if (xPos < pixelWidth / 2) {
//alert('Left');
left = (pixelWidth - estimatedWindowWidth) + 'px';
if (left < 0) {
left = 0;
}
} else {
//alert('Right');
left = '0px';
}
// 0,0 w,0
//
// ---Y---
// _____ |
// | | X
// h,0__| | w,h
//alert('' + xPos + '-' + estimatedWindowWidth + '=' + (xPos - estimatedWindowWidth) + ":::" + pixelHeight + '-' + estimatedWindowHeight + '-' + yPos + '=' + (pixelHeight - estimatedWindowHeight - yPos) );
if (xPos - estimatedWindowWidth > 25 || (pixelHeight - estimatedWindowHeight) - yPos > 25) {
left = '0px';
} else {
left = (pixelWidth - estimatedWindowWidth);
// Could of course put these in the first if clause above
if (left < 0) {
left = 0;
} else if (left < xPos + 100 ) { // Random fudge factor for tables that might not be full width due to say text wrap
//alert('adjusting: ' + left + '<' + xPos + '+' + estimatedWindowWidth);
left = 0;
}
left += 'px';
}
// For now we always put it in the bottom half of the screen.
bottom = '0px';
// if (yPos < pixelHeight / 2) {
// //alert('top');
// bottom = '0px';
// } else {
// //alert('bottom');
// bottom = '0px';
// //top = '0px';
// }
//alert(left + ', ' + top + '(' + bottom + ')' + table.style.left + "," + table.style.top + "," + table.style.right + " : " + estimatedWindowWidth + "::" + estimatedWindowHeight);
table.style.left = left;
if (bottom) {
table.style.bottom = bottom;
} else {
table.style.top = top;
}
//alert(xPos + "(" + newX + ") " + yPos + "(" + newY + ") - " + feature.getMaxFieldNameLength() + ":" + feature.getMaxFieldLength() + ":" + feature.getFieldCount());
//newX = (newX > 0 ? newX : 0);
//newY = (newY > 0 ? newY : 0);
// table.style.left = newX;
// table.style.top = newY;
//table.style.left = 0;
//table.style.bottom = 0;
//Now that table is all taken care of, plot the mouse over point layer-------------------------------------------------------------------------------
var theX=xPos;
var theY=yPos;
//Creating offset values for the mouseover dot, centering the dot over the symbols
var yPointOffset = theY-1;
var xPointOffset = theX -2;
//Get the hoverDot object (div)
if (hover == null || hover) {
var hoverDot = document.getElementById("hoverDot");
hoverDot.style.left=xPointOffset + "px";
hoverDot.style.top=yPointOffset + "px";
hoverDot.style.width="20px";
//Make the hover dot a little bit bigger than the regular dots (this is also a good thing because the crosshair image is 11x11 pixels)
hoverSize=parseInt(scalePtSize)+3;
//Change the innerHTML of the hoverDot object, based on which symbol the user has their mouse over...use the httpLink defined above
hoverDot.innerHTML = '
';
httpLink = feature.getLink();
if (httpLink != null && httpLink.length) {
if(stationClickMode==1) {
hoverDot.innerHTML='' + hoverDot.innerHTML + '';
} else if (stationClickMode==2) {
hoverDot.innerHTML='' + hoverDot.innerHTML + '';
}
}
hoverDot.style.visibility="visible";
}
//MAKE BOTH layers visible at pretty much the same time
table.style.visibility="visible";
} else {
//PUT A TOOLTIP IF NEEDED
//window.status="Stations are clustered at this scale. Click to zoom-in for more detail and station attribute table.";
}
}//end showPointInfo
function hidePointInfo() {
if (hidePointInfoFunctionList!="" && hidePointInfoFunctionList!=null) {
var funcArray = hidePointInfoFunctionList.split(",");
for (i=0;i";
htmlString+=""+lyrName+" ![](\""+iPath+imageName+"\")
";
htmlString+=""+symbolName+" ";
}//end for each symbol pair
htmlString+="";
return htmlString;
}
function closeLegend() {
if (navTools) {
document.getElementById("mapContainer").onclick=mapClick;
}
document.getElementById("legend").style.visibility="hidden";
}
//Position HTML elements, based on sizes in config, and other sizes of items in html file
function pageElementLayout() {
var frmContainer = document.getElementById("frmContainer");
if (frmContainer != null) {
frmContainer.style.width=pixelWidth+"px";
}
document.getElementById("mapComponent").height=pixelHeight+"px";
document.getElementById("mapComponent").width=pixelWidth+"px";
if (statistics) {
document.getElementById("statistics").style.left=(parseInt(pixelWidth)+65)+"px";
}
if (wmsLayerInfo) {
document.getElementById("wmsLayerInfo").style.left=(parseInt(pixelWidth)+75)+"px";
}
document.getElementById("navigation").style.width=pixelWidth+"px";
document.getElementById("navigation").style.height=pixelHeight+"px";
if (navTools) {
//Position the zoomin/zoomout and calculate the position of the zoom levels
var zoomInOutImgHeight = document.getElementById("zoomin").height;
document.getElementById("zoomin").style.top=-6+"px";
document.getElementById("zoomin").style.left=(parseInt(pixelWidth)+20)+"px";
document.getElementById("zoomout").style.top=(parseInt(pixelHeight)-zoomInOutImgHeight)+"px";
document.getElementById("zoomout").style.left=(parseInt(pixelWidth)+20)+"px";
//Calculating the position of the zoom level images, using the height of the zoomin/zoomout images (assumed to be the same size)
var tempImg,dividedDistance,runningTotal;
var imgLvlHeight = document.getElementById("zoomlevel1").height;
var start=-6+zoomInOutImgHeight;
var end=pixelHeight-zoomInOutImgHeight;
var layoutZoomLvlDist = end-start;
var imgPixelHeightTotal=numZoomLevels*imgLvlHeight;
var spaceInBetweenTotal=layoutZoomLvlDist-imgPixelHeightTotal;
var spaceInBetweenEach=parseInt(spaceInBetweenTotal/(numZoomLevels+1));
//Update the running total, each time you place a zoom level image (from bottom to top)
runningTotal=end;
for (i=1;i numZoomLevels+1) level = numZoomLevels+1;
currentZoomLevel=level;
mapLog.debug("updateActiveZoom: set currentZoomLevel to " + currentZoomLevel);
//Turn all zoom levels to be unselected
if (navTools) {
for (i=1;i
";
htmlString+="<\/div>";
htmlString+="<\/div>";
htmlString+="<\/div>";
//htmlString+="";
mapComp.innerHTML=htmlString;
}
function addStationInteractionControls() {
var div = null;
if (theOtherWMSLayer) {
div = document.getElementById('theOtherWMSLayerControlDiv');
if (div != null) {
div.style.visibility="visible";
div = document.getElementById('theOtherWMSLayerDiv');
if (div != null) {
div.innerHTML='';
}
}
}
if (navTools) {
div = document.getElementById('zoomDiv');
if (div != null) {
div.innerHTML='Zoom + Re-Center' +
'Re-Center';
}
}
if (!clusterSupress) {
div = document.getElementById('statInterObj');
if (div != null) {
div.innerHTML = 'On' +
'Off';
}
}
if (ptSelection) {
div = document.getElementById('statClickModeObj');
if (div != null) {
div.innerHTML = 'Homepage' +
'Select/Deselect' +
'';
}
}
}
//This function adds the elements for the map component, including select boxes,etc. It uses the settings in the config file
function addElements() {
addNavTools();
addMapComponents();
addStationInteractionControls();
mapLog.debug("Done adding html elements");
}
//This function preloads images, and stores symbology information
function prepareSymbology() {
var symbolInfo, layer, lyrName, theLayers,symbolFieldName;
var imageArray = new Array();
var symbolImage, tempChildNodeList, tempChildNode, tempSymbol;
//Preload the image icons for all layers, and populate symbology values arrays
for (i=0;i| Station Summary | |
| Station Type | Total |
| "+symbolName+" | "; htmlString+=""+CommaFormatted(symbolNameArray[symbolName])+" | "; htmlString+="
| Current WMS Layers | ||
| ID | Name | Notes/Comments | "+lyrName+" | "; htmlString+=""+lyrNotes+" | "; htmlString+=""; } } } htmlString+="
"+"Y: " + mapY.toString().slice(0,6); if (clusterSupress) { if (showAttTable(mapX,mapY)==true) { window.status=""; } else { window.status="Stations are clustered at this scale. Click to zoom-in for more detail and station attribute table."; } } //window.status="X: " + mapX.toString().slice(0,7) + " Y: " + mapY.toString().slice(0,6); } //Get the true x,y of the mouse click, inside the map div element, and then use it to ZOOM in and re-center the image function mapClick(e) { var posx = 0; var posy = 0; var mapObj=document.getElementById("mapContainer"); //Get the offset position of the map div element, for use to figure out the real x,y location in the element var offsetX=findPosX(mapObj); var offsetY=findPosY(mapObj); //Get the mouse click x,y position RELATIVE TO THE DOCUMENT if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft; posy = e.clientY + document.body.scrollTop; } //alert(mapObj.style.top); //alert(posx); //alert(posy); //Use the offset position figures of the element and subtract them from the x,y locations, which are relative to the document //This gives us the true x,y location, inside the div element, of the mouse click (we need to use this to convert to map coords) var mouseX=posx-offsetX; var mouseY=posy-offsetY var mapXYString = getMapXY(mouseX,mouseY); mapXYArray=mapXYString.split(","); var mapX=parseFloat(mapXYArray[0]); var mapY=parseFloat(mapXYArray[1]); var halfX = parseFloat(Math.abs(mapXDistance/2)); var halfY = parseFloat(Math.abs(mapYDistance/2)); var tempRight,tempLeft,tempTop,tempBottom,mapString; var tempXDistance, tempYDistance,tempHalfX,tempHalfY; //If user wants to zoom and re-center if (mapClickAction==1) { //If the level chosen is different from the previously selected level, and the level requested is greater than 1 and less than the number of levels if (currentZoomLevel
';
httpLink = feature.getLink();
if (httpLink != null && httpLink.length) {
if(stationClickMode==1) {
hoverDot.innerHTML='' + hoverDot.innerHTML + '';
} else if (stationClickMode==2) {
hoverDot.innerHTML='' + hoverDot.innerHTML + '';
}
}
hoverDot.style.visibility="visible";
}
//MAKE BOTH layers visible at pretty much the same time
table.style.visibility="visible";
} else {
//PUT A TOOLTIP IF NEEDED
//window.status="Stations are clustered at this scale. Click to zoom-in for more detail and station attribute table.";
}
}//end showPointInfo
function hidePointInfo() {
if (hidePointInfoFunctionList!="" && hidePointInfoFunctionList!=null) {
var funcArray = hidePointInfoFunctionList.split(",");
for (i=0;i