Universal Map2web

Version: 1.4.0 | QGIS: 3.0+

QGIS plugin to export vector layers as interactive HTML maps with QGIS symbology preservation.

Features

Multi-layer export with QGIS styles (colors, widths, opacities)
Labeling preservation and automatic legend
Basemaps: OSM, Google Satellite, Hybrid or custom
Tools: geolocation, measure, search, fullscreen, minimap, print
Advanced attribute filtering (8 operators)
4 visual themes: Light, Dark, Professional, Colorful
Point clustering
Per-layer popup configuration
Dynamic PostgreSQL/PostGIS mode (live data instead of a static export)
Attribute table window for every vector layer (sort, filter, search, map highlighting, CSV export)
Zoom-to-layer button
Live WFS (vector) and WMS (raster) layers from GeoServer / OGC servers

Quick guide

1. Launch

Click on the Universal Map2web icon in the QGIS toolbar.

2. Export

Select the layers to export (Layers tab)
Configure popups (fields to display on click)
Optionally enable dynamic PostgreSQL/PostGIS mode for layers connected to a database
Choose basemap and theme
Customize: title, logo, header color
Enable desired tools
Click "OK" and choose the destination folder
The map opens automatically in your browser

3. Web navigation

Action	Command
Zoom	Scroll / + / -
Pan	Click-drag
View attributes	Click on feature
Open attribute table	Click the table icon before the layer name
Zoom to layer	Click the magnifier icon before the layer name
Reset view	Double-click on map

4. Advanced filtering

In the map sidebar: select layer → field → operator → enter value → Apply.

Available operators: = ≠ contains starts with > < ≥ ≤

5. Layer management on map

Show/Hide: check/uncheck in the legend
Clustering: enable "Cluster points" (point layers)
Legend: automatic display of categories and colors

6. Dynamic PostgreSQL mode

For layers already connected to PostgreSQL/PostGIS in QGIS, enable "Load PostGIS layers dynamically from PostgreSQL (instead of a static export)" in the dialog.

The existing QGIS connection is reused: no credentials are re-entered in the plugin
A protected get_data.php endpoint and db_config.php are generated in the export folder, secured by a random API key and an .htaccess rule
The web map queries the database live (with bounding-box filtering) instead of using a fixed GeoJSON snapshot
Layers left unchecked, or not connected to PostgreSQL, are exported as static GeoJSON as usual

Requires a PHP-capable web server with the pdo_pgsql extension to host the exported site — a plain static file host is not enough for this mode.

7. Attribute table

Each vector layer (shapefile, WFS or PostgreSQL) has a table icon in front of its name in the map legend. Click it to open the attribute table in a floating window.

Move the window by its title bar; resize it from the bottom-right corner; several tables can be open at once
Click a column header to sort, type under it to filter, or use the global search box
Hover a row to highlight the feature on the map; hold Ctrl while hovering (or click the row) to zoom to it
Export to CSV exports the displayed rows (after filtering/sorting), separated by ;, UTF-8 with BOM for Excel
Rows are paged (100 per page) to keep large layers fast
The magnifier icon next to the table icon zooms to the extent of the layer

The table lists the features loaded in the page. In dynamic PostgreSQL mode with bounding-box filtering, only the features of the loaded area are shown.

8. Live WFS / WMS layers

WFS (vector): a layer connected to a WFS service in QGIS is detected automatically. No GeoJSON file is written: the web map requests the features (GetFeature, JSON) directly from the server at each load. No PHP backend is needed. Symbology, popups, filtering and the attribute table work as for any vector layer.
WMS (raster): layers connected to a WMS service are listed separately in WMS layers in the export dialog. They are displayed as tiles requested live; clicking the map queries the server (GetFeatureInfo) and shows the result in a popup.

The connection settings are read from the layer already configured in QGIS: nothing to re-enter.

The OGC server must be reachable from the visitor's browser, use https if the map is served over https (mixed content is blocked), and have CORS enabled (next section). For WFS, the application/json output format must be available (default in GeoServer).

9. Enabling CORS on GeoServer (WFS and WMS)

The exported map is opened from another origin than your GeoServer (your website, or http://localhost:PORT with the built-in local server). The browser only lets the page read GeoServer responses if GeoServer sends the Access-Control-Allow-Origin header.

Service	Without CORS
WFS	The layer cannot be loaded ("blocked by CORS" message in the legend)
WMS	Tiles still display, but click-to-query (GetFeatureInfo as JSON) is blocked and falls back to an HTML frame

Option A – Web Administration (recent GeoServer versions): enable the CORS setting in the GeoServer Web Administration interface (see "Enable CORS" in the GeoServer documentation), then restart GeoServer.

Option B – web.xml (all versions): edit webapps/geoserver/WEB-INF/web.xml, uncomment (or add) the CORS filter and its filter-mapping, then restart.

Standalone / binary installer (Jetty):

<filter>
  <filter-name>cross-origin</filter-name>
  <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cross-origin</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

WAR deployed in Tomcat:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Use one method only: enabling CORS in the interface, in web.xml and/or in a reverse proxy at the same time sends duplicate headers and browsers reject the response
* allows any website: in production, replace it with your own site(s), e.g. https://maps.example.org
Test: curl -I -H "Origin: https://maps.example.org" "https://your-geoserver/geoserver/ows?service=WFS&request=GetCapabilities" must return an Access-Control-Allow-Origin header

Requirements

Component	Requirement
QGIS	3.0 or higher
Browser	Chrome 90+, Firefox 88+, Edge 90+
Memory	4 GB RAM minimum
Internet	Required for basemaps and libraries

Best practices

Limit to 15 active layers for optimal performance
Recommended files < 50 MB per layer
Use WGS84 (EPSG:4326) for your data
Preview in QGIS before export

Technical support

Jean-Baptiste KIBORA

📧 Email: jeanbaptiste.kibora@tic.gov.bf

📱 Phone: +226 64 41 25 14