allow for setting opacity of alpha image divs. also give both Icon and Marker setOpacity() functions. added tests and modified examples/markers.html to show how to do it.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@1541 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/markers.html

@@ -21,20 +21,29 @@
                 
             map.addLayer(layer);
             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-            var markers = new OpenLayers.Layer.Markers( "Markers" );
+
-            map.addLayer(markers);
             var newl = new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} );
             map.addLayer(newl);
+
+            var markers = new OpenLayers.Layer.Markers( "Markers" );
+            map.addLayer(markers);
+
             var size = new OpenLayers.Size(10,17);
             var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
             var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
             markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
-            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),icon.clone()));
+
+            var halfIcon = icon.clone();
+            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));
+
             marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
+            marker.setOpacity(0.2);
             marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); Event.stop(evt); });
             markers.addMarker(marker); 
             map.addControl(new OpenLayers.Control.LayerSwitcher());
             map.zoomToMaxExtent();
+
+            halfIcon.setOpacity(0.5);
         }
         // -->
     </script>

lib/OpenLayers/Icon.js

@@ -87,6 +87,16 @@ OpenLayers.Icon.prototype = {
         return this.imageDiv;
     }, 
 
+    
+    /** Change the icon's opacity
+     * @param {float} opacity
+     */
+    setOpacity: function(opacity) {
+        OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, null, null, 
+                                            null, null, null, null, opacity);
+
+    },
+    
     /**
     * @param {OpenLayers.Pixel} px
     */

lib/OpenLayers/Marker.js

@@ -98,6 +98,15 @@ OpenLayers.Marker.prototype = {
         }        
     },
     
+    /** Change the opacity of the marker by changin the opacity of 
+     *   its icon
+     * 
+     * @param {float} opacity Specified as fraction (0.4, etc)
+     */
+    setOpacity: function(opacity) {
+        this.icon.setOpacity(opacity);
+    },
+
     /** Hide or show the icon
      * 
      * @param {Boolean} display

lib/OpenLayers/Util.js

@@ -169,9 +169,11 @@ OpenLayers.Util.alphaHack = function() {
 * @param {String} position
 * @param {String} border
 * @param {String} sizing 'crop', 'scale', or 'image'. Default is "scale"
+* @param {float} opacity Specified as fraction (0.4, etc)
 */ 
 OpenLayers.Util.modifyAlphaImageDiv = function(div, id, px, sz, imgURL, 
-                                               position, border, sizing) {
+                                               position, border, sizing, 
+                                               opacity) {
 
     OpenLayers.Util.modifyDOMElement(div, id, px, sz);
 
@@ -182,15 +184,25 @@ OpenLayers.Util.modifyAlphaImageDiv = function(div, id, px, sz, imgURL,
     }
     OpenLayers.Util.modifyDOMElement(img, div.id + "_innerImage", null, sz, 
                                      "relative", border);
-
+    if (opacity) {
+        div.style.opacity = opacity;
+        div.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
+    }
+    
     if (OpenLayers.Util.alphaHack()) {
+
         div.style.display = "inline-block";
         if (sizing == null) {
             sizing = "scale";
         }
+        
         div.style.filter = "progid:DXImageTransform.Microsoft" +
                            ".AlphaImageLoader(src='" + img.src + "', " +
                            "sizingMethod='" + sizing + "')";
+        if (div.style.opacity) {
+            div.style.filter += " alpha(opacity=" + div.style.opacity * 100 + ")";
+        }
+
         img.style.filter = "progid:DXImageTransform.Microsoft" +
                                 ".Alpha(opacity=0)";
     }

tests/test_Icon.html

@@ -24,6 +24,18 @@
         t.eq( cloned.url, "b", "cloned.url does change when edited" );
     }
 
+    function test_02_Marker_setOpacity(t) {
+        t.plan( 2 );
+        
+        icon = new OpenLayers.Icon("a",new OpenLayers.Size(5,6));
+
+        t.ok(!icon.imageDiv.style.opacity, "default icon has no opacity");
+        
+        icon.setOpacity(0.5);
+
+        t.eq(icon.imageDiv.style.opacity + "", "0.5", "icon.setOpacity() works");
+    }
+
   // -->
   </script>
 </head>

tests/test_Marker.html

@@ -45,6 +45,32 @@
         
     }
 
+    function test_02_Marker_setOpacity(t) {
+        t.plan( 2 );
+        
+        var map = new OpenLayers.Map("map");
+
+        var url = "http://octo.metacarta.com/cgi-bin/mapserv";
+        layer = new OpenLayers.Layer.WMS(name, url);
+
+        map.addLayer(layer);
+        
+        mlayer = new OpenLayers.Layer.Markers('Test Layer');
+        map.addLayer(mlayer);
+               
+        map.zoomToExtent(new OpenLayers.Bounds(-50,-50,50,50));
+
+        //onscreen marker
+        var ll = new OpenLayers.LonLat(0,0);
+        var marker = new OpenLayers.Marker(ll);
+        mlayer.addMarker(marker);
+
+        t.ok(!marker.icon.imageDiv.style.opacity, "default marker has no opacity");
+        
+        marker.setOpacity(0.5);
+
+        t.eq(marker.icon.imageDiv.style.opacity + "", "0.5", "marker.setOpacity() works");
+    }
 
   // -->
   </script>

tests/test_Util.html

@@ -279,7 +279,7 @@
     }
 
     function test_09_Util_modifyAlphaImageDiv(t) {
-        t.plan( 17 );
+        t.plan( 18 );
 
         var imageDiv = OpenLayers.Util.createAlphaImageDiv();
 
@@ -290,8 +290,9 @@
         var id = "boo";
         var border = "1px solid";
         var sizing = "crop";
+        var opacity = "0.5";
 
-        OpenLayers.Util.modifyAlphaImageDiv(imageDiv, id, xy, sz, img, position, border, sizing);
+        OpenLayers.Util.modifyAlphaImageDiv(imageDiv, id, xy, sz, img, position, border, sizing, opacity);
 
         if (!isMozilla)
             t.ok( true, "skipping element test outside of Mozilla");
@@ -305,7 +306,8 @@
         t.eq( imageDiv.style.width, sz.w + "px", "image.style.width set correctly");    
         t.eq( imageDiv.style.height, sz.h + "px", "image.style.height set correctly");    
 
-        t.eq( imageDiv.style.position, position, "image.style.positionset correctly");    
+        t.eq( imageDiv.style.position, position, "image.style.position set correctly");    
+        t.eq( imageDiv.style.opacity, opacity, "image.style.opacity set correctly");    
 
 
         image = imageDiv.firstChild;
@@ -328,7 +330,7 @@
 
             var filter = "progid:DXImageTransform.Microsoft" +
                          ".AlphaImageLoader(src='" + img + "', " +
-                         "sizingMethod='" + sizing + "')";
+                         "sizingMethod='" + sizing + "') alpha(opacity=" + opacity *100 + ")";
             t.eq(imageDiv.style.filter, filter, "div filter value correctly set");
 
             filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
@@ -340,7 +342,7 @@
             t.ok(true, "image filter value not set (not in IE)");
         }
 
-        var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border);
+        var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border, "scale", opacity);
         if (OpenLayers.Util.alphaHack()) {
             var filter = "progid:DXImageTransform.Microsoft" +
                          ".AlphaImageLoader(src='" + img + "', " +