<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<META NAME="Generator" CONTENT="MS Exchange Server version 6.5.7653.38">
<TITLE>How to dim or darken the map</TITLE>
</HEAD>
<BODY>
<!-- Converted from text/rtf format -->
<P><FONT SIZE=2 FACE="Arial">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 SIZE=2 FACE="Arial">I setup an opacity control that goes from 0 to 2. Anything greater than 1 will darken the map.</FONT>
<BR><FONT SIZE=2 FACE="Courier New">map = new OpenLayers.Map(document.getElementById("map"), { controls: [] });</FONT>
<BR><FONT SIZE=2 FACE="Courier New">function changeOpacity(byOpacity) {</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">var newOpacity = (parseFloat(OpenLayers.Util.getElement('opacityInput').value) + byOpacity).toFixed(1);</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">newOpacity = Math.min(maxOpacity, Math.max(minOpacity, newOpacity));</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">OpenLayers.Util.getElement('opacityInput').value = newOpacity.toFixed(1);</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">if(newOpacity <=1){</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">document.getElementById("filter").style.display="none";</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">map.baseLayer.setOpacity(newOpacity);</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">}else{</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">document.getElementById("filter").style.display="block"; </FONT>
<BR> <FONT SIZE=2 FACE="Courier New">var dim = newOpacity-1;</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">document.getElementById("filter").style.opacity=dim;</FONT>
<BR> <FONT SIZE=2 FACE="Courier New">document.getElementById("filter").style.backgroundColor="black"; </FONT>
<BR> <FONT SIZE=2 FACE="Courier New">}</FONT>
<BR><FONT SIZE=2 FACE="Courier New">}</FONT>
</P>
<BR>
<BR>
</BODY>
</HTML>