Is there any approach to define custom OpenLayers.Renderer.symbol by a function?

For example, instead of making a symbol for each 3-pointed, 4-pointed, 5-pointed etc. star

OpenLayers.Renderer.symbol.star3 = [ /* coordinates array of 3-pointed star */ ];
OpenLayers.Renderer.symbol.star4 = [ /* coordinates array of 4-pointed star */ ];
OpenLayers.Renderer.symbol.star5 = [ /* coordinates array of 5-pointed star */ ];

I want to shorten the code and create a group common symbol defined by a function, like:

OpenLayers.Renderer.symbol.pointedstar(n) = function(n) { /* return array of n-pointed star */ }

and then have it in graphicName style definition:

starstyle = new OpenLayers.Style({ graphicName: "pointedstar(3)", ... });

and even make it depending on feature properties:

starStyle = new OpenLayers.Style(
    { graphicName: "${numofpoints}", ...},
    { context:
         { "numofpoints": /* features contain a property "numberofpoints" to use */
             function(e) { return pointedstar(e.feature.attribute.numberofpoints); }

1 Answer 1


I do this with the externalGraphic property so I don't see why it wouldn't work with graphicName.

I modified my existing code for graphicName and it does work. I've copied the important bits below.

Note that you need to put the symbol into the OpenLayers.Renderer.symbol object and then return the name of that symbol. I believe a StyleMap is necessary for the context functions to work?

style_custom = new OpenLayers.StyleMap({"default": new OpenLayers.Util.applyDefaults( { graphicName: "${getGraphic}", graphicWidth:"${getSize}", rotation : "${angle}", ... }, OpenLayers.Feature.Vector.style["default"]), "select": new OpenLayers.Util.applyDefaults(...), "temporary": new OpenLayers.Util.applyDefaults(...) } style_custom.styles["temporary"].context = style_custom.styles["default"].context = style_custom.styles["select"].context = { getGraphic: function(e) { var hd = (~~(((e.attributes.angle)/45) ))%8; var symName = 'star'+ hd; //prefix unique to style_custom if( typeof OpenLayers.Renderer.symbol[symName] == 'undefined' ){ //avoid regenerating existing shape OpenLayers.Renderer.symbol[symName] = [0,0,hd*2,hd*2]; //test shape } return symName; }, getSize: function(e) { ... }, ... };

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.