// -------------------------------------------------------------------------------------------------------- // Layer_Show v 2.1 // Display useful additional information on a map by CSS and DIV overlays. // Content comes dynamically loaded from external files with AJAX. // // copyright alta4 Geoinformatik GmbH Trier 2005 - Christoph Knote - knot6b02 [at] uni-trier.de // // -------------------------------------------------------------------------------------------------------- // Function list: test // // add_to_featurecache: called by AJAX function, creates new feature object for use // draw_divlayer: main popup drawing function. Runs through caches and displays contents // z_indexer: gives the feature(id) a good z Index to smooth layering // visibler: makes features css visible // isFirefox // isSafari // show_layer(id): set position of layer named id to mouse position and make visible // hide_layer(id): delete shown features -> hide it... // make_permanent(id): add layer to permanent features, which are not hidden // xmlhttprequest: actual AJAX function to get content from Attributehtmls // position_layer: move layer by css to specified position // get_xml(doc,href,action): switch function what to do with data request (parse to div, to dashboard..) // reposition_layer: update coords for feature saved in feature object by actual mouse position // create_divlayerobject fill the featurecache with another nice feature. (also build PopUp frame & position) // parse_to_photoboard add photo to the board // position_photoboard move the photoboard according to map extent // close_photoboard hide the photoboard // position_dashboard(): looks for id=map_dashboard_hook and positions dashboard beneath actual map position // parse_to_dashboard(text) // clear_dashboard() // clear_one_dashboard(id): delete one feature from the dashboard, identified by index in dashboard_contents array // draw_dashboard(): finally parse contents with nice "Pope" border // is_xml(href): // excerpt_att_string(att): take passed string att (usually html/xml file) and return only [...]
inside string // init_mousemove: start capturing of mousemovement for x,y coordinates of recent position (to be fired on body load) // dpl_mouse_pos2(): get mouse position and write coords in global array MausPos(X,Y) // findPosY(object): get Y coordinate of object // findPosX(object): get X coordinate of object // -------------------------------------------------------------------------------------------------------- // declare some globals: // MausPos are coordinates of the mouse // zindexcounter counts up when showing layers to put new ones on top of the others // delaytime is the time in milliseconds between mouseover and popup show // featurecache: All features coming by AJAX are cached in here and used in the rest of the functions // shownfeatures: Actually only one feature: the mousemovedover one... // permanentfeatures: All made_permanent features // dashedfeatures: All features currently in dashboard MausPos = new Array(0,0); zindexcounter = 10; delaytime = 500; thepermfeature = ""; featurecache = new Object(); shownfeatures = new Object(); permanentfeatures = false; dashedfeatures = new Object(); // preloading all the nice images... img1 = new Image(); img2 = new Image(); img3 = new Image(); img4 = new Image(); img5 = new Image(); img6 = new Image(); img7 = new Image(); img8 = new Image(); img9 = new Image(); img10 = new Image(); img11 = new Image(); img12 = new Image(); img13 = new Image(); img14 = new Image(); img15 = new Image(); img16 = new Image(); img17 = new Image(); img18 = new Image(); img19 = new Image(); img20 = new Image(); img21 = new Image(); img22 = new Image(); img23 = new Image(); img24 = new Image(); img25 = new Image(); img26 = new Image(); img27 = new Image(); img28 = new Image(); img29 = new Image(); img30 = new Image(); img31 = new Image(); img32 = new Image(); img33 = new Image(); img34 = new Image(); img35 = new Image(); img36 = new Image(); img37 = new Image(); img38 = new Image(); img39 = new Image(); img1.src = "popup_graphics/l.gif" img2.src = "popup_graphics/lo.gif" img3.src = "popup_graphics/lo2.gif" img4.src = "popup_graphics/lu.gif" img5.src = "popup_graphics/lu2.gif" img6.src = "popup_graphics/new_pfeil_o.gif" img7.src = "popup_graphics/new_pfeil_u.gif" img8.src = "popup_graphics/om.gif" img9.src = "popup_graphics/r.gif" img10.src = "popup_graphics/ro.gif" img11.src = "popup_graphics/ro_01.gif" img12.src = "popup_graphics/ro_02.gif" img13.src = "popup_graphics/ru.gif" img14.src = "popup_graphics/s_l.gif" img15.src = "popup_graphics/s_lo.gif" img16.src = "popup_graphics/s_lo_2.gif" img17.src = "popup_graphics/s_lo_5.gif" img18.src = "popup_graphics/s_lo_dash.gif" img19.src = "popup_graphics/s_lo2.gif" img20.src = "popup_graphics/s_lu.gif" img21.src = "popup_graphics/s_lu_3.gif" img22.src = "popup_graphics/s_lu_4.gif" img23.src = "popup_graphics/s_lu2.gif" img24.src = "popup_graphics/s_om.gif" img25.src = "popup_graphics/s_om_5.gif" img26.src = "popup_graphics/s_pfeil_o.gif" img27.src = "popup_graphics/s_pfeil_o_2.gif" img28.src = "popup_graphics/s_r.gif" img29.src = "popup_graphics/kreuz_1.gif" img30.src = "popup_graphics/s_ro.gif" img31.src = "popup_graphics/s_ro_2.gif" img32.src = "popup_graphics/pfeil_uw.gif" img33.src = "popup_graphics/s_ru.gif" img34.src = "popup_graphics/s_ru_2.gif" img35.src = "popup_graphics/s_ru_3.gif" img36.src = "popup_graphics/s_u2.gif" img37.src = "popup_graphics/s_um.gif" img38.src = "popup_graphics/s_um_2.gif" img39.src = "popup_graphics/spacer.gif" function add_to_featurecache(id,href,content,text) { // laufzeitanalyse("add_to_featurecache"); featurecache[id] = new Object(); featurecache[id]["content"] = content; featurecache[id]["href"] = href; featurecache[id]["rawtext"] = text; featurecache[id]["X"] = 0; featurecache[id]["Y"] = 0; featurecache[id]["oben"] = 0; featurecache[id]["schattenoben"] = 0; featurecache[id]["links"] = 0; featurecache[id]["schattenlinks"] = 0; featurecache[id]["dashed"] = false; featurecache[id]["permanent"] = false; } function draw_divlayer() { // laufzeitanalyse("draw_divlayer"); zindexcounter = 10; document.getElementById("divlayer_container").innerHTML = ""; if ((thepermfeature != "")&&(featurecache[thepermfeature])) { document.getElementById("divlayer_container").innerHTML += featurecache[thepermfeature]["content"]; z_indexer(thepermfeature); visibler(thepermfeature); } for (var Etim in shownfeatures) { document.getElementById("divlayer_container").innerHTML += shownfeatures[Etim]["content"]; z_indexer(Etim); visibler(Etim); } } function z_indexer(id) { // laufzeitanalyse("z_indexer"); var attributelayer = document.getElementById(id+"_attributelayer"); var schattenlayer = document.getElementById(id+"_schattenlayer"); zindexcounter = zindexcounter+2; attributelayer.style.zIndex = zindexcounter; schattenlayer.style.zIndex = zindexcounter-1; } function visibler(id) { // laufzeitanalyse("visibler"); var attributelayer = document.getElementById(id+"_attributelayer"); var schattenlayer = document.getElementById(id+"_schattenlayer"); attributelayer.style.visibility = "visible"; schattenlayer.style.visibility = "visible"; } function isFirefox() { // laufzeitanalyse("isFirefox"); var ua = navigator.userAgent.toLowerCase(); if((ua.indexOf("mozilla") != -1) && (ua.indexOf("firefox") != -1)) return true; else return false; } function isSafari() { // laufzeitanalyse("isSafari"); var ua = navigator.userAgent.toLowerCase(); if((ua.indexOf("mozilla") != -1) && (ua.indexOf("safari") != -1)) return true; else return false; } function isPoint(id) { // laufzeitanalyse("isPoint"); var feature = document.getElementById(id+"_area"); if (feature.shape == "circle") { return true; } else { return false; } } function show_layer(id) { // laufzeitanalyse("show_layer"); shownfeatures = new Object(); if (isMouseOverFeature(id)) { shownfeatures[id] = featurecache[id]; draw_divlayer(); position_layer(id); visibler(id); } else draw_divlayer(); } function hide_layer(id) { // laufzeitanalyse("hide_layer"); shownfeatures = new Object(); draw_divlayer(); } function isMouseOverFeature(id) { // laufzeitanalyse("isMouseOverFeature"); var deltax = abs(MausPos[0]-featurecache[id]["X"]); var deltay = abs(MausPos[1]-featurecache[id]["Y"]); if ((deltay < 10) && (deltax < 10)) { return true; } else return false; } // Saves hotspots that are permanent function make_permanent(id) { if (thepermfeature == id) { thepermfeature = ""; } else { thepermfeature = id; if(featurecache[id]) setatt(featurecache[id]["rawtext"]); } draw_divlayer(); } // AJAX - get content from other files without reloading the whole page function xmlhttprequest(doc,href,action) { // laufzeitanalyse("xmlhttprequest"); try { var requester = new XMLHttpRequest(); } catch (error) { try { var requester = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { } } requester.open("GET", href); checked = ""; requester.onreadystatechange=function() { if (requester.readyState == 4) { // Die Daten sind jetzt alle da, wir machen was mit ihnen. // tocheck enthaelt jetzt einen String mit dem Inhalt der Seite "href" var tocheck = requester.responseText; // mit dieser Tabelle tun wir nun das, was in der action verlangt wird: if (action == "parse_to_div") { // jetzt ziehen wir mit normalen Stringfunktionen die Attributtabelle aus dem HTML Dokument und verwerfen den Rest checked = excerpt_att_string(tocheck); create_divlayerobject(doc,href,checked); var aufruf = "show_layer('"+doc+"')"; window.setTimeout(aufruf,delaytime); // die Variable att enthaelt das, was als Attributtabelle zum Drucken verwendet wird und kann hier gleich mit gesetzt werden. att = checked; } if (action == "parse_to_att") { // jetzt ziehen wir mit normalen Stringfunktionen die Attributtabelle aus dem HTML Dokument und verwerfen den Rest checked = excerpt_att_string(tocheck); att = checked; } if (action == "parse_to_map") { checked = excerpt_map(tocheck); parse_to_map(checked); } } } // nun noch das Objekt zuruecksetzen requester.send(null); } // fertig function position_layer(id) { // laufzeitanalyse("position_layer"); var attributelayer = document.getElementById(id+"_attributelayer"); var schattenlayer = document.getElementById(id+"_schattenlayer"); attributelayer.style.top = featurecache[id]["oben"]+"px"; schattenlayer.style.top = featurecache[id]["schattenoben"]+"px"; attributelayer.style.left = featurecache[id]["links"]+"px"; schattenlayer.style.left = featurecache[id]["schattenlinks"]+"px"; } function get_xml(doc, href, action) { // laufzeitanalyse("get_xml"); switch(action) { case "parse_to_div": if (featurecache[doc]) { if (((abs(featurecache[doc]["oben"] - MausPos[1])) > 15) && (featurecache[doc]["dashed"] == false)) { if(doc != thepermfeature) { reposition_layer(doc); } } var aufruf = "show_layer('"+doc+"')"; window.setTimeout(aufruf,delaytime); } else { xmlhttprequest(doc,href,"parse_to_div"); } break; case "parse_to_dashboard": parse_to_dashboard(doc); break; case "parse_to_att": xmlhttprequest(doc,href,"parse_to_att"); break; case "parse_to_map": xmlhttprequest(doc,href,"parse_to_map"); break; } } function reposition_layer(id) { // laufzeitanalyse("reposition_layer"); var attributelayer = ""; var schattenlayer = ""; var oben = 0; var schattenoben = 0; var links = 0; var schattenlinks = 0; var tableoffset = 209; var href = featurecache[id]["href"]; var text = featurecache[id]["rawtext"]; var DieMaus = new Array(); var maptag_oben = ""; var maptag_unten = ""; if (isPoint(id)) { DieMaus = extract_point_coords(id); } else { DieMaus[0] = MausPos[0]; DieMaus[1] = MausPos[1]; } // if DIV would be out of screen, change Popup "direction" if((DieMaus[1]-5-tableoffset) <= 2) { oben = DieMaus[1]-7; schattenoben = DieMaus[1]-2; // maptag_oben = ''; attributelayer = '
 
