I am using dynamic (attribute-dependent) symbolizers on a vector layer. In this CodePen example, we have the colors of the states depeding on the PERSONS attribute, which given the number of inhabitants of that state.

I use the context property when initializing the Style, I use a StyleMap and everything works just fine.

/* Symbolizer */
symbolizer = {
    fillColor: '${getFillColor}',
    fillOpacity: 1,
    strokeWidth: 1,
    graphicName: 'circle'

/* Rule */
var rule = new OpenLayers.Rule({
    filter: filter,
    symbolizer: symbolizer

/* Context */
var context = {
    getFillColor: function(feature) {
        var persons = feature.attributes.PERSONS;
        return convertNumberToColor({
            value: persons,
            min: 453588,
            max: 29760021,
            colorRange: 'gr'

/* Style */
var style = new OpenLayers.Style({}, {
    context: context

/* Style map */
var styleMap = new OpenLayers.StyleMap(style);
vector.styleMap = styleMap;

The problem comes when I try to highlight one of the features. By highlighting I mean this: maintain all the symbolizers of the feature and only change some. For example, in a red polygon, the highlighting would mantain its red color, but wuld change the strokeWidth.

var highlight = function(feature) {
    feature.style = $.extend({}, symbolizer, {
        strokeWidth: 5

As you can see, I want to perform the highlighting in the feature.style property, because it does not interfere with the original styleMap and so I can easily remove the highlighting.

Please check out the CodePen above. When highlighting California, the fillColor should remain red, but it changes to green. The same happens with Texas.

Would you please help me to correctly implement highlighting in the feature.style propert when using attribute-dependent symbolizers?

2 Answers 2


After some more research, I found the solution here.

The feature.style property only accepts the symbolizer as hash style. So, we must use the styleMap to create a symbolizer for the current feature

var highlight = function(feature) {
    var style = $.extend({}, styleMap.createSymbolizer(feature), {
        strokeWidth: 5
    feature.style = style;

I created a new CodePen, where the highlighting works correctly. :)


One other option would be to define a new Style and assign the stroke width... but the solution you found looks smarter ;)

var highlight = function(feature) {
 feature.style = new OpenLayers.Style();
feature.style.strokeWidth = 3;

working example: http://codepen.io/anon/pen/doeMEm

  • Thanks. Your solution is nice too. I prefer mine because there may be many dynamic properties. So, the createSymbolizer mthod is really useful. :)
    – joaorodr84
    Commented Jul 9, 2015 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.