<P>What is the best strategy for coloring a polygon in a map?  I am using WMS and my map contains polygon layer(s) in which I wish to change the colors based upon some dynamic information.</P>

<P>The map is a floor plan consisting of several layers (a campus, building, section, room, and detail polygon layer on top of a vectored image drawing of the campus/building).  I have found that by creating a Polygon feature in a vector overlay, I can achieve my goal.  However, I ran into a problem with using Internet Explorer 8.  It seems that IE does not support SVG, only VML, and that VML starts to creep when adding too many features to a map.  "Too many" [for me] appears to be 40.  Firefox and Chrome load the map instantaneously; but IE takes 45 seconds for just 40 polygon features.  This number is but a fraction of what I need to add; so, I really need help to solve this.</P>

<P>
<BLOCKQUOTE>
<PRE>
            coloredPolygonLayer = new OpenLayers.Layer.WMS(
               "Colored Polygon Layer",
               {
                  displayInLayerSwitcher: false,
                  isBaseLayer: false
               }
            );

            var red = {
                strokeColor: "#800000",
                strokeOpacity: 1,
                strokeWidth: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.7
            };
            var blue = {
                strokeColor: "#000080",
                strokeOpacity: 1,
                strokeWidth: 2,
                fillColor: "#0000FF",
                fillOpacity: 0.7
            };

            //
            // Fill the red polygons.
            //
            var polygonGeometries = [];
            polygonGeometries.push( "660.9979763,-450.06682014 663.68078041,-446.75461388 683.77661324,-447.03618622 683.85334587,-485.23556328 682.4714489,-493.15101433 675.89935875,-494.919487 664.72382164,-485 661.58379173,-484.58379173 660.93322945,-452.20343971 660.9979763,-450.06682014" );
            polygonGeometries.push( "703.94480705,-446.4528904 703.97554207,-448.92936516 703.62247276,-484.80152512 700.20403099,-486.69899178 699.01870537,-494.97194099 691.6276722,-491.50213814 682.07145119,-481.42777443 681.64668465,-447.09778786 703.94480705,-446.4528904" );
            ...
            fillPolygons( coloredPolygonLayer, polygonGeometries, red );


            //
            // Fill the blue polygons.
            //
            polygonGeometries = [];
            polygonGeometries.push( "724.09494972,-372 726.3353672,-372 741.87992287,-371.93996048 744.00000191,-394.06738853 736.00000191,-406 725.00000191,-419 722.08182335,-414.23610878 724.09494972,-372" );
            polygonGeometries.push( "745.35787392,-371.64212608 767.78647041,-371.10543823 765.72203255,-409.48135376 757.43100548,-417.14139557 748.8010273,-417.10012817 745.41958427,-411.84170532 752.00000191,-406.38969803 742.34921837,-396.52966118 744.00000191,-373.90360832 745.35787392,-371.64212608" );
            ...
            fillPolygons( coloredPolygonLayer, polygonGeometries, blue );



            ...



         function fillPolygons( layer, polygonGeometries, style ) {
            //
            // Parse geometries to get the specified polygons.  Specifically,
            // parse the points of the polygon and add them to the linear ring
            // array.  The linear ring defines the boundary of each polygon.
            //
            // This parsing is only necessary since store the polygon geometries
            // in the same format as sent from the map server (i.e., a
            // space-delimited string of point sets, each set being
            // comma-delimited.
            //
            var linearRings = [];
            var polygonPoints = null;
            var polygonPoints = null;
            var nextPoint = null;

            for ( var i = 0; i < polygonGeometries.length; i++ ) {
               polygonPoints = polygonGeometries[ i ].split( ' ' );

               polygonPoints = [];
               nextPoint = null;

               for ( var j = 0; j < polygonPoints.length; j++ ) {
                  nextPoint = polygonPoints[ j ].split( ',' );
                  polygonPoints.push( new OpenLayers.Geometry.Point( nextPoint[ 0 ], nextPoint[ 1 ] ) );
               }

               linearRings.push( new OpenLayers.Geometry.LinearRing( polygonPoints ) );
            }

            //
            // Fill selected polygons.
            //
            for ( var i = 0; i < linearRings.length; i++ ) {
               layer.addFeatures( [ new OpenLayers.Feature.Vector( linearRings[ i ], null, style ) ] );
            }
         }
</PRE>
</BLOCKQUOTE>
</P>

<P>I am a newbie to OpenLayers and, for the most part, I have been able to solve most every problem that I have (e.g., highlight polygon, select polygon, drag marker, styles, etc.).  This one has me stumped.</P>

<P>The polygons that I am coloring have significance only at the time the map is loaded.  I.e., their color represents various things in various contexts (e.g., volume or assignments or ...).  I do not need to hover, select, hyperlink, or otherwise reference the polygon in any way.  So, adding it as a feature to the vector layer is not necessary [for me].  All I really need is to color each of them one time when the map is loaded.</P>

<P>Can anyone tell me the best approach for this?  I have seen a lot of "hints" at how to accomplish this; but no solutions yet.  E.g., I have seen SLD; but, like with the technology, don't know a lot about this.  It looks like I have to create a file to be posted to the map server.  I really need this to be dynamic, as the context/colors may change between page loads.</P>

<P>Any help is greatly appreciated, especially code examples.</P>

<P>Sincerely,</P>
<P>Ivan</P>

        
<br/><hr align="left" width="300" />
View this message in context: <a href="http://osgeo-org.1803224.n2.nabble.com/WMS-polygon-fill-color-tp6374589p6374589.html">WMS polygon fill color</a><br/>
Sent from the <a href="http://osgeo-org.1803224.n2.nabble.com/OpenLayers-Users-f1822463.html">OpenLayers Users mailing list archive</a> at Nabble.com.<br/>