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: 'http://vps444389.ovh.net/cgi-bin/countries/qgis_mapserv.fcgi?map=/home/qgis/countries.qgs&',
    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