Leaflet, Stamen Toner and QGIS Server – An Intro

Today’s post is a note-to-self on how to set up a really quick little Leaflet web map with Stamen’s “Toner” background and a WMS overlay served by QGIS Server.

Note the use of the map parameter when creating the QGIS Server WMS layer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<title>Leaflet, Stamen Toner and QGIS Server</title>

<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
<link rel="stylesheet" href="my.css" type="text/css" />
 <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->

<script type="text/javascript" src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.1.3"></script>
<script type="text/javascript">
function initialize() {
	var stamen = new L.StamenTileLayer("toner-lite");
	var myLayer = new L.TileLayer.WMS("", {
		map: "/usr/lib/cgi-bin/test/test.qgs",
		layers: 'mylayer',
		format: 'image/png',
		transparent: 'TRUE',
	var map = new L.Map("map", {
		center: new L.LatLng(48.2,16.4),
		zoom: 13,
 		minZoom: 10,
 		maxZoom: 18,
		layers: [stamen,myLayer],


<body onload="initialize()">
    <div id="map" class="map"></div>


With this my.css, the map will be displayed in “full screen”.



You can test an extended live example at http://anitagraser.github.com/Webmapping-Sandbox/leaflet.html

  1. Nelson said:

    Hello, it is possible to see the result working?
    Best regards,

      • Sheraz said:

        Thanks, I’ll try it out. Also, your blog is great!

      • Sheraz said:

        Just curious, but do you have any advice on where to start If I want to be able to make these kinds of map interfaces? I sort of understand what the code does, but I’m still a beginner trying to figure out this complex world of web mapping!

      • Hi Sheraz,
        I’m not really a webmapping guru. I just play around with the examples on the OpenLayers or Leaflet homepage and go on from there. That’s the advice I would give to beginners: Check the provided examples and try to build on them.

  2. Nelson said:


    • Thanks, should be fixed now.


Get every new post delivered to your Inbox.

Join 8,783 other followers

%d bloggers like this: