var size = 0;
var sizesmall = 0;
var tmpimgsrc;
var conimgsrc;
var salimgsrc;
var sigmatsrc;
var tsimgsrc;
var map;
var pointlayer;
var selfeature;
var publicFile;
var clickfeature;
var objects;
var linelayer;
var loadingteller = 0;
var timearray;
var stationsliderarray;
var thermsallayer;
// stylemaps for points and lines
var routeStyleMap = new OpenLayers.StyleMap(
{
'default':
{
'strokeColor' : '#2200FF',
'fillColor': '#FFFF00',
'strokeWidth' : 1
},
'select':
{
'strokeColor' : 'green',
'strokeWidth' : 1
}
});
var stationStyleMap = new OpenLayers.StyleMap(
{
'default':
{
'fillColor' : 'red',
'fillOpacity': 0.5,
'pointRadius' : 3
},
'select':
{
'fillColor' : 'green',
'fillOpacity': 0.5,
'pointRadius': 5
},
'sliderselect':
{
'fillColor' : 'yellow',
'pointRadius': 5,
'fillOpacity': 1
}
}
);
/******************************************************************
* Initierer kartet med bakgrunnskart og de faste snittene
*
* Denne kjøres fra tag i hovedsiden
*******************************************************************/
function init(){
// hides the slider containers.
jQuery("#graphslidercontainer").hide();
jQuery("#tlouterContainer").hide();
// creates the timeline dialog that will pop up on the right when hovering
jQuery("#timelinedialog").dialog({
autoOpen: false,
position: 'right',
draggable: false,
resizable: false,
title: 'Tidslinje informasjon'
});
jQuery("#timelinecontainer").hover(function() {
jQuery("#timelinedialog").dialog('open');
}, function(){
jQuery("#timelinedialog").dialog('close');
});
// creates the graph slider dialog that will popup when hovering
jQuery("#graphsliderdialog").dialog({
autoOpen: false,
position: 'right',
draggable: false,
resizable: false,
title: 'Graflinje informasjon'
});
jQuery("#graphslider").hover(function() {
jQuery("#graphsliderdialog").dialog('open');
}, function(){
jQuery("#graphsliderdialog").dialog('close');
});
jQuery("#paletteChooser").dialog({
autoOpen: false,
buttons:{
"Close": function(){
jQuery(this).dialog('close');
}
}
});
jQuery("#paletteChooserButton").click(function(){
jQuery("#paletteChooser").dialog('open');
});
/**
* Setting up the map object
*/
// var bounds = new OpenLayers.Bounds(-50,-50,50,50);
map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation()
// new OpenLayers.Control.KeyboardDefaults()
],
// restrictedExtent: bounds,
units: 'dd'
// maxExtent: bounds
});
/**
* Creating the background layer
*/
var demis_cmr = new OpenLayers.Layer.WMS.Untiled( "Demis World Map",
"http://aisonline.com/WMS/wms.asp?WMS=WorldMap",
{
layers:
'Bathymetry,Countries,Topography,Builtup+areas,Waterbodies,Coastlines,Borders'
},
{
wrapDateLine: true
});
/**
* Setting up the loading div so it is shown/hidden when we load/unload
* the background map.
*/
demis_cmr.events.register("loadstart", demis_cmr,function(){
jQuery("#loading").css("z-index","1001");
});
demis_cmr.events.register("loadend", demis_cmr,function(){
jQuery("#loading").css("z-index","0");
});
/**
* Setting up the style for the transect lines.
*/
var styleMap = new OpenLayers.StyleMap({
'default':
{
'strokeColor' : "black",
'fillColor' : "black",
'strokeWidth': 1
}
});
/**
* Loading the GML file containing the transects
*/
var snitt = new OpenLayers.Layer.GML("Faste snitt","./staticgml/snitt.xml", {
styleMap : styleMap
});
snitt.setVisibility(false);
map.addLayers([demis_cmr,snitt]);
//zoomer helt ut
map.zoomToMaxExtent();
// adds the date picker objects to the from/to date fields
var now = (new Date()).getDate() -7;
jQuery("#fradato").datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
duration: ''
});
jQuery("#fradato").datepicker('setDate', -7);
jQuery("#tildato").datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
duration: ''
});
jQuery("#tildato").datepicker('setDate', new Date());
}
/******************************************************************
* Metode som blir kalt når man trykker på "Vis i kart"
*
* Denne henter ut data fra feltene på siden og lager et ajax kall
* til serveren for å få laget en GML fil med posisjonene som skal
* tegnes
*
* kaller updatetheMap når den får svar fra serveren
*******************************************************************/
function updateMap(){
jQuery("#loading").css("z-index","1001");
jQuery.ajax({
type: "POST",
url: "drawmap.map",
data: {
toktnummer : jQuery("#toktnummer").val(),
platform: jQuery("#platform").val(),
fradato: jQuery("#fradato").val(),
tildato: jQuery("#tildato").val(),
lengdenord: jQuery("#lengdenord").val(),
lengdesor: jQuery("#lengdesor").val(),
breddeeast: jQuery("#breddeeast").val(),
breddevest: jQuery("#breddevest").val()
},
success:
function (XMLHttpRequest, status) {
updatetheMap(XMLHttpRequest);
}
});
if(thermsallayer != null){
thermsallayer.destroy();
}
OpenLayers.Util.onImageLoadErrorColor = "transparent";
thermsallayer = new OpenLayers.Layer.WMS( "Thermosalinograph",
"getThermsal.map?toktnummer=&platform="+jQuery("#platform").val()+"&fradato="+jQuery("#fradato").val()+"&tildato="+jQuery("#tildato").val()+
"&palette="+jQuery("input[name='palette']:checked").val(),
{
layers:'line'
},
{
wrapDateLine: true,
isBaseLayer: false,
singleTile : true
});
thermsallayer.events.register("loadend", thermsallayer,function(){
var cs = "colorscale.map?palette="+jQuery("input[name='palette']:checked").val()+"&" + Math.random();
jQuery("#scale").attr("src",cs);
});
map.addLayer(thermsallayer);
thermsallayer.setVisibility(true);
}
/*****************************************************************
* Oppdaterer kartet med stasjoner og rute når disse er søkt
* ut fra serveren
*
* Blir kallet fra updateMap()
*****************************************************************/
function updatetheMap(req){ //legger til stasjon og rute lagene når det blir søkt etter dissse
jQuery("#popup").css("display","none");
var xmlDoc = req;
var file = xmlDoc.getElementsByTagName("fil");
if(file[0].firstChild.nodeValue != "-1"){
// add rules to the default symbolizer that check for the "size"
// attribute and apply the symbolizer defined in lookup
styleMap.styles['default'].addRules([hmosby,others,gosars,jhjort,munin,dannevig]);
// add the pointlayer. If we allready have a pointlayer update that one
// that is on the map
publicFile = "./dynamicgml/points"+file[0].firstChild.nodeValue+".xml";
if(pointlayer == null){
pointlayer = new OpenLayers.Layer.GML("Stasjoner",publicFile,{
styleMap : styleMap//stationStyleMap
});
map.addLayer(pointlayer);
pointlayer.setVisibility(false);
}else{
pointlayer.setUrl(publicFile);
}
// Adds a event to pointlayer for the loading element to be removed.
pointlayer.events.register("loadend", pointlayer, function(){
OpenLayers.loadURL(publicFile,"",null,populateArray);
pointlayer.setVisibility(true);
var ele = document.getElementById("loading");
ele.style.zIndex = "0";
});
var platform = document.getElementById("platform").value;
// check if the user has selected a platform, if he has draw the linelayer
// otherwise hide any layers that allready is drawn.
if(platform != "" && !platform.match("^[0-9]*$")){
if(linelayer == null){
linelayer = new OpenLayers.Layer.GML("Rute","./dynamicgml/lines"+file[0].firstChild.nodeValue+".xml", {
styleMap: routeStyleMap
});
map.addLayer(linelayer);
}else{
linelayer.setUrl("./dynamicgml/lines"+file[0].firstChild.nodeValue+".xml");
}
linelayer.setVisibility(true);
}else{
if(linelayer != null){
linelayer.setVisibility(false);
}
}
}else{
// we dont have any data for the selected time, platform and area
// hide any old data and zoom all the way out
if(linelayer != null){
linelayer.setVisibility(false);
}
if(pointlayer != null){
pointlayer.setVisibility(false);
}
map.zoomToMaxExtent();
jQuery("#loading").css("z-index","0");
}
getAntStations();
}
/**********************************************************************
* Metode som henter ut ekstra informasjon fra GML filen
*
* Blir klat fra updatetheMap når stasjons laget er ferdig å laste
**************************************************************************/
function populateArray(req){ // blir kjørt for å hente ut mer informasjon fra gml filen
var xml = req.responseXML;
var features = pointlayer.features;
var positions = xml.getElementsByTagName("xsi:description");
var plat = xml.getElementsByTagName("xsi:name");
var time = xml.getElementsByTagName("xsi:time");
var id = xml.getElementsByTagName("xsi:id");
timearray = time; //sets an array with time elements so we can use this for the sliding line
stationsliderarray = new Array();
objects = new Array();
// center the map around the data the user have searched for
var pos = Math.ceil(pointlayer.features.length/2);
map.setCenter(pointlayer.features[pos].geometry.getBounds().getCenterLonLat(),5);
// goes through all the features and puts them into the object array and
// the stationsliderarray.
// these are used in the hovering and sliding functions
for(var te = 0; te < positions.length; te++){
var object = [positions[te].firstChild.nodeValue, plat[te].firstChild.nodeValue, time[te].firstChild.nodeValue, id[te].firstChild.nodeValue];
objects[features[te].id] = object;
object.push(features[te].id);
stationsliderarray[id[te].firstChild.nodeValue] = object;
}
/* if(linelayer != null){
map.raiseLayer(linelayer,map.getNumLayers());
}
map.raiseLayer(pointlayer,map.getNumLayers());
*/
// adding a click feature for the hover/click functions
/* clickfeature = new OpenLayers.Control.CustomSelectFeature(pointlayer, {
onSelect: updateStationsFeature,
onHover: onFeatureSelect
});
map.addControl(clickfeature);
clickfeature.activate();
*/
var hoverfeature = new OpenLayers.Control.SelectFeature(pointlayer,{
hover: true,
highlightOnly: true,
renderIntent: 'select',
clickout: false,
eventListeners: {
featurehighlighted: onFeatureSelect
}
});
map.addControl(hoverfeature);
var clickfeature = new OpenLayers.Control.SelectFeature(pointlayer,{
renderIntent: 'sliderselect',
onSelect: updateStationsFeature,
clickout: true
});
map.addControl(clickfeature);
hoverfeature.activate();
clickfeature.activate();
/* if(linelayer != null){
linelayer.setVisibility(true);
}
*/
pointlayer.setVisibility(true);
// we need to remove this event, otherwise it will be run every time we
// update the pointlayer.
pointlayer.events.remove("loadend");
initTimeLine();
initGraphBySlider();
}
/*******************************************************************
* Metode som blir kalt ved mouseover på stasjoner
*
* sender bare videre info til featureShow();
********************************************************************/
function onFeatureSelect(feature) { //
featureShow(feature);
}
/********************************************************************
* Metode som blir kjørt ved mouseout på stasjoner
*
* For tiden bare en dummy metode som ikke brukes til noe
*********************************************************************/
function onFeatureUnselect(feature) {
// map.removePopup(feature.popup);
// feature.popup.destroy();
// feature.popup = null;
}
/*********************************************************************
* Metode som blir kjør ved mouseOver på stasjonene
*
* Denne viser popup vinduet med stasjons info.
*
* Kalles fra onFeatureSelect() metoden
**********************************************************************/
function featureShow(e){ // popup metoden
var feature = e.feature;
var lon = feature.geometry.getBounds().getCenterLonLat().lon;
var lat = feature.geometry.getBounds().getCenterLonLat().lat;
jQuery("#popup").css("display","block");
var platform = document.getElementById("platform");
if(platform[platform.selectedIndex].value.substring(0,2) == 69){
jQuery("#popup").html(""+
"Tid: "+objects[feature.id][2]+"
"+
"Posisjon:- Longitude: "+lon.toString().substring(0,6)+"
- Latitude: "+lat.toString().substring(0,6)+"
");
// "");
}else{
jQuery("#popup").html(""+
"Stasjon: "+objects[feature.id][0]+"
"+
"Tid: "+objects[feature.id][2]+"
"+
"Posisjon:- Longitude: "+lon.toString().substring(0,6)+"
- Latitude: "+lat.toString().substring(0,6)+"
");
// "");
}
}
/**********************************************************************
* Metode som kjøres når man klikker på en stasjon
* Finner longitude og latitude og sender disse videre til updateStations metoden
*
*********************************************************************/
function updateStationsFeature(feature){
// rewritten to just move the slider to the right position, and the slider
// methods will do the updates of the graphs (the lower slider "graphslider")
jQuery("#graphslider").slider('value',objects[feature.id][5]);
}
/*************************************************************
* Metode for å skifte størrelse på grafene
*
* Denne funksjonaliteten er gjømt for tiden men blir kalt dersom noen klikker
* på grafen
**************************************************************/
function changeTmpCondSize(){ //skifter størrelese på graf bildene
/* var tempimg = document.getElementById("temperaturImg");
var condImg = document.getElementById("condImg");
var salimg = document.getElementById("salImg");
var sigmatimg= document.getElementById("sigmatImg");
var tsimg = document.getElementById("tsimg");
if(sizesmall == 0){
sizesmall = 1;
}else{
sizesmall = 0;
}
tempimg.src = tmpimgsrc+"&size="+sizesmall;
condImg.src = conimgsrc+"&size="+sizesmall;
salimg.src = salimgsrc+"&size="+sizesmall;
sigmatimg.src = sigmatsrc+"&size="+sizesmall;
tsimg.src = tsimgsrc+"&size="+sizesmall;
*/
}
/****************************************************************
* Metode for å skifte mellom de forskjellige grafene
*
*
*******************************************************************/
function switchImages(){
var radio = document.getElementsByTagName("input");
var cond = document.getElementById("cond");
var sali = document.getElementById("sali");
var sigmat = document.getElementById("sigmat");
var tsdia= document.getElementById("tsdia");
for(var i = 0; i < radio.length; i++){
if(radio[i].name == "selectImg"){
if(radio[i].checked == true){
if(radio[i].value == "cond"){
cond.style.display = "block";
sali.style.display = "none";
sigmat.style.display = "none";
tsdia.style.display = "none";
}else if(radio[i].value == "sali"){
cond.style.display = "none";
sali.style.display = "block";
sigmat.style.display = "none";
tsdia.style.display = "none";
}else if(radio[i].value == "sigmat"){
cond.style.display = "none";
sali.style.display = "none";
sigmat.style.display = "block";
tsdia.style.display = "none";
}else if(radio[i].value == "ts"){
cond.style.display = "none";
sali.style.display = "none";
sigmat.style.display = "none";
tsdia.style.display = "block";
}
}
}
}
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}