5

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:

enter image description here

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:

enter image description here

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?

2 Answers 2

7

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.

5
  • After I upgraded the plugin through the Manage and Install Plugins menu, the qgis2web tool throws an error when the Open Layers 3 option is selected. Here is the screenshot of the error: dropbox.com/s/c37x3m57npuxuro/Error%20in%20qgis2web.PNG?dl=0 If Leaflet is selected, there is no error, and the files are produced, but when opening the index.html file, a blank page is shown. Oct 13, 2015 at 19:12
  • Ah, you've experienced an existing issue documented at [github.com/tomchadwin/qgis2web/issues/113][1]. Change the precision dropdown so that it has a value (and also check there are no other blank dropdowns), and that error should disappear. Oct 14, 2015 at 8:10
  • Thanks for that. The points are still exported without the graduate style though. I am not very familiar with plugins, but the last change in changelog dates on 2015/10/08. Here is the screenshot: dropbox.com/s/vcqls4vx7ppj8n8/Changelog.PNG?dl=0 I am using QGIS 2.10.1 on Windows. Also, if that helps, I am sending you the the shapefile I am working on and the SLD file that contains the graduated style: dropbox.com/s/qycfr2fhoe6m6q8/QGIS_Sample.zip?dl=0 Oct 14, 2015 at 8:35
  • I've not released the relevant fix as a version on the official QGIS plugin repository yet. To get these fixes now, download the plugin from Github, and overwrite the plugin files on your machine. I'll release a version as soon as I can. Oct 14, 2015 at 9:37
  • Working great now. Wonderful plugin! I am producing a GIS tutorial where I will integrate the use of qgis2web. Oct 14, 2015 at 10:04
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.

1
  • I used this as well,however, I have 2 data sets I need to display side by side ranging from 0-13 and 24-93. So I had to use the override to reduce the sizes on the 0-13 data set but this does not reflect in QGIS2web. Please how do I rectify this?
    – user118372
    Jan 10, 2020 at 11:11

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.