Bringing a map online with QGIS server and OpenLayers

QGIS server is a stable and easy to use alternative to geoserver. In this short tutorial you learn how to show your QGIS Desktop project as a online map using QGIS server and OpenLayers.

This post can be understood as a follow up to this fantastic posts by Paul Shapley. Installing QGIS server on Ubuntu explains all the steps to configure Apache2 with FastCGI module on Ubuntu 16.04. Bringing a map image into the browser shows how to display a map image from QGIS Desktop project file as a WMS layer.

As a starting point you should have an image output of your QGIS map in the browser, something like this. The necessary steps are explained in the mentioned tutorials.

To start with I use a simple QGIS project with only one layer, a geojson file of countries geometries. The QGIS Desktop file can be downloaded here, it was created with QGIS version 2.18.12. Keep in mind that I used coordinate system WGS 84 (EPSG:4326), this projection is supported by OpenLayers but has to be indicated when creating the view.

Here is the basic Javascript code to load a WMS layer and use it on a OpenLayers map:

var wmsLayer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: '',
    params: {
      'LAYERS': 'countries',
      'TRANSPARENT': true,
    serverType: 'qgis'  										
var map = new ol.Map({
  target: 'map',
  layers: [wmsLayer],
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [0, 0],
    zoom: 3

The final output of the online map should look like that.

Tags: , , , ,

Leave a Reply