QGIS qgis2web
If you look round the QGIS universe, you’ll find maps published on the web. You can find screenshots of QGIS, of course, in tutorials. But you will also find maps set into windows with slide and zoom controls. You can also find some sometimes spectacular 3D box models, with mouse and touch controls for rotation and zoom.
QGIS users are not creating these displays by hand‐cafting Javascript. The libraries are too difficult. They have plugins to integrate.
Summary
The qgis2web plugin is for flat, sliding maps with zoom and other controls
The plugin is a phenomenon. Trying to translate the output of QGIS into webpages, complete with translation of the images, Javascript drivers, associated CSS and other web resources, is a job that borders on the unlikely
The unlikeliness translates into a limited set of options for customisation (though, of course, you could hack further on the results)
There are issues around the publishing of the material also. I couldn’t be bothered to try
Note also that there are other plugins available,
This is a QGIS plugin which visualizes DEM and vector data in 3D on web browsers. You can build various kinds of 3D objects and generate files for web publishing in simple procedure. In addition, you can save the 3D model in glTF format for 3DCG or 3D printing
Mappia Publisher
QGIS Cloud
(untested) Load work to qgiscloud.com
GIS Cloud Publisher
(untested) Load work to giscloud.com
Javascript
To produce sliding maps in webpages inevitably involves a stack of Javascript. Qgis2Web claims, “no server‐side software required”. Which is true, but you will need to get Javascript into the webpage, and multiple files, and online delivery will need web hosting somewhere.
Qgis2Web
From help,
qgis2web generates a web map from your current QGIS project, either as OpenLayers, Leaflet, or Mapbox GL JS. It replicates as many aspects of the project as it can, including layers, styles (including categorized and graduated), and extent. No server‐side software required.
Note that this means 2D maps in standalone webpages or controllable containers. Also that OpenLayers, Leaflet and Mapbox are different Javascript libraries with their own strengths and weaknesses.
Usage
All comments about my slightly older version. Load the plugin,
Plugins > Manage and Install Plugins
Search for ‘qgis2web’
‘Install Plugin’
After that, go to,
Web > qgis2veb
And a dialogue will appear with all the settings and save options.
Keep the map as simple as possible. QGIS2Web will,
complain about big maps “A large number of features are present in the map”
can’t handle photography layers, sometimes
target layer‐groups wholesale, whether layers are switched on or off
Immediate problems
Switching output format can crash or vanish previews. Hide layers before a switch of format. See the article listed in references below
Styling can be very different in different formats (Leaflet support made one of my maps grotesque)
Some layers can confuse overlay expectations. I had a ‘named places’ layer that hid all lower layers in Openlayers and Mapbox format
Creating a webpage from a map built from layers
QGIS2Web doesn’t like many layers, or much information, because neither does the web. Some tutorials mention a second panel under the ‘layers’ tab, but my version didn’t have this. The plugin can create a web map that can switch layers through control widgets, which is another factor.
This makes it difficult to publish a QGIS map that is constructed from multiple layers. Look at the tutorials, and they nearly all describe information, often within one layer with attributes, that is published over a one‐layer simple map, or a ‘baselayer’ loaded from a web server.
Is there a way round this? I found one, though not guaranteeing this is the best/easiest way. Save the map, completed from it’s layers, as a TIFF image. In QGIS, this will, as far as I know (and I made a cross‐check with a TIFF scan tool) QGIS will load the resulting TIFF file with data like the Coordinate Reference System, pixel sizing, coordinate extents and so forth. So the TIFF will behave like a map tile, locking into place with other layers. And yes, QGIS2Web can use a TIFF as a ‘basemap’.
The issues are,
Deciding what scale and size to save the TIFF at. QGIS is flexible about this, but with the result that it is unhelpful. You’ll need to experiment to keep file sizes down. but maintain resolution at high zoom
A second project is needed for the TIFF‐based map and any supplementary layers of information. Using the original map with all it’s layers produces automatic output packed with wasteful unused layer information
Further Problems
Let’s say you have a really simple baselayer and a single information layer. Which is what is shown in the tutorial in the references, and is the kind of input data QGIS2Web seems to like. There are still issues,
The preview, when updated, seems to be accurate to the final map
Different libraries still behave differently. At one time, Leaflet insisted on giving a layer control, even if I asked not to. And a list of features, which I positively do not want
Geolocate user can place the map off‐canvas with no way back (I’d reserve this option for world maps)
Leaflet will not mark with anything but a simple marker (SVG, no)
Mark by class not working, despite being illustrated in the tutorial (perhaps because I hid the ‘class’ field?)
At least zoom and zoom limiting works as expected.
Formatting Labels
Popping up a label on the finished map is one of the key abilities of these maps.
Label order is unmanageable, apparently derived from field order in QGIS layers
The ‘Label’ setting is not the visibility of the key/value. It is whether a key term is printed, example: ‘Label off’ = ‘Charlestown’, ‘label on’ = ‘Name: Charlestown’
‘Header label’ puts a newline after the key term in the label (vs. inline labels)
Leaflet publishes all fields in labels, regardless of settings
No way to change font colour or variants
Popups didn’t work at all in Openlayer
To stop the plugin printing all fields in layer data, change in QGIS. If a field widget is set to ‘hidden’, the data will not appear.
Output Options
Maybe the most interesting output option is under the ‘Appearance’ tab. It lets you choose output template between ‘full‐screen’ and ‘canvas‐size’. They are what they say—canvas size dumps the data into a marked DIV, sized by a scrap of inline script. However, see the comments below.
Post editing
If you don’t like exactly what you get, or want to tweak, all the output file collection can be edited. Bear in mind this will be a maintenance burden… if you want to change the base data later on, you’ll need to do these tweaks again. Try ‘qgis2web.css’ for some tweaks.
Use of the results, and publishing
On ‘Save’ a folder will appear. As promised, this contains an ’index.htm’ page that will launch a webpage with the QGIS map formatted inside, complete with controls.
This folder is pretty wonderful for sending to friends and colleagues, for example. It’s just a folder. Zip it and send it, or put it on a shared drive.
But do you intend to publish on the web? That is something different. There are a few ways to approach this. One way, rip out the contents and plaster into some other system—for example into your Content Management System website. Another is to upload to some general site, then link into some web presence you own. And finally, build something into the folder as it stands, branding maybe, then upload the whole thing to a web area.
I run systemised and organised websites. I tried a quick rip of the folder contents. It may have worked, but I wasn’t going to put the effort in. Some of the output files of Javascript depend on each other, which is too complex for me—I don’t mind shifting some files about, and some hacking of HTML links, but I will not hack the generated Javascript. And the alternative, linking in to a wholesale upload, compromises too many of my systems. So, finally, I found the results of this plugin are not for me. But they are impressive, both for speed of work and neat results.
Refs
QGIS tutorial. Uses a QuickMapServices Starmer map, adds good info about clickable links, but you will need to do much more work for your own maps,
https://www.qgistutorials.com/en/docs/3/web_mapping_with_qgis2web.html
Currently, Qgis2Web can freeze on changing output format. Hide your layers,
https://www.luisalucchese.com/post/workaround-qgis2web-freezes-changing-map-type/
Leaflet,
OpenLayers,
Mapbox,
You like video tutorials? No accounting for that,