<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EpostStil17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=NO-BOK link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hello all,<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><span lang=EN-US>Im at the moment experimenting with OpenLayers
and trying to create a <div> element on top of the map that should
contain a legend of the layers in the map. <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>I’d like to be able to make the div “disappear”
the same way as the default layerswitcher and overview map controls by clicking
on a image, but when I make a function to do this the click is passed on to the
map object also. And as I got click on map layers set to create a
GetFeatureInfo request to the server that is also done when clicking inside the
custom div.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>What im trying to accomplish is something
like this <a href="http://www.mareano.no/kart/viewer.php?language=en">http://www.mareano.no/kart/viewer.php?language=en</a>
where you can click on the arrow images to hide the div’s. That site is a
modified version of the default ArcIMS site so im not able to reuse to much in
the new site.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>You can see how the site im working on are
looking at the moment here <a href="http://maps.nodc.no/sonate/">http://maps.nodc.no/sonate/</a>
(the arrows is not put on yet, but clicking on the “Legend” text should
make the div disappear (in IE)).<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>The code to create the legend dynamically is
this:<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal>function addLegend(){<o:p></o:p></p>
<p class=MsoNormal> //oppdaterer
legend ved først å fjerne den for så å lage en ny.<o:p></o:p></p>
<p class=MsoNormal> <span
lang=NO-NYN>var mapdiv = document.getElementById('map');<o:p></o:p></span></p>
<p class=MsoNormal><span lang=NO-NYN>
</span><span lang=EN-US>var legend =
document.getElementById("legend");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> var
span = document.createElement("span");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
mapdiv.removeChild(legend);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
legend = document.createElement('div');<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
mapdiv.insertBefore(legend,mapdiv.childNodes[0]);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
legend.appendChild(span);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
span.innerHTML = "Legend";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
map.events.register('click',legend,hideDiv);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>if(ie){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
span.divid = "legend";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
span.unselectable = "on";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}else{<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
span.className = "olControlNoSelect";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
legend.setAttribute("id","legend");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
for(var i = 0; i<in_layers.length;i++){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
var legitem = document.createElement("IMG");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
legend.appendChild(legitem);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
legitem.src = legenduri+in_layers[i];<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
if(features){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
map.events.register('click',this,getfiClick);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>And catching the click is this:<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>function hideDiv(evt){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
OpenLayers.Event.stop(evt ? evt : window.event);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
if(ie){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
id = event.srcElement.divid;<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
var ele = document.getElementById(id);<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
var hidden_ele = document.getElementById(id+"_hidden");<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
if(ele.style.display == "block"){<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
ele.style.display = "none";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
hidden_ele.style.display = "block";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
}else{<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
ele.style.display = "block";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
hidden_ele.style.display = "none";<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>
}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>}<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>This became a long post, but I hope you
understand the problem and see how it can be done the right way or point me to
where I can find information about the right way to do it.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Best regards<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Sjur Ringheim Lid<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>NMD<o:p></o:p></span></p>
</div>
</body>
</html>