<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>How to dim or darken the map</TITLE>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN class=546101023-01082008>There
are at least two other methods worth a try</SPAN></FONT></DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN class=546101023-01082008>1)
place your map controls outside the map div;but this will probably not help with
the map pan dragging unless you did not need that.</SPAN></FONT></DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN class=546101023-01082008>2) I
have used a layer as a mask and used SLDs to control the colour. If you display
this as a layer and make sure it stacks at the top of your z-indexes you then
control the layers without conflicting with the controls.</SPAN></FONT></DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN
class=546101023-01082008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN class=546101023-01082008>I'm
sure there are other ways too.</SPAN></FONT></DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN
class=546101023-01082008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN class=546101023-01082008>Have
fun...</SPAN></FONT></DIV>
<DIV><FONT face=Arial color=#0000ff size=2><SPAN
class=546101023-01082008></SPAN></FONT><FONT size=2><FONT
size=4><BR></FONT></FONT><FONT size=2><FONT size=4><STRONG>Brad
Spencer</STRONG></FONT><BR><BR></DIV></FONT>
<BLOCKQUOTE>
<DIV class=OutlookMessageHeader dir=ltr align=left><FONT face=Tahoma
size=2>-----Original Message-----<BR><B>From:</B> users-bounces@openlayers.org
[mailto:users-bounces@openlayers.org]<B>On Behalf Of </B>Wagner, Jeffrey S.
(Mission Systems)<BR><B>Sent:</B> Saturday, 2 August 2008 6:41
AM<BR><B>To:</B> users@openlayers.org<BR><B>Subject:</B> [OpenLayers-Users]
How to dim or darken the map<BR><BR></FONT></DIV><!-- Converted from text/rtf format -->
<P><FONT face=Arial size=2>How can you dim or darken the map using a client
side control? I've attempted to create a filter div on top of the map
div with a black background that can be darkened by changing the
opacity. This works well. However, when the filter div is
displayed, I lose the ability to control the map (e.g. pan, zoom, etc --
because filter has a greater zIndex then div).</FONT></P>
<P><FONT face=Arial size=2>I setup an opacity control that goes from 0 to
2. Anything greater than 1 will darken the map.</FONT> <BR><FONT
face="Courier New" size=2>map = new
OpenLayers.Map(document.getElementById("map"), { controls: [] });</FONT>
<BR><FONT face="Courier New" size=2>function changeOpacity(byOpacity) {</FONT>
<BR> <FONT face="Courier New"
size=2>var newOpacity =
(parseFloat(OpenLayers.Util.getElement('opacityInput').value) +
byOpacity).toFixed(1);</FONT> <BR>
<FONT face="Courier New" size=2>newOpacity = Math.min(maxOpacity,
Math.max(minOpacity, newOpacity));</FONT>
<BR> <FONT face="Courier New"
size=2>OpenLayers.Util.getElement('opacityInput').value =
newOpacity.toFixed(1);</FONT> <BR>
<FONT face="Courier New" size=2>if(newOpacity <=1){</FONT>
<BR>
<FONT face="Courier New"
size=2>document.getElementById("filter").style.display="none";</FONT>
<BR>
<FONT face="Courier New"
size=2>map.baseLayer.setOpacity(newOpacity);</FONT>
<BR> <FONT face="Courier New"
size=2>}else{</FONT> <BR>
<FONT face="Courier New"
size=2>document.getElementById("filter").style.display="block";
</FONT><BR>
<FONT face="Courier New" size=2>var
dim = newOpacity-1;</FONT> <BR>
<FONT face="Courier New"
size=2>document.getElementById("filter").style.opacity=dim;</FONT>
<BR>
<FONT face="Courier New"
size=2>document.getElementById("filter").style.backgroundColor="black";
</FONT><BR> <FONT face="Courier New"
size=2>}</FONT> <BR><FONT face="Courier New" size=2>}</FONT>
</P><BR><BR></BLOCKQUOTE></BODY></HTML>