Preserving style when producing web maps with the QGIS qgis2web plugin

Question

I used the qgis2web plugin to generate a set of static HTML files out of my QGIS project. This is how my layers look in QGIS:

So, there is only one layer of points and a basemap.

Very easily I converted this to a set of HTML files using qgis2web. Here is how the structure of the directory with its produced files looks like:

│   index.html
│
├───layers
│       layers.js
│       Supermarkets.js
│
├───resources
│       Autolinker.min.js
│       ol.css
│       ol.js
│       ol3-layerswitcher.css
│       ol3-layerswitcher.js
│
└───styles
        Supermarkets_style.js

Opening the index.html on a browser displays this good looking map:

The map has retained some parts from the style defined in QGIS such as the color of the points and the labels, but it has lost the graduated symbols of the points as you can see - the point circles have all the same size in the HTML page.

So, the question is obvious: Does anyone know how to preserve this part of the styling when producing web maps with the qgis2web?

Maybe by appending a SLD style file to some javascript code? If yes, where and how do I do that?

Answer 1

I think that graduated sizes are quite a recent QGIS feature (?2.10). I've therefore not implemented them yet in qgis2web. I can have a look at it, though. In answer to your other question, no, I'm not aware that you can directly use an SLD in OpenLayers3. Others might know better.

UPDATE

I've committed a change to the master branch at https://github.com/tomchadwin/qgis2web. It turns out that simple marker size was not being pulled through to OL3 exports for any renderer, not just graduated. An initial test seems to show graduated size coming through correctly now. Can you try it and see - let us know.

SECOND UPDATE

This fix has now been released as v0.29.0.

Answer 2

@gus velasco

We figured this out in chat. You are setting the size via a data-defined override on a single symbol renderer. Overrides/expressions are not supported. Instead (how I did it), use a graduated renderer, method: size, and choose your field for the classification.