Cartographic web services with QGIS mapserver Ionut...

11
International Opensource Geospatial Research Symposium 2009 Cartographic web services with QGIS mapserver Ionut Iosifescu-Enescu, Marco Hugentobler, Lorenz Hurni ETH Zurich, Switzerland The following lab materials are based on the training created for the SANY EU FP6 project. The workshop requires the following free and opensource software and data: Datasets: geodata_eu – contains generalized basic European datasets: a NASA Blue Marble image, and the major rivers, cities and countries. The geometries and features names are derived from CIA World DataBank II. The countries have attached thematic data derived from EUROSTAT (http://epp.eurostat.ec.europa.eu - thematic data © European Communities, 1995-2009) Software: - the map server "QGIS map server" – that implements the WMS (Web Map Ser- vice – Open Geospatial Consortium) and the MDS (Map and Diagram Service – ORCHESTRA and SANY) standards - the desktop GIS "QGIS" with the Diagram, Interpolation and PublishToWeb plugins – for user-friendly configuration of data sources and symbology - "Apache" Web server (http://httpd.apache.org/) - Open Layers (http://openlayers.org/) – as web-based WMS client The necessary software and data is available already on your OGRS virtual machine. DISCLAIMER: THIS DATA AND SOFTWARE ARE PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, ARISING IN ANY WAY OUT OF THE USE OF THIS DATA AND SOFTWARE.

Transcript of Cartographic web services with QGIS mapserver Ionut...

Page 1: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

International Opensource Geospatial Research Symposium 2009 Cartographic web services with QGIS mapserver Ionut Iosifescu-Enescu, Marco Hugentobler, Lorenz Hurni ETH Zurich, Switzerland

The following lab materials are based on the training created for the SANY EU FP6 project. The workshop requires the following free and opensource software and data: Datasets:

geodata_eu – contains generalized basic European datasets: a NASA Blue Marble image, and the major rivers, cities and countries. The geometries and features names are derived from CIA World DataBank II. The countries have attached thematic data derived from EUROSTAT (http://epp.eurostat.ec.europa.eu - thematic data © European Communities, 1995-2009)

Software: - the map server "QGIS map server" – that implements the WMS (Web Map Ser-

vice – Open Geospatial Consortium) and the MDS (Map and Diagram Service – ORCHESTRA and SANY) standards

- the desktop GIS "QGIS" with the Diagram, Interpolation and PublishToWeb plugins – for user-friendly configuration of data sources and symbology

- "Apache" Web server (http://httpd.apache.org/) - Open Layers (http://openlayers.org/) – as web-based WMS client

The necessary software and data is available already on your OGRS virtual machine. DISCLAIMER: THIS DATA AND SOFTWARE ARE PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, ARISING IN ANY WAY OUT OF THE USE OF THIS DATA AND SOFTWARE.

Page 2: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

Module 1: Basic Cartographic Workflow The goal of this module is to present the basic workflow for publishing geodata with the QGIS map server and then showing the result in a Web-based WMS client. Step 1: QGIS map server set-up Note: The OGRS virtual machine already has all the necessary software and data config-ured for your convenience. For detailed information on installing specific software please refer to their respective homepages. Step2: Basic Layer Symbolization with QGIS 2.1. Starting Quantum GIS Open the QGIS Desktop from the Debian menu. 2.2. Adding data layers to the map

In QGIS you can use the appropriate buttons in order to add a raster and a vector layer to the canvas. Press “Add Raster Layer”, navigate to the “geodata_eu” directory and add the raster data-set “land_ocean_ice_8192.tif” to the map. Then press “Add Vector Layer”, navigate to the “geodata_eu” directory and add the ras-ter dataset “eu_countries_them.shp” to the map. 2.3. Symbolising the data Double clicking on the layer in the QGIS legend opens the vector layer properties dialog. In the “Symbology” tab, it is possible to symbolize the features of the layer. Please zoom in to Europe and symbolise the “eu_countries_them” layer as you prefer by changing the outline color, outline width and fill color. Optionally you may set the fill style to “No Brush” for obtaining a no fill effect. For the moment keep the Legend Type to Single Symbol.

Page 3: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

Step 3: Map server configuration with PublishtoWeb plugin 3.1. Enabling “Publish to web” plugin First load the plugin from the menu "Plugins"->"Manage Plugins"->"Publish to web plugin" by checking the corresponding checkbox.

3.2. Export the current project configuration for QGIS map server We create the configuration file for the server with the "Publish to web" plugin in QGIS. Export the current project with "Plugins"->"Publish to web"->"Publish to web". A dialog opens where it is possible to insert the metadata, information about server, layer and style names. Generate the server configuration by clicking on the "Publish" button. 3.3. Configure the QGIS map server with the exported configuration In the directory fcgi-bin/qgis_map_server, there is now a new directory with the name you gave to the web project. The server configuration is now complete and the WMS URL is http://localhost/fcgi-bin/qgis_mapserver/name_that_you_gave_to_the_web_project/qgis_map_serv.fcgi?. 3.4. Testing of the map server Test now if the WMS server is configured correctly. One possibility is to test this directly with QGIS. Create a new QGIS Project (Menu "File"->"New Project") and then use QGIS Desktop as WMS client (Menu "Layer"->"Add WMS Layer").

Page 4: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

Create a new WMS connection with the corresponding URL above and click "connect". The layers and style list should appear that can be added to the map. Add the land_ocean_ice layer with the default style, followed by the eu_countries layer and the defined style name. If everything works as it should, the map image in QGIS now should look the same as the local project. Step 4: Map server integration in Open Layers 4.1. Configure the Open Layers client to work with the published WMS layers Navigate to your Open Layer directory and open the file index.html in a text editor. First change the request parameters from the loi_wms layer to point to your newly created lo-cal QGIS map server project. Next insert a new layer in index.html in order to visualize the second WMS layer that you published with the Publish to web plugin (eu_countries_them). Start from a copy of the loi_wms layer and make the necessary changes for the new layer. Please set also the pa-rameter styles to the name you given to the style, the parameter transparent to “true”, and the parameter isBaseLayer to “false”. 4.2. Test the results Now point your browser to your OL client and check if everything works. Congratula-tions, you have produced a basic Web map! Module 2: Styled Layer Descriptor and Thematic Mapping The goal of this module is to know the basic symbolisation mechanism of QGIS map ser-ver (based on the Style Layer Descriptor Standard). Step 5: Symbolisation of point, line and polygon datasets 5.1. Add point and line datasets Similarly as before, add the “eu_rivers.shp” and “eu_cities.shp” to your QGIS Desktop Project (from the geodata_eu directory). 5.2. Symbolising the data Similarly as before, change the symbology of the eu_rivers (line geometries) and eu_cities (point geometries) layers. For the eu_cities layer, please use only simple point

Page 5: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

symbols (circle, rectangle, star). In addition, you may further change the symbology of the eu_countries_them (polygon geometries) layer. 5.3. Export the current project configuration for QGIS map server Perform this step with the Publish to web plugin in a similar as before. Note that if a pro-ject already exists in the QGIS map server directory, the overwriting of the project is pre-vented. 5.4. Understand the Styled Layer Descriptor In the qgis_map_server directory there is now a new directory with the name you gave to the newly exported map server project. Now, open the admin.sld file from this new direc-tory with a text editor and understand the way the symbology you chose in QGIS Desk-top was translated in Styled Layer Descriptor (http://www.opengeospatial.org/standards/sld). Each layer configuration is defined inside an <UserLayer/> element. The symbology is defined by the <UserStyle/> element. Study the contents of the admin.sld file to under-stand the basic syntax of <PointSymbolizer>, <LineSymbolizer>, and <PolygonSym-bolizer>. Step 6: Symbolisation of thematic data 6.1. Choropleth maps Return to the QGIS Desktop and change the symbolisation of the eu_countries_them layer. This time choose the option Graduated Symbol for the Legend type (in the Sym-bology tab). Set the other parameters according to your choice in order to create a choropleth map. 6.2. Diagram and proportional symbol maps The QGIS Desktop version we use also has support for diagram symbolization. To acti-vate it, go to the plugin manager and add the "diagram overlay" plugin. Open the layer properties dialogue again by double clicking on the layer legend, and no-tice that a new tab entitled “diagram overlay” appeared. In this tab you may enter the pa-rameters for diagram symbolisation. Experiment with the various possibilities for creat-ing diagram and proportional symbol maps and do not forget to enable the checkbox “Display Diagrams”. You may use the image below as reference for setting the various parameters. (Note: only numerical attributes may be used for scaling).

Page 6: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

6.3. Export the project with the Publish to web plugin Perform this step similarly as before then configure the QGIS map server with the ex-ported configuration. 6.4. Testing of the map server The resulted project can be tested with QGIS Desktop or Open Layers (in a similar man-ner as before). Module 3: Advanced Cartographic Rules The goal of this module is to introduce advanced cartographic features such as rules, cus-tom SVG symbols and patterns for spatial features. Step 7: Rules and Feature Filtering 7.1. Understand Rules Open the admin.sld file from your qgis_map_server directory and study the rules avail-able in the eu_countries_them layer that define the choropleth map. These type of rules

Page 7: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

use the OGC Filter Encoding Standard (http://www.opengeospatial.org/standards/filter) to specify class boundaries. Optionally you may modify class boundaries or merge classes. 7.2. Create new rules for object symbolisation Symbolisation can be applied also to single features if they are properly filtered based on an unique identifier (e.g. object id, name). In this step, delete the rules used for choropleth map, and create new rules in order to ap-ply a specific symbolisation to Switzerland (by using the <PropertyIsEqualTo>). The new rules can be created by following the example below. Understand how the first rule filters and applies a specific symbolisation to Switzerland. <Rule> <Filter> <PropertyIsEqualTo><PropertyName>CTRY_NAME</PropertyName> <Literal>Switzerland</Literal></PropertyIsEqualTo> </Filter> <PolygonSymbolizer> <Fill> <CssParameter sld:name="fill">#ff0000</CssParameter> </Fill> </PolygonSymbolizer> </Rule> <Rule> <PolygonSymbolizer> <Stroke> <CssParameter sld:name="stroke">#0000ff</CssParameter> <CssParameter sld:name="stroke-width">0.3</CssParameter> </Stroke> <Fill> <CssParameter sld:name="fill">#00ff00</CssParameter> </Fill> </PolygonSymbolizer> </Rule> 7.3. Apply custom symbolisation to point layers Similarly an in the previous step, apply a different symbolisation for the city of Bern (a feature in eu_cities where the property “full_name” is equal with “Bern”). Well-known names for point symbols are for example: rectangle, circle, star, cross.

Page 8: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

Step 8: Custom SVG Symbols and patterns In this step we will make use of the advanced graphical features defined in the Scalable Vector Graphics standard (http://www.w3.org/TR/SVG11/). An efficient manner of creating SVG graphics is by using vector graphic programs such as Inkscape (open source) or Adobe Illustrator (commercial). All the graphical possibilities offered by the programs can be used without restrictions (including gradients, Bezier curves, etc...). 8.1. Advanced point symbolisation The well-known names for point symbols offer only limited possibilities for symbolisa-tion of point features. QGIS map server allows also the use of custom symbols in Scal-able Vector Graphics.

Page 9: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

In this step, please continue editing the custom symbolisation for the city of Bern. Delete the content of the Mark element and introduce a < SvgSymbol> element. Inside the newly created element paste the contents of an SVG file (available on “http://karlinapp.ethz.ch/sany_training/”). You may use the symbol defined in the “green-sphere.svg” file (containing a gradient definition) or you may create your own SVG sym-bols using Inkscape.

The Publish to Web plugin also supports the export of SVG point symbols from QGIS Desktop. You can use the available QGIS SVG symbols or you can add your new sym-bols to the QGIS Symbol collection (by placing the desired SVG files in the svg directory from the QGIS home directory). 8.2. Advanced line symbolisation Now edit the “eu_rivers” layer inside the “admin.sld” file. In the SLD of eu_rivers, locate first the LineSymbolizer and then the Stroke element. Create a dash pattern by adding a new “stroke-dasharray” parameter inside the Stroke element as illustrated in the example below; the example defines a dash pattern with a line of 5 units followed by a gap of 3 units. <CssParameter xmlns="http://www.opengis.net/sld" name="stroke-dasharray" >5 3</CssParameter> Optionally you can experiment with longer series of lines and gaps in order to create cre-ate a more complex pattern.

Page 10: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

8.3. Advanced area symbolisation Now edit the “eu_countries_them” layer inside the “admin.sld” file. In the SLD of eu_countries_them, locate the first PolygonSymbolizer, and then locate the Fill element. Now we replace the content of the Fill element with an area pattern as illustrated in the example below: <Fill xmlns="http://www.opengis.net/sld"> <pattern width="30" height="30" x="0" y="0"> <g xmlns="http://www.w3.org/2000/svg"> <!-- After http://commons.wikimedia.org/wiki/Image:Flag_of_Switzerland.svg --> <rect height="30" width="30" x="0" y="0" style="fill:#d81e05" /> <rect height="6" width="20" x="5" y="12" style="fill:#ffffff" /> <rect height="20" width="6" x="12" y="5" style="fill:#ffffff" /> </g> </pattern> </Fill>

Optionally you can create create your own area pattern. In this case you may start with a simple pattern such as a circle (see following example) and gradually add more complex SVG graphic elements. It is recommended that complex patterns such as area patterns are created with the help of vector graphic programs such as Inkscape or Adobe Illustrator. The created patterns can be arbitrarily complex.

Page 11: Cartographic web services with QGIS mapserver Ionut ...2009.ogrs-community.org/2009_workshops/qgismapserver-tutorial.pdfCartographic web services with QGIS mapserver Ionut Iosifescu-Enescu,

End of the lab Congratulations, now you are able to create your own standardized Web-mapping serv-ices. Using QGIS map server, you may publish any GIS datasources on the Web and em-bed the published layers in your own mapping applications.