I want to render more than one polygon for a feature in a vector layer. So, for example given a polygon render it as normal, then render it again with a different colour and offset by a Y value. I may also need to operate on the additional geometry to clip it.

This would give a pseudo 3D effect.

I know I can do this by using multiple layers but this seems really inefficient.

I looked at extending the SVG renderer to do this and have successfully rendered multiple polygons from the drawPolygon method. BUT the style is fixed as this method simply adds the SVG path to a created node.

Is there a better way to achieve this. Ideally, I want to render a wall, floor and roof for a feature, all will have differing geometries and colours. But I don't want to have to pull the geometry from the server 3 times which is what will happen if I use three layers.


The key was to extend the renderer at the right level and use the existing renderer methods to draw the polygons rather than interfere with them:-

OpenLayers.Renderer.SVGOFFSET = OpenLayers.Class(OpenLayers.Renderer.SVG, {

eraseGeometry: function(geometry, featureId) {
    return OpenLayers.Renderer.SVG.prototype.eraseGeometry.apply(this, arguments);

drawFeature: function(feature, style) {


    return OpenLayers.Renderer.SVG.prototype.drawFeature.apply(this, arguments);

drawPolygon: function(node, geometry) {
    if(geometry.id.match(/offset/g) === null && geometry.id.match(/extrude/g) ===null) {

        this.drawExtrude(geometry, node._style);
        return this.drawOffset(geometry, node._style);


    return OpenLayers.Renderer.SVG.prototype.drawPolygon.apply(this, arguments);

I then wrote the functions, drawOffset, drawExtrude, removeOffset and removeExtrude to do my custom stuff.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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