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"> <head> <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("http://10.101.21.28/cgi-bin/qgis_mapserv.fcgi", { 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], }); } </script> </head> <body onload="initialize()"> <div id="map" class="map"></div> </body> </html>
With this my.css, the map will be displayed in “full screen”.
div.map{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
Update
You can test an extended live example at http://anitagraser.github.com/Webmapping-Sandbox/leaflet.html