[mapserver-users] Detect and stop click on custom div inside map div

[Lid Sjur Ringheim]

Hello all,

 

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. 

 

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.

 

What im trying to accomplish is something like this http://www.mareano.no/kart/viewer.php?language=en 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.

 

You can see how the site im working on are looking at the moment here http://maps.nodc.no/sonate/ (the arrows is not put on yet, but clicking on the "Legend" text should make the div disappear (in IE)).

 

The code to create the legend dynamically is this:

 

function addLegend(){

        //oppdaterer legend ved først å fjerne den for så å lage en ny.

        var mapdiv = document.getElementById('map');

        var legend = document.getElementById("legend");

        var span = document.createElement("span");

        mapdiv.removeChild(legend);

        legend = document.createElement('div');

        mapdiv.insertBefore(legend,mapdiv.childNodes[0]);

        legend.appendChild(span);

        span.innerHTML = "Legend";

        map.events.register('click',legend,hideDiv);

if(ie){

        span.divid = "legend";

        span.unselectable = "on";

}else{

}

        span.className = "olControlNoSelect";

        legend.setAttribute("id","legend");

        for(var i = 0; i<in_layers.length;i++){

                var legitem = document.createElement("IMG");

                legend.appendChild(legitem);

                legitem.src = legenduri+in_layers[i];

        }

        if(features){

                map.events.register('click',this,getfiClick);

        }

}

 

And catching the click is this:

 

function hideDiv(evt){

        OpenLayers.Event.stop(evt ? evt : window.event);

        if(ie){

                id = event.srcElement.divid;

        }

        var ele = document.getElementById(id);

        var hidden_ele = document.getElementById(id+"_hidden");

 

        if(ele.style.display == "block"){

                ele.style.display = "none";

                hidden_ele.style.display = "block";

        }else{

                ele.style.display = "block";

                hidden_ele.style.display = "none";

        }

}

 

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.

 

Best regards

 

Sjur Ringheim Lid

NMD

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/mapserver-users/attachments/20080417/88fb19da/attachment.html