How to make line size scale dependent in OpenLayers webmap made using qgis2web?

Question

I've made a map in QGIS v3.2 with a vector layer named "Roads." In QGIS, the line widths representing roads are set to "meters to scale." When viewed in QGIS, this behaves exactly as I want. When I zoom in, the roads appear wider, and when I zoom out, they appear more narrow.

However, after exporting this as an OpenLayers webmap, the opposite is true. The roads appear widest when zoomed out, and become more narrow as I zoom in. I've played around with the line width in the JS files and have made them more narrow, but still not scale dependent. What I really want is to make it scale dependent, just like when viewed in QGIS.

Here's a sample of the code I'm working with. On my last attempt at fixing this, I set the width to 'auto.' This just made the lines consistently narrow, same as if I set it to '1'.

 var style = [ new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(237,206,174,1.0)',
        lineDash: null,
        lineCap: 'round',
        lineJoin: 'bevel',
        width: 'auto',
    }),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement)
})];

return style;

So, can somebody help me correct this or direct me to a possible solution? I haven't been able to find something that works yet. FWIW, I'm new to Javascript and am learning as I go here...

Answer 1

"Metres at scale" isn't supported by qgis2web (yet - contributions welcome). However, "Map Units" is supported, though not well tested. If you are able to use map units, that could give you the style you need.

Answer 2

An alternative is to use a polygon instead of a line feature in QGIS to give you the visual affect you want (create a buffer around the line feature). An example is here http://www.tflmap.com/