[OpenLayers-Users] How to dim or darken the map

[bradleyspencer]

How to dim or darken the mapThere are at least two other methods worth a try
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.
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.

I'm sure there are other ways too.

Have fun...

Brad Spencer


  -----Original Message-----
  From: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org]On
Behalf Of Wagner, Jeffrey S. (Mission Systems)
  Sent: Saturday, 2 August 2008 6:41 AM
  To: users at openlayers.org
  Subject: [OpenLayers-Users] How to dim or darken the map


  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).

  I setup an opacity control that goes from 0 to 2.  Anything greater than 1
will darken the map.
  map = new OpenLayers.Map(document.getElementById("map"), { controls:
[] });
  function changeOpacity(byOpacity) {
          var newOpacity =
(parseFloat(OpenLayers.Util.getElement('opacityInput').value) +
byOpacity).toFixed(1);
          newOpacity = Math.min(maxOpacity, Math.max(minOpacity,
newOpacity));
          OpenLayers.Util.getElement('opacityInput').value =
newOpacity.toFixed(1);
          if(newOpacity <=1){
                  document.getElementById("filter").style.display="none";
                  map.baseLayer.setOpacity(newOpacity);
          }else{
                  document.getElementById("filter").style.display="block";
                  var dim = newOpacity-1;
                  document.getElementById("filter").style.opacity=dim;
                  document.getElementById("filter").style.backgroundColor="b
lack";
          }
  }



-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20080802/8f1cd235/attachment.html