[OpenLayers-Users] Attempting to get styling going on my layer.

[Scott Chapman]

Hi!

I'm close here, I think but I don't know the last piece or I'm missing
something.

I have a Vector layer that includes the Cluster strategy.  It displays
correctly if I instantiate it without the styleMap.

I made a style that should set the icon to a red image if any of the
features have a "late" attribute of 1, green otherwise.

Here's the code for the style and the layer instantiation:

        var style = new OpenLayers.Style({
            externalGraphic: "${icon}",
          } , {
            context: {
            icon: function(feature) {
              if(feature.cluster) {
                lateKiosk = 0;
                for(var c = 0; c < feature.cluster.length; c++) {
                  i = feature.cluster[c].attributes.late;
                  if( i == 1) {
                    lateKiosk = 1;
                    break;
                  }
                }
                if (lateKiosk == 1) {
                  feature.attributes.icon = "/images/red_9x9.png";
                } else {
                  feature.attributes.icon = "/images/green_9x9.png";
                }
              }
              console.log(feature);
              return feature.attributes.icon;
            }
            }
            }
          );

      var stores_layer = new OpenLayers.Layer.Vector("Stores", {
           styleMap: new OpenLayers.StyleMap({"default": style}),
         strategies: [
                      new OpenLayers.Strategy.Fixed(),
                      new OpenLayers.Strategy.Refresh({interval: 60000}),
                      new OpenLayers.Strategy.Cluster()
                     ],
           protocol: new OpenLayers.Protocol.HTTP(
                      {
                            url: "/kiosks_status_geoJSON/",
                        headers: {'Accept':'application/json'},
                         format: new OpenLayers.Format.GeoJSON()
                      }
                     )
       });

Here's the feature log from the console, showing the icon has been set:

OpenLayers.Feature.Vector.OpenLayers.Class.initialize
attributes: Object
count: 2
icon: "/images/red_9x9.png"
....

Here's confirmation that the red image is getting loaded from the web server:

127.0.0.1 - - [06/Mar/2012:10:05:32] "GET /images/red_9x9.png
HTTP/1.1" 200 183 "http://localhost:7000/source/index.html"
"Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.11 (KHTML, like Gecko)
Ubuntu/10.04 Chromium/17.0.963.56 Chrome/17.0.963.56 Safari/535.11"

I'm close but I'm missing something.  Can someone please fill in the blank?

Thanks!
Scott