1

How do I get a point features layer containing roughly 2800 labeled features to perform smoothly when exported (and converted to GeoJSON) with qgis2web?

Specifics: I use qgis2web 3.4.0 and QGIS 3.2.3 to create web maps and am experiencing performance issues with the following map.

http://www.rv-k.de/LK_Esslingen/Fahrradwegweisung/Abstimmung/Online.html

Things I have tried:

  1. File size
    Overall file sizes are not very large. Still, I tried to further reduce file size by changing export precision settings. No performance gains.

  2. Number of features per layer
    The layer "Knoten" contains roughly 2800 point features and seems to cause the performance issues because broken up into 5 different layers (with 700 features per layer max) and turning off labels for each layer, the map performs fine. (Other layers contain significantly less features.)

http://www.rv-k.de/LK_Esslingen/Fahrradwegweisung/TestGIS/5Layerstest/5LayersGIS.html

  1. Clustering features
    Still, I need all features to display as one layer and with labels. Therefore, I tried clustering using https://github.com/Leaflet/Leaflet.markercluster. There are still performance issues because all 2800 features are loaded at the same time once you go beyond zoom level 16. Still, I need the markers to display individually at this point and therefore set (disableClusteringAtZoom: 16).

http://www.rv-k.de/LK_Esslingen/Fahrradwegweisung/TestGIS/Clustertest/WebGIS.html

  • It seems to me this is not right tool for such amount of data. Look at server side rendering solutions like qgis cloud or nextgis.com. Both have QGIS plugins to publish project as web map. I tested on nextgis.com - 10K features run smoothly. – Dmitry Baryshnikov Nov 23 '18 at 8:18
  • I tried creating a webmap using nextgis link. Are there ways to improve performance even more? – luke_hill Nov 30 '18 at 12:01
  • It raver fast at my browser. But if you need more speed you can: 1) Divide your data for scale levels (setup your map to show points at more detail scale). 2) Switch to premium plan (Premium Web GIS processes twice more requests than Free at the same time, which means 2x speed for map rendering and multi-user work). – Dmitry Baryshnikov Nov 30 '18 at 12:12
0

You could investigate GeoJSON-VT:

https://blog.mapbox.com/rendering-big-geodata-on-the-fly-with-geojson-vt-4e4d2a5dd1f2

It generates vector tiles from JSON on the fly, in the browser. I've not used it myself, so I can't offer any personal feedback, but this seems the most likely potential solution without fundamentally changing how you generate this map.

UPDATE: While GeoJSON-VT generates MBVTs on the fly, Leaflet itself cannot read those vector tiles by itself. A good solution is the Leaflet.VectorGrid plugin, which uses GeoJSON-VT under the hood, and allows the sliced GeoJSON to be added to a Leaflet map. There is a demo at http://leaflet.github.io/Leaflet.VectorGrid/demo-geojson.html.

  • Thanks for the advice. I am new to embedding leaflet-plugins into js-files and know little about coding. How do I embed the VectorGrid-Plugins? I have included the script in the index.html using <script src="unpkg.com/leaflet.vectorgrid@latest/dist/…> from the github directory. Which variables do I need to create? Following API reference I found var geoJsonDocument = { type: 'FeatureCollection', features: [ ... ] }; L.vectorGrid.slicer(geoJsonDocument, { vectorTileLayerStyles: { sliced: { ... } } }).addTo(map); – luke_hill Nov 30 '18 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.