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.

• Ryan S: Thanks, I'll give that a try again. Using map units gives me the results I want in QGIS.
• Ryan S: I'm not sure what contributions I could provide, I only know python right now, but this could be a good project to improve my skills. I will take a look at the code and see what I can make of it. Are you the original developer of qgis2web?
• Tom Chadwin: Yes, so I'm very happy to help - start at github.com/tomchadwin/qgis2web. And thanks!

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/