Ins DashboardSchliessen
'+text+'
   
'; schattenlayer = '
 
'+text+'
   
'; } else { oben = DieMaus[1]-15-tableoffset; schattenoben = DieMaus[1]-10-tableoffset; // maptag_unten = ''; attributelayer = '
   
Ins DashboardSchliessen
'+text+'
   
'; schattenlayer = '
   
'+text+'
   
'; } links = DieMaus[0]-10; schattenlinks = DieMaus[0]-5; var content = '
'+attributelayer+'
'+schattenlayer+'
'; featurecache[id]["X"] = DieMaus[0]; featurecache[id]["Y"] = DieMaus[1]; featurecache[id]["oben"] = oben; featurecache[id]["schattenoben"] = schattenoben; featurecache[id]["links"] = links; featurecache[id]["schattenlinks"] = schattenlinks; featurecache[id]["content"] = content; } function extract_point_coords(id) { // laufzeitanalyse("extract_point_coords"); var feature = document.getElementById(id+"_area"); var coords_raw = feature.coords; var coords = coords_raw.split(","); var TheMap = document.getElementById("TheMap"); coords[0] = Number(coords[0])+Number(findPosX(TheMap)); coords[1] = Number(coords[1])+Number(findPosY(TheMap)); return coords; } // write content in PopUp (two times, also written in the shadow layer) function create_divlayerobject(id,href,text) { // laufzeitanalyse("create_divlayerobject"); var content = ""; add_to_featurecache(id,href,content,text); reposition_layer(id); } function parse_to_photoboard(id,href) { // laufzeitanalyse("parse_to_photoboard"); var mesaje = ''+id+''; document.getElementById("photoboard_anchor").innerHTML = mesaje; document.getElementById("photoboard_shadowanchor").innerHTML = mesaje; document.getElementById("photoboard").style.visibility = "visible"; document.getElementById("photoboard_attributelayer").style.visibility = "visible"; document.getElementById("photoboard_schattenlayer").style.visibility = "visible"; } function parse_to_map(content) { // laufzeitanalyse("parse_to_map"); document.getElementById("map_container").innerHTML = content; } function position_photoboard() { // laufzeitanalyse("position_photoboard"); var manualWidth = "460px"; var itemID = "photoboard"; var hookID = "map_photoboard_hook"; var PosY = findPosY(document.getElementById(hookID)) + 20; var PosX = findPosX(document.getElementById(hookID)) + 40; document.getElementById(itemID).style.top = PosY + "px"; document.getElementById(itemID).style.left = PosX + "px"; // Firefox won't expand the DIV depending on content width -> manual (Safari too) if (isFirefox()) { document.getElementById(itemID).style.width = manualWidth; document.getElementById(itemID+'_anchor').style.width = manualWidth; document.getElementById(itemID+'_shadowanchor').style.width = manualWidth; } if(isSafari()) { document.getElementById(itemID).style.width = manualWidth; document.getElementById(itemID+'_anchor').style.width = manualWidth; document.getElementById(itemID+'_shadowanchor').style.width = manualWidth; } close_photoboard(); } function close_photoboard() { // laufzeitanalyse("close_photoboard"); document.getElementById("photoboard").style.visibility = "hidden"; document.getElementById("photoboard_attributelayer").style.visibility = "hidden"; document.getElementById("photoboard_schattenlayer").style.visibility = "hidden"; } // dashboard functions // position dashboard (dependent on map) function position_dashboard() { // laufzeitanalyse("position_dashboard"); var PosY = findPosY(document.getElementById("map_dashboard_hook")) - 20; var PosX = findPosX(document.getElementById("map_dashboard_hook")) + 35; document.getElementById("dashboard").style.top = PosY + "px"; document.getElementById("dashboard").style.left = PosX + "px"; // Firefox won't expand the DIV depending on content width -> manual (Safari too) if (isFirefox()) { document.getElementById('dashboard').style.width = "250px"; document.getElementById('dashboard_anchor').style.width = "250px"; document.getElementById('dashboard_shadowanchor').style.width = "250px"; } if(isSafari()) { document.getElementById('dashboard').style.width = "250px"; document.getElementById('dashboard_anchor').style.width = "250px"; document.getElementById('dashboard_shadowanchor').style.width = "250px"; } document.getElementById("dashboard").style.visibility = "hidden"; document.getElementById("dashboard_attributelayer").style.visibility = "hidden"; document.getElementById("dashboard_schattenlayer").style.visibility = "hidden"; } function parse_to_dashboard(id) { // laufzeitanalyse("parse_to_dashboard"); var backlink_text = '
<=

'; var mesaje = featurecache[id]["rawtext"]+""+backlink_text; dashedfeatures[id] = new Object(); featurecache[id]['dashed'] = true; dashedfeatures[id]['content'] = mesaje; draw_dashboard(); } function clear_dashboard() { // laufzeitanalyse("clear_dashboard"); document.getElementById("dashboard_anchor").innerHTML = ""; document.getElementById("dashboard_shadowanchor").innerHTML = ""; document.getElementById("dashboard").style.visibility = "hidden"; document.getElementById("dashboard_attributelayer").style.visibility = "hidden"; document.getElementById("dashboard_schattenlayer").style.visibility = "hidden"; dashedfeatures = new Object(); } function clear_one_dashboard(id) { // laufzeitanalyse("clear_one_dashboard"); provisional_cache = new Object(); var count = 0; for (var Item in dashedfeatures) { if(Item != id) { provisional_cache[Item] = dashedfeatures[Item]; } else { featurecache[Item]['dashed'] = false; } count ++; } dashedfeatures = new Object(); dashedfeatures = provisional_cache; if (count<=1) clear_dashboard(); else draw_dashboard(); } function draw_dashboard() { // laufzeitanalyse("draw_dashboard"); var content = ""; // get contents from global array for (var Item in dashedfeatures) { content += 'dieses Feature loeschen
'+dashedfeatures[Item]['content']; } // parse em, Manni! document.getElementById("dashboard_anchor").innerHTML = content; document.getElementById("dashboard_shadowanchor").innerHTML = content; document.getElementById("dashboard").style.visibility = "visible"; document.getElementById("dashboard_attributelayer").style.visibility = "visible"; document.getElementById("dashboard_schattenlayer").style.visibility = "visible"; } // just get the necessary portion out of "att".html function excerpt_att_string (att) { // laufzeitanalyse("excerpt_att_string"); var Beginning = att.indexOf("'); var Ending = map.indexOf(""); return map.slice(Beginning,Ending); } // get mouse position // find out if ie runs in quirks mode var docEl = ( typeof document.compatMode != "undefined" && document.compatMode != "BackCompat")? "documentElement" : "body"; // capture it for nc 4x function init_mousemove() { // laufzeitanalyse("init_mousemove"); if(document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = dpl_mouse_pos2; } // really get coordinates and write into global mouse array function dpl_mouse_pos2(e) { var posx = 0; var posy = 0; 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; } MausPos[0] = posx; MausPos[1] = posy; } // get object position function findPosX(obj){ // laufzeitanalyse("findPosX"); 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) { // laufzeitanalyse("findPosY"); 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 abs(number) { if (number < 0) number = -number; return number; } // have a nice day! // following code is only for debugging // debugging = true; // LaufZeitCounter = 0; // Countings = new Array(); // LaufZeit = window.open("leer.html","LaufZeit","width=200,height=450"); // LaufReihe = window.open("leer.html","LaufReihe","width=200,height=450"); // // function laufzeitanalyse(funktion) { // var tester = false; // for (var Eigenschaft in Countings) { // if (Eigenschaft == funktion) { // tester = true; // } // } // if(tester) { // Countings[funktion]++; // } // else { // Countings[funktion] = 1; // } // var mesaje = ""; // for (var Item in Countings) { // mesaje += Item+" : "+Countings[Item]+"\n
"; // } // LaufZeitCounter++; // mesaje += "featcache: "+count_divlayer()+"\n
"; // mesaje += "shownfeat: "+count_divlayer_vis()+"\n
"; // mesaje += "permfeat: "+count_divlayer_perm()+"\n
"; // mesaje += "zIndexCounter: "+zindexcounter+"\n
"; // update_LaufZeit(mesaje); // update_LaufReihe(funktion); // } // // function update_LaufReihe(funktion) { // LaufReihe.document.getElementById("textblock").innerHTML += funktion+"
\n"; // } // // function update_LaufZeit(mesaje) { // LaufZeit.document.getElementById("textblock").innerHTML = mesaje; // } // // function count_divlayer() { // var counti = 0; // var tekst = ""; // for (var Item in featurecache) { // counti ++; // tekst += Item+", "; // } // return tekst+" TOTAL: "+counti; // } // // function count_divlayer_vis() { // var counti = 0; // var tekst = ""; // for (var Item in shownfeatures) { // counti ++; // tekst += Item+", "; // } // return tekst+" TOTAL: "+counti; // } // // function count_divlayer_perm() { // var tekst = ""; // for (var Item = 0; permanentfeatures.length; Item++) { // tekst += Item+", "; // } // return tekst+" TOTAL: "+permanentfeatures.length; // }