[OpenLayers-Users] Change Vector Point feature class styles dynamically.

[Andreas Hocevar]

Hi,

style contexts only work in a StyleMap, not in a Style. So the best 
thing to do is create a StyleMap with custom renderIntents (e.g. 
"myStyle1"), and to draw a feature with that intent instead of "default" 
you just say layer.drawFeature(feature, "myStyle1").

Regards,
Andreas.

Jonathan Sawyer wrote:
> I have a Vector layer being initialized with a default style. I am 
> then adding new vector features (Points) dynamically via Ajax calls 
> and GeoJSON data.
>
> Anyway, if I try to apply a non-default style to a Point dynamically 
> using something similar to this code:
>
> {{{
>         /* init code */
>
>         var defaultStyle = new OpenLayers.Style({
>             pointRadius: "${radius}",
>             fillColor: "#00ddff",
>             fillOpacity: 1,
>             strokeColor: "#008899",
>             strokeWidth: 1,
>             strokeOpacity: 1,
>         }, {
>             context: {
>                 radius: function(feature) {
>                     var pix = 3;
>                     if (feature.cluster) {
>                         pix = Math.min(feature.attributes.count, 5);
>                     }
>                     return pix;
>                 },
>                 width: function(feature) {
>                     return (feature.cluster) ? 3 : 1;
>                 }
>             }
>         })
>
>        var layer = new OpenLayers.Layer.Vector("the name", {
>                 strategies: strat, // Cluster, Fixed
>                 protocol: new OpenLayers.Protocol.HTTP({
>                     url: data.url, // the URL
>                     format: frmt // GeoJSON
>                 }),
>                 projection: new OpenLayers.Projection('EPSG:4326'),
>                 styleMap: new OpenLayers.StyleMap({
>                     "default": defaultStyle,
>                     "select": {
>                         fillColor: "#8aeeef",
>                         strokeColor: "#32a8a9"
>                     }
>                 })
>             })
>
>        map.addLayer(layer); // ==> map.layers[2]
>
>         /* problem code */
>
>        // map.layers[2].features[0] is the first point (in thousands 
> of points) in this layer
>        map.layers[2].features[0].style = new OpenLayers.Style({
>                 pointRadius: "${radius}",
>                 fillColor: "#7766ff",
>                 fillOpacity: 1,
>                 strokeColor: "#2222ff",
>                 strokeWidth: 1,
>                 strokeOpacity: 1
>             }, {
>                 context: {
>                     radius: function(feature) {
>                         var pix = 3;
>                         if (feature.cluster) {
>                             pix = Math.min(feature.attributes.count, 5);
>                         }
>                         return pix;
>                     },
>                     width: function(feature) {
>                         return (feature.cluster) ? 3 : 1;
>                     }
>                 }
>             });
> }}}
>
> the Point in this layer disappears. What I want to do is change the 
> style to anything I want.
>
> I must be missing something or misunderstanding how styles are applied 
> in OpenLayers. Thanks in advance for any and all help. I really 
> appreciate it.
>
> -- 
> Jonathan Sawyer
> Geographic Information Network of Alaska (GINA)
> University of Alaska Fairbanks
> ------------------------------------------------------------------------
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>   


-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.