I am trying to make some kind of line-drawing editor over OpenStreet map using OpenLayers. I am able to draw points, connect them into lines, and it all looks good, but if I unzoom, stroke width is the same as on previous zoom (instead of being smaller). And if I unzoom al the way up to 0, line width (stroke) is still the same.

Now, I made this work the way I want it using context on Style, but I don't like the way it works...


Is there some kind of setting to make all lines scalable when I am changing zoom (adapt stroke width based on current zoom level)?

Can I set stroke width in meters or millimeters?

1 Answer 1


My solution at the moment:

  1. Define a context object with method for calculating line width (this can be done in style definition, I wrote it like this for readability):

    var context = 
        getWidth: function (feature) 
            //I am setting attribute widthInMeters to each feature, and I am using that
            //for a calculation of line width, where 1m = 100px
            var r = map.getResolution() * 10000000;
            var w = feature.attributes.widthInMeters * (100 / parseFloat(Math.round(r * 100) /100).toFixed(2));
            return w;
  2. Define a style with context and add it to vector layer:

    var style = new OpenLayers.Style(
        strokeWidth: "${getWidth}",  //Context method call to get the width  (context.getWidth)
        strokeLinecap: "square"  
        context: context 

Now, this works. If width of a line is 1 meter, it is calculating the correct length on every zoom change, and it looks good. But, this setup is really complicated on larger code (my code is a larger code) so I am trying to find a way to do this in style definition, and not to manually calculate it...

If someone suggests a better solution, it will be accepted as an answer.

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.