SOMAP-OSGEO WORKSHOP Open GIS and Modern Webmapping … · 2018. 11. 5. · SOMAP-OSGEO WORKSHOP...

SOMAP-OSGEO WORKSHOPOpen GIS and Modern WebmappingVienna, 24–25 November 2014

Barend Köbben

November 12, 2014

Contents

1 A short introduction to Geo-webservices 5

2 Introduction to the OSGeoLive system 17

3 Webmap clients — Using Leaflet to make a simpleOpenStreetMap viewer 25

4 QGIS — Open Source Desktop GIS 334.1 Using the world of services in QGIS.4.2 Using QGIS to create data

5 Serving data as a Web Map Service 415.1 Using Geoserver.5.2 SLD and cartographic coding in Geoserver.

6 WMS in a webmap client: Geoserver WMS andOpenStreetMap in a Leaflet application 49

© ITC—University of Twente, Faculty of Geo–Information Science and EarthObservation. This document may be freely reproduced for educational use. It maynot be edited or translated without the consent of the copyright holder.

ii Dept. of Geo–Information Processing

2

Key points

The hands-on workshop “Open Source GIS and ModernWebmapping” is a 2-day workshop on November 24th & 25th2014 in Vienna, Austria. It is organized on behalf of theCommission on Map Production and Geobusiness and theCommission on Open Source Geospatial Technologies of theInternational Cartographic Association (ICA).

Note that these exercises assume you are using the OSGEO-Livesystem, but the various softwares from that system can also beinstalled in any Windows–, MacOSX– or Linux–based computers,and the exercises would work accordingly on those computers. . .

In many cases during these exercises, you will have to type code! →(HTML, JavaScript or MapServer configuration code). It’s veryeasy to make mistakes in such code. HTML code and MapServermap files are not case–sensitive, but JavaScript is: the variablemySomething is different than the variable MySomeThing! Also takecare of the special character (→) in the code examples we provide:

→ this character means the line should be typed without in-terruption, the move to the next line in our example is onlybecause it would not fit otherwise. So do not type a returnor enter in this place!

Typing the code of longer listings is usually not necessary: You cancopy the code from the filefragments folder in the exercise data.In this folder you will find all code fragments from the exercises intext files with the same names as the listing. Do not copy fromthe PDF exercise description!

© ITC–University of Twente, Faculty of Geo–Information Science and Earth Observation 1

3

A SHORT INTRODUCTION TO GEO-WEBSERVICES

Lecture note on the history and principles of geo-webservices

Barend Köbben

Version 2.0May 7, 2012

Contents

1 From monolithic to distributed GIS architectures 2

2 Interoperable webservices 32.1 XML: eXtensible Markup Language . . . . . . . . . . . 32.2 Webservices . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Geo-webservices 53.1 Open Web Services specifications (OWS) . . . . . . . . . 53.2 The FOSS4G geo-webservices stack . . . . . . . . . . . . 83.3 An application example: The Melka Kunture Virtual Mu-

seum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

©ITC—University of Twente, Faculty of Geo–Information Science and Earth Ob-servation. This document may be freely reproduced for educational use. It may not beedited or translated without the consent of the copyright holder.

5


6

Key points

This document is intended to serve as a quick introduction tothe notion of geo-webservices. It was originally written for stu-dents at the International Institute for Geo-Information Scienceand Earth Observation (ITC) that are fairly familiar with spa-tial data and GIS. It is based on the teaching materials (slides,exercises) for various modules on WebGIS, Webmapping, SpatialData Infrastructures and the like, developed by Rob Lemmens,Andreas Wytzisk and Barend Köbben.


7

1 From monolithic to distributed GIS architectures

Interoperable geo–webservices are the latest in a long line of software forhandling geographic, or spatial, information. In 1962 Roger Tomlinsonbuilt the Canada Geographic Information System to determine the landcapability for rural Canada by mapping information about soils, agricul-ture, land use, etc. He coined the term GIS for software that is used togather, visualize and analyse geo-information. Tomlinsons GIS softwarewas running on a large mainframe computer and its architecture waswhat we call monolithic, with the presentation logic, application logic,and data management layers combined in one software tier. This mightstill be the typical design for simple desktop applications, but nowa-days larger GISs, like other software systems, have their logical layersseparated. Separate logical layers, a depicted in Figure 1 improve theinteroperability between Geographic Information Systems.

Figure 1: A typical setup of layers in a GIS.

One or more database layers take care of the data storage and retrieval,application layers are used to analyse the information, a mapping engineturns the information into maps, and separate client software gives theactual users access to all of this. The main advantage of such a setupis the flexibility: the different parts can be distributed over variouscomputers and thus can easily be scaled, that is, adopted to changingconditions, such as an increasing number of users. Because the clientsoftware is separated from the application logic, the same back–end canserve different client platforms (e.g. PCs, PDAs and mobile phones).Equally the data being used in the analysis part can come from variousdifferent information sources, from various providers, even from differentplaces on the globe.

2 Dept. of Geo–Information Processing

8

2 Interoperable webservices

Probably the best–known example of such a distributed system approachis the World Wide Web. The WWW consist of many distributed serversthat are responding to individual requests of a sheer endless amountof distributed clients. This kind of system is only possible when thedifferent components are guaranteed to work together, because they areinteroperable.

The International Standards Organisation (ISO) defines interoperabilityas: “The capability to communicate, execute programs, or transfer dataamong various functional units in a manner that requires the user tohave little or no knowledge of the unique characteristics of those units.”Interoperability in computer systems, as shown in Figure 2, means inthe first place that the systems are able to transfer data seamlessly.

Figure 2: Interoperable Geographic Information Systems.

This can be achieved by having the data encoded in a standardized,platform and application independent manner. Nowadays, the popu-lar encoding scheme used for that purpose is the eXtensible MarkupLanguage (XML).

2.1 XML: eXtensible Markup Language

The eXtensible Markup Language (XML) is a computer language thatdefines a set of rules for encoding documents in a format that is bothhuman-readable and machine-readable. The design goals of XML em-phasize simplicity, generality, and usability over the Internet. It is atextual data format and widely used for the representation of arbitrarydata structures, for example in web services [wikipedia.org].

The structure of XML uses a strict separation of content from presenta-


9

tion. XML is “self descriptive”, it provides a way to encode both struc-ture and content of data. In any XML-language, the XML standardjust sets the syntax, and an XML schema is needed to explain whatthe XML means. One can compare it to a set of languages that shareexactly the same grammar. Th big advantage is that only translationof individual words is needed to translate one language to another. . .

Figure 3: An example of XML.

2.2 Webservices

Interoperability also means that two information systems should be ableto access distributed functionality in a seamless manner. This would forexample mean that one Geographic Information System could use thegeo–processing tools of another GIS. For that to work regardless of op-erating system, computer platform or software used, we have to specifyand set up an infrastructure of interoperable software services. Service-oriented software differs from traditional software in that it fully encap-sulates its own functionalities and makes it accessible only via well speci-fied and standardised interfaces. These interfaces publicise the methodsthat a software component implements, and its calling conventions. Inother words, you do not know, nor have to know, how the service ac-tually works, only what input it can receive and what output you canexpect back. There are many ways of setting up such Service OrientedArchitectures (or SOA’s), but by far the most used distribution platformis the WWW and the services implemented on that are logically calledwebservices.

Webservices are components that can be described, published, locatedand invoked over the Internet. They are defined as loosely coupled com-ponents that communicate via XML-based interfaces. Loosely coupledmeans that they are independent of computer platform and can be ex-changed by similar components, e.g., when one service fails or is too


10

busy, the system can find a similar service elsewhere on the Web. TheXML-based interfaces are human readable and self–describing, whichallows for automated discovery of their functionality.

A simple example of such a Webservice is a currency convertor, forexample the one at http://www.webservicex.net/. If an application(such as the Demo form on the webpage) is used to send a request to thisservice formatted as a standardized XML message

<FromCurrency>USD</FromCurrency><ToCurrency>EUR</ToCurrency>

the service returns a standardized XML response:

<double>0.92635</double>

If webservices have spatial functionality, for example if they use geo-graphic data, can output maps or find routes, we call them geo–webservices.

3 Geo-webservices

There are many such geo–webservices available, the best–know propo-nent of it probably is Google Maps, and other examples are Bing Mapsand Yahoo Local Maps. These can be used by anybody, as their inter-faces are publicly available, but they are still proprietary in the sensethat they are defined, developed and owned by commercial companies.Alternatively, Open Standards are created in an open, participatory pro-cess, where everyone interested can influence the standard. The result-ing specifications are non–proprietary, that is, owned in common. Thatmeans free rights of distribution (no royalty or other fee) and a free, pub-lic, and open access to interface specifications that are also technology–neutral. There is a set of such well–defined Open Standards for geo–webservices: the Open Web Services (OWS) of the Open GeospatialConsortium (OGC).

The OGC was founded in 1994 as a not-for-profit, international volun-tary consensus standards organization that develops Open Standardsfor geospatial and location based services. Their core mission is to de-liver interface specifications that are openly available for global use.The Open Web Services specifications are the basis of many high-profileprojects (e.g., the European Community INSPIRE initiative).

3.1 Open Web Services specifications (OWS)

There are OWS specifications for most parts of the spatial data storage,analysis and delivery process:

• for geographic data encoding: the complete and complicated Geo-graphic Markup Language (GML), and the simpler, more limited


11

http://www.webservicex.net/

Keyhole Markup Language (KML);

• for spatial data delivery: the Web Coverage Service (WCS) andWeb Feature Service (WFS), for querying and retrieving raster andvector data respectively;

• for processing of spatial data: the Web Processing Service (WPS).Note that this specification does not standardize the analysis orprocessing methods themselves, but rather defines a standardizedinterface that lets you publish geospatial processes, and lets clientsoftware find those processes and employ them.

• for data visualisation in the form of maps there is the Web MapService (WMS). This is by far the most mature and widest adoptedOWS specification. There are numerous open source as well ascommercial solutions offeringWMS functionality. Related toWMSare the Styled Layer Descriptor (SLD) specification, for map styling,and the Web Map Context Documents (WMCD) specification, formap setup and layout;

• for describing and finding spatial data, there is a set of metadataspecifications in the Catalog Service Web (CSW).

We will use WMS as an example to show the working of OGC specs ina bit more detail, see the OGC website for more details on the otherspecifications.

The WMS specification defines four interfaces: GetCapabilities, GetMap,GetLegendGraphic and GetFeatureInfo. TheGetCapabilities interfaceis used by client software to ask for the capabilities of the service: whatlayers are available, what projection systems can the maps be deliveredin, what output formats can be requested, etcetera.

So if you point your browser to the URL: http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=d:/Inetpub/mapserver/config.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities the service will return an XML file de-scribing the capabilities. It is human-readable text, but not reallymeant for reading: Software (GIS or mapping clients) will parse it to beable to show layers, zoom to the extent, know what projection to use,etcetera. . .

Based on the GetCapabilities result, the GetMap request is issuedto ask for an actual map. Because the client knows the possibilitiesof the service from the GetCapabilities response, it can issue its re-quest with specific parameters asking for example for a one or morelayers of information (LAYERS=borders,forest), in a certain part ofthe world (BBOX=x1,y1,x2,y2). It will also request that the output isreturned in a format that the client can handle (e.g., a web browser


12

http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=d:/Inetpub/mapserver/config.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities



will request FORMAT=image/png), and in a specific size in pixels (e.g.,WIDTH=250&HEIGHT=300). Furthermore, the map output will have to bebe requested in a specific projection (SRS=EPSG:43621).

Thus, if you type in the URL:

http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=D:/Inetpub/mapserver/config.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=forest,railroad,airports&STYLES=&SRS=EPSG:4326&BBOX=97.35,5.61,105.64,20.47&WIDTH=400&HEIGHT=600&FORMAT=image/png

in a web browser, the WMS at that site will return the graphic shownin Figure 4. The GetLegendGraphic request is used in a similar fashionto get a pictorial rendering of a legend item separately. If the user ofa mapping client triggers a zoom command, the client will issue a newGetMap request, now with a smaller BBOX. This process will be repeatedover and over again while the user interacts with the map.

Figure 4: Result of the WMS request in the URL on page 7

The GetLegendGraphic request is used in a similar fashion to get apictorial rendering of a legend item separately.1 the SRS, or Spatial Reference System is usually expressed as an EPSG code. EPSGis the European Petroleum Standards Group, and their standardized descriptionsof datums and projections are used worldwide. See http://spatialreference.orgfor an overview.


13





http://spatialreference.org

In WMS services that advertise layers of data as queryable, theGetFea-tureInfo request can be used to find attribute values in the underlyingdata. The client software reports the location of a request in pixel coor-dinates within the map graphic, and requests the WMS to report on theattribute values of the location in specific layers. The WMS thus hasto take into account the size in pixels and in real world coordinates ofthe graphic it has supplied, plus any re–projections is has done, to cal-culate the request location in the coordinate space of the original data.It then finds data objects at that location, and does a lookup in theoriginal data store (a vector or raster file, a database, etcetera) to findappropriate data attributes. It then reports these back to the client inthe format requested (plain text, HTML or XML).

You can experiment with the WMS and other OWS services at ourwebsite http://geoserver.itc.nl/mapserver/. An easy way to seehow the different parameters of the interfaces work is the testing format http://geoserver.itc.nl/mapserver/testURL.html.

3.2 The FOSS4G geo-webservices stack

We use geo–webservices at ITC in in teaching, research and projects.Students and staff build services and clients using a software and datastack that is employing so–called Free and Open Source Solutions forGeospatial (or FOSS4G for short). This Open Source stack can be setup using a wide choice of software.

We use a set-up that we call SDIlight. The term SDI for Spatial DataInfrastructure may be usually connected with (very) large regional ornational spatial data warehouses, but the principles of SDI can alsobe applied in more simple and cost–effective ways. The down–to–earthapproach of SDIlightprovides researchers and students alike with a proof–of–concept platform for relatively simple, low–cost, yet powerful ways ofsharing data amongst various distributed offices and institutions as wellas the general public. To achieve this, we use open standards wheneveravailable, open source solutions where possible and commercial softwarewhere necessary2.

In general, the main building blocks we use are:

• A spatial database back–end that stores the spatial data using theOpen Geospatial Consortium Simple Features specifications. Asa platform, the PostGIS extension to the object–relational DBMSPostgreSQL is a logical choice. First, because PostgreSQL is asolid DBMS that has a reasonably gentle learning curve, yet iswonderfully appropriate for advanced database applications, and

2 more about SDIlightin B. Köbben, R. de By, et al. (2010).


14

http://geoserver.itc.nl/mapserver/

http://geoserver.itc.nl/mapserver/testURL.html

Figure 5: The Open Source stack used in ITC’s SDIlight.

its documentation is very transparent. PostGIS in addition, is theleading open standards implementation of spatial vector manage-ment, and enjoys a lively and supportive user/developer commu-nity.

• A set of interoperable middleware web applications that interfacewith the database back–end and with each other, and fulfil taskssuch as delivering maps for visualisation purposes or providingdata and processing services. We use existing open source solu-tions, mainly MapServer and GeoServer.

• Simple (thin) browser-based clients enabling access to the mapsand data. We employ the OpenLayers API and Scalable Vec-tor Graphics (SVG). There are also more established stand–alone(thick) clients: We use QuantumGIS for map viewing, data anal-ysis and editing.

3.3 An application example: The Melka Kunture Virtual Museum

One website that uses this stack is the Melka Kunture Virtual Museumat http://geoserver.itc.nl/melkakunture/. Melka Kunture lies inthe upper Awash valley, 50 km south of Addis Abeba (Ethiopia). It isthe site of very important archeological finds and 70 archaeological levelshave been discovered so far, the oldest dating back to about 1.7 millionyears. In 2003 the Museum of Melka Kunture was built, and in 2007 aVirtual Museum was put on the WWW. It represents not only the fourbuildings and the Open Air Museum, but also gives access (in the ForScientists section) to the vast amount of spatial data of the excavationsand various finds.

All elements have been stored in a spatial database. We use MapServerto provide WMSes for the excavation data and the OpenLayers script of-


15

http://geoserver.itc.nl/melkakunture/

Figure 6: Screendump of the interactive map part of the Melka KuntureVirtual Museum.

fers these as interactive map views in the web pages. Custom Javascripton client- and server-side provides further links from the spatial excava-tion data to the content of the museum exhibition panels, and the otherway around. In this way, users can click on finds in the map, find moredata (and sometimes drawings and photos) of that element, as well aslinks to the appropriate museum sections.

Further Reading

• OGC website. http://www.opengeospatial.org/. This is the of-ficial homepage of the OpenGeospatial Consortium, where you canfind all relevant standards and whitepapers and other informationabout them.

• Barend Köbben, Rolf de By, Theodor Foerster, et al. (2010). Us-ing the SDIlight approach in teaching a Geoinformatics Master.Transactions in GIS, 14 : s1, pp. 25-37. [LINK]. This furtherexplains the ITC FOSS4G software stack and its use in education,research and projects.


16

http://www.opengeospatial.org/

http://kartoweb.itc.nl/kobben/publications/2010/SDIlightinGFM_TGIS.pdf

INTRODUCTION TO THE OSGEO LIVE SYSTEM

Barend Köbben

Version 1.0November 11, 2014

Contents

1 The OSGEO-Live system 11.1 Installing OSGeoLive as a Virtual Machine . . . . . 21.2 Trying out OSGeoLive without installation . . . . . 5

©ITC—University of Twente, Faculty of Geo–Information Science and EarthObservation. This document may be freely reproduced for educational use. It maynot be edited or translated without the consent of the copyright holder.

17


18

Key points

This document gives a short introduction to the OSGEO-Live system. In various workshops we are using free andopen source GIS and webmapping applications. In manycases it is most convenient to use these softwares as installedin the so–called OSGEO-Live system (the current versionis OSGeoLive 8). This is a self-contained bootable DVD,USB drive or Virtual Machine based on the Linux Ubuntuoperating system, that allows you to try a wide variety ofopen source geospatial software without installing anything.It is composed entirely of free software, allowing it to befreely distributed, duplicated and passed around.

1 The OSGEO-Live system

The OSGeoLive system is created, maintained and offered (for free)by OSGEO.

The Open Source Geospatial Foundation, or OSGEO,is a not-for-profit organization whose mission is to sup-port and promote the collaborative development of opengeospatial technologies and data. The foundation pro-vides financial, organizational and legal support to thebroader open source geospatial community. OSGeo alsoserves as an outreach and advocacy organization forthe open source geospatial community, and provides acommon forum and shared infrastructure for improvingcross-project collaboration.

The foundation’s projects are all freely available anduseable under an OSI-certified open source license. Moreinformation at the website http://www.osgeo.org.

The OSGeoLive system provides pre-configured applications for arange of geospatial use cases, including storage, publishing, viewing,analysis and manipulation of data. It also contains sample datasetsand documentation.

There are several ways you can use the OSGeoLive system:

1. Try out OSGeoLive without installing, by booting your com-puter from the OSGeoLive DVD or USB. The advantage ofthis is that you leave your computer untouched, and it worksregardless of the specifications of your computer. It workshowever rather slow.


19

http://www.osgeo.org

2. Run OSGeo-Live within a VirtualBox virtual machine (VM).The advantage of this method is that the response speed ofa VM is much faster than on the DVD, and typically compa-rable with installing directly on the host machine. All con-figuration changes, software updates, and saved files are per-manent, just like on any “regular” computer. Also, you canbackup your virtual machine installation.

If at all possible, we advice you to use the second method, of run-ning in a VM, described below in section 1.1. If for some reasonthat can not be done, refer to section 1.2 for running of the DVDor USB.

Both methods should result in your computer running OSGEOLive,and a Linux desktop such as seen in figure 1 below. . .

Figure 1: The OSGEOLive desktop, in this case version 8, runningon Lubuntu Linux.

1.1 Installing OSGeoLive as a Virtual Machine

The Lubuntu system runs well with 1 GB of RAM, and you’ll needto keep at least the same amount of memory for your host system.So a total of 2 GB will be needed for smooth operation. The virtualdisk file (vmdk) from live.osgeo.org unzips to almost 10 GB. Andyou’ll want more space to allow some room to work on the virtualmachine. So 20 GB is a good recommendation. Most machinesproduced in the last 4–5 years will meet these requirements.


20

live.osgeo.org

Download Virtual Box for your platform, and install the software.On windows run the installer, or on Ubuntu-like linux systemsdo the following: apt-get install virtualbox-ose. In additiondownload the OSGeo Virtual disk file (.vmdk) from your data source(USB stick, website of the workshop or live.osgeo.org. Then un-zip the downloaded file (using 7zip, installer provided if needed).

Start the VirtualBox application and click on the New button tocreate a new VM, and then Next.

Enter a name, such as OSGeo-Live, and choose Linux as the “Op-erating system”, and Ubuntu as the “Version”.

In the next screen set the memory to 1024 MB (or more if your hostcomputer has more than 4GB).

Continue to the next screen and choose “Use existing hard disk”or “existing vmdk file”. Now click on the folder icon to browse towhere you saved the osgeo-live-vm-6.0.vmdk file. Select this file,press Next and Create.

Once the VM is created, click on the Settings button. In the“General” section, go to the Advanced tab, and click to select “Showat top of screen” for the Mini toolbar.

Go to the “Display” section and increase video memory to 32 or 64MB.

In addition, move to the “Shared Folders” section, and click the“Add folder” (green + icon on the right) to find a directory on yourhost computer that you wish to share inside the VM.

Once the “Folder path” and “Folder name” are defined, click OK, andagain OK to finish and close the settings window.

Now bootup the VM by clicking the Start (green arrow) button.


21

live.osgeo.org

Once the OSGeo system comes up, you have the option to add theVirtualBox “Guest Additions” to improve video performance, andenable the shared folders option that was defined above. The guestaddition installations are supplied as an ISO file together with theVirtualBox application from Oracle. This ISO is mounted withinthe VM as a CD, and the installation is run from there. Here’s howit’s done:

In the VirtualBox menu (so actually outside the Linux window),open the Devicesmenu and click Install Guest Additions. Thiswill mount the Guest Additions as a CD drive in your OSGeo LiveVM.

Once the CD folder appears, open a Linux terminal (by going tothe menu Accessories > LXTerminal):

In the Terminal, type and run (press enter) the following com-mand:

sudo apt-get update

You will be asked for the password for the user called user. This,not surprisingly, is user. . .


22

Now run these commands:

sudo apt-get install build-essential linux-headers-genericcd /media/user/VBOXADDITIONS_4.1.18_78361/sudo ./VBoxLinuxAdditions.run

This will complete after a few moments. Reboot your VM, and youwill now be able to run in full screen mode, and mount your sharedfolders. In the above example, we defined a Shared Folder path onthe host system and named it “GIS” in the VM Settings. To mountit within the VM, open a terminal window and run:

mkdir GISsudo mount -t vboxsf -o uid=user,rw GIS /home/user/GIS

Now files on your host machine in the chosen folder will also beavailable in the VM in the “GIS” folder in user’s home directory.

1.2 Trying out OSGeoLive without installation

To try out OSGeoLive without installing anything on your com-puter, simply:

1. Insert the DVD or the USB stick in a computer or virtualmachine;

2. Reboot the computer. In Microsoft Windows, you might haveto verify or set the boot device order, to allow startup from aCD (mostly by pressing a key during start–up, typically theF–12 key). On Apple OSX, to boot from CD, you hold theC–key while restarting;

3. For CD booting: Wait for the “boot:” prompt, then press“Enter” to startup and login. For USB booting, you shouldsee a menu where you choose the first option (start normally);

4. The Lubuntu OS should start up, and now you should havea desktop similar to figure 1 (depending on the version ofOSGeoLive you are using).

Many applications are also provided with installers for Apple OSXand Microsoft Windows. More information, including alternativedisk images and installations, can be found on the website http://live.osgeo.org.


23

http://live.osgeo.org

http://live.osgeo.org

EXERCISE: PROGRAMMING WEBMAP CLIENTSUsing the Leaflet Javascript API to make a simpleOpenStreetMap viewer

Barend Köbben

Version 1.0 OSM onlyNovember 12, 2014

Contents

1 Open Data: using OpenStreetMap 2

2 The Leaflet API 3

3 Making a Leaflet viewer for OpenStreetMap 43.1 Enhancing the lay-out . . . . . . . . . . . . . . . . . 53.2 Changing the starting position and zoom . . . . . . . 6


25


26

Key points

This is a reference for the use of Leaflet, a JavaScript API(Advanced Programming Interface). Leaflet can be used tobuild general WebMapping clients, among others to connectto OGC Web Map Services. In this exercise we will give avery brief introduction, where you will learn how to:

1. Use the Leaflet library in a web page;2. Make a simple map using the OpenStreetMap back-

ground;3. Controls the initial view;

In many cases during these exercises, you will have to type code! →(HTML, JavaScript or MapServer configuration code). It’s veryeasy to make mistakes in such code. HTML code and MapServermap files are not case–sensitive, but JavaScript is: the variablemySomething is different than the variable MySomeThing! Also takecare of the special character (→) in the code examples we provide:

→ this character means the line should be typed without in-terruption, the move to the next line in our example is onlybecause it would not fit otherwise. So do not type a returnor enter in this place!

Typing the code of longer listings is usually not necessary: You cancopy the code from the filefragments folder in the exercise data.In this folder you will find all code fragments from the exercises intext files with the same names as the listing. Do not copy fromthe PDF exercise description!

There are several software tools that can help you: Use a text–editor that is more intelligent than your basic text editor, e.g. onMacOSX and Linux use TextWrangler, onWindows Notepad++.Thiswill provide you with line numbers, automatic highlighting of recog-nised HTML and JavaScript keywords, etcetera.

Use a modern web–browser: a recent FireFox, Chrome or Opera,or Internet Explore version 9 or higher. These are HTML5 com-patible and have built-in web developer tools. This provides errormessages, code views and a JavaScript console, network traffic mon-itoring, etc. . .

For students that intend to do more work on developing interactiveweb applications (using HTML5, CSS, Javascript, etcetera) thereis an Integrated Development Environment available in the ITCsoftware Manager called Webstorm.


27

1 Open Data: using OpenStreetMap

First we’ll show you a prime source of free maps and data on theweb: OpenStreetMap.

Note: The OpenStreetMap Project, based at http://openstreetmap.org, is the worldwide mapping effort that includes more than halfa million volunteers around the globe. OpenStreetMap is an ini-tiative to create and provide free geographic data, such as streetmaps, to anyone.

There are many ways in which you can access the OpenStreetMap:as a simple webmapping service (not unlike Google and Bing Maps,but based on truly free non-proprietary data on a non-commercialwebsite), as a webservice in various gis–viewers and as a databaseservice, providing the actual vector data in raw form. This is maybethe most important difference between OSM and the others: Youcan download the actual vector and attribute data of OSM, anduse it for your own projects free of charge, and you can also editthe data directly and in this way contribute to the building of theOSM itself!

Task 1 : Visit http://openstreetmap.org/ using a web browser.Try to find the ITC building (it‘s just North–West of the mainstation in downtown Enschede, a town in the East of The Nether-lands). . . •

There are many ways to find places and their coordinates. One ofthe easiest is to use the Search box find a location, and then lookin the URL bar to see what are the X, Y and zoom numbers:

The OpenStreetMap site itself uses the Leaflet Javascript API forits User Interface, just as we will do later ourselves.


28

http://openstreetmap.org

http://openstreetmap.org

http://openstreetmap.org/

Using the OpenStreetMap.org site as described above is fine forcasual map browsing, but if you want to disseminate spatial datayourself, you might want to include the OpenStreetMap in yourown websites. And of course that is possible. We will use a popularbrowser–based mapping library for creating such a site: Leaflet.

2 The Leaflet API

Leaflet makes it easy to put a dynamic map in any web page. Itcan display map tiles and overlays, loaded from many sources.

Note: Leaflet is a JavaScript library for displaying map datain most modern web browsers, with no server-side dependencies.Leaflet implements a JavaScript API (Application ProgrammingInterface) for building rich web-based geographic applications, abit like the Google Maps pages, with one important difference:Leaflet is Free Software, developed for and by an Open Sourcesoftware community based at http://Leafletjs.com/. Leafletis a modern open-source JavaScript library for mobile-friendlyinteractive maps. It is developed by Vladimir Agafonkin and ateam of dedicated contributors. Weighing just about 33 KB of JS,it has all the features most developers ever need for online maps.Leaflet is designed with simplicity, performance and usability inmind. It works efficiently across all major desktop and mobileplatforms out of the box, taking advantage of HTML5 and CSS3on modern browsers while still being accessible on older ones. Itsbasic functionality can be extended with plugins.

In these exercises, we will only show the basic building blocks,and how to employ them. Those wanting to go further, shouldcheck out the tutorial pages and the examples at the website.

Using the Leaflet API is done by creating webpages (using HTML)that include Javascript script ; this code makes calls to the APImethods to create the necessary map object and connect that toan HTML placeholder. Mostly we use an HTML <div> element asa placeholder.

You can “install” the API by including a link to the Javascript fileson the official Leaflet website, or to a version you downloaded andstored in your own site (as we do in these exercises). The former hasthe advantage that you always have the latest version, but the latterhas the advantage you can test without a internet connection andavoid downloading the API every time you load your pages. Onceyou included the Leaflet library script in your webpage, you can callthe methods and properties of the library using simple JavaScriptfunctions.

The Leaflet API has two concepts which are important to under-stand in order to build your first map: Map, and Layer. A Leaflet


29

http://Leafletjs.com/

Map stores information about the default projection, extents, units,and so on of the map. Inside the map, data is displayed via Layers.A Layer is a data source – information about how Leaflet shouldrequest data and display it. We then uses the methods and prop-erties of the API to change the content and behaviour of the map.In practice, all this means typing (and/or copying) HTML andJavaScript code.

3 Making a Leaflet viewer for OpenStreetMap

In listing 1 you see the most basic example of using Leaflet withthe OpenStreetMap service.

Listing 1: osm.html

<!DOCTYPE html> html5 document header

<html><head> start htm & start header

<meta charset="UTF-8"> webpage encoding

<title>Leaflet + OSM</title> webpage title

<link rel="stylesheet" href="./leaflet/leaflet.css" /> load the Leaflet styles

<script src="./leaflet/leaflet.js"></script> load the Leaflet script

<script type="text/javascript"> our script starts here

function init() { function triggered on load

use .map method of Leaflet (L) to

myMap = L.map("mapDiv"); create map connected to html div

myMap.setView([48.85826, 2.29383], 16); set center and zoom

osmURL = "http://{s}.tile.osm.org/{z}/{x}/{y}.png"; OSM tileserver URL

osmLayer = L.tileLayer(osmURL, { create layer using URL

attribution: "©OpenStreetMap contributors" add copyright text

});myMap.addLayer(osmLayer); add layer to map

}</script>

</head><body onload="init()"> run init script after page loaded

<div id="mapDiv" map placeholder

style="width:400px; height:400px;"></div> placeholder CSS style

</body></html>

Task 2 : Create an HTML page with the content of listing 1.This is best done starting with the file osm.html.txt from thefilefragments folder (see tips on page 1). Save it as osm.html. Donot copy from this PDF file! Make sure you save this file as a new


30

file with the extension .html, not .html.txt!). View the result byopening the file in a web browser. •

The result should look like figure 1, showing the OpenStreetMapfor the Eiffel Tower area in Paris (France).

Figure 1: result of loading listing 1.

3.1 Enhancing the lay-out

Remember the connection between the Leaflet “mapping engine”and the webpage is the HTML element you associate with your mapobject (by means of providing its unique id) . You can thereforechange the layout by setting the properties of the separate place-holders in HTML. Many HTML elements can be used as place-holders, one of the most simple to use is the <div> element we usedearlier. So let’s change the layout:

Task 3 : Change the line:<div id="mapDiv" style="width: 400px; height: 400px; "></div>

to:{<div id="mapDiv" style="position: absolute; left: 5px; top→

: 5px; width: 400px; height: 600px; overflow: hidden; border→: 1px solid blue; "></div> •

The style properties are expressed using CSS (Cascading Style


31

Sheets), a styling language standardised by the W3C, the WorldWide Web Consortium. The meaning of the properties used is:

position: this lets you define positioning absolute or relative to otherdivs.

left & top: the (absolute) location with respect to the upper left cornerof the window

width & height: the size of the element (in pixels)

overflow: if the content is larger than fits the div, it will not be shownif this is set to hidden. Other settings are visible (willoverflow), scroll (will make scrollbars) and auto (let browserdecide).

border: the border look (width, type and colour). You can also setthe fill in a similar way.

3.2 Changing the starting position and zoom

You can set up the OpenStreetMap to start at any place on theglobe, by setting an alternative starting point and zoom in thesetView function:myMap.setView([latitude or x,longitude or y], zoom);

Note that the order is longitude–latitude (not the more traditionallatitude–longitude)! This is done to match the order x–y whenusing projected (cartesian) systems. The zoom level is an integer,its range is depending on the map provider you are using. In thecase of OpenStreetMap (and most other similar services) the rangeis from 0 (zoomed out to whole world) to 18 (street level).

Task 4 : Try setting up the map in such a way, that it startszoomed in to the TU Vienna building at the Erzherzog-Johann-Platz 1, 1040 Wien. . . •


32

EXERCISE: QGIS — Open Source desktop GISUsing QGIS to explore OGC services, OpenStreetMap andcreate data

Barend Köbben


Contents

1 Introduction of QGIS 1

2 Using OGC compliant services in QGIS 22.1 Connecting QGIS to Web Map Services . . . . . . . 22.2 Connecting QGIS to Web Feature Service data . . . 4

3 The OpenLayers plugin: Using webmap layers inQGIS 5

4 Creating new vector data 6


33


34

Key points

In this exercise you will use QGIS, an open source desktopGIS, for some common tasks:

• to connect to Open Web Services (WMS and WFS) asdefined by the Open Geospatioal Consortium (OGC);

• to use PostGIS data: How to show these data in theform of maps as well as how to import data into thosedatabases;

• to create some vector data by digitizing on top of anOpenStreetMap background;

• to export vector data to the common KML (KeyholeMarkup Language) format.

Note that this is meant just as a quick primer to the useof QGIS, not a full-fledged manual. For more informationwe point you to the official documentation at http://qgis.org/en/docs/index.html

1 Introduction of QGIS

QGIS (http://qgis.org) is an Open Source, stand-alone GIS client,programmed in C++ using the multi-platform Qt framework. Youcan use it to work with vector– and raster–files, databases or anyopen standard WMS or WFS–compliant server. A strong point ofQGIS is its extensibility: you can add plug–ins that are writtenin either C++ or Python, and you can connect it to GRASS, apowerful GIS analysis tool.

Task 1 : Users at ITC can use the ITC software manager (ifinstalled on your computer). You can also use QGIS in the OS-GEOLive system. Other users go to the URL http://qgis.org/and download the latest stable version (sometimes called ’release’,whereas ’master’ is the development version). Choose the one suit-able for your operating system. Windows users should use the‘standalone installer’, and take care to install the correct 64- or 32-bits version, depending on their hardware. •

QGIS can load maps and data from a huge array of possible sources:

• online maps served as an OGC-compliant Web Map Service(WMS);

• online spatial data served as an OGC-compliant Web FeatureService (WFS) and Web Coverage Services (WCS);


35

http://qgis.org/en/docs/index.html

http://qgis.org/en/docs/index.html

http://qgis.org

http://qgis.org/

• various other map services, such as OpenStreetMap, GoogleMaps, Bing Maps, etcetera, through the use of the “Open-Layers” plugin; ;

• most vector formats supported by the OGR library, includingESRI shapefiles, MapInfo, KML, GeoJSON, GPX and GML;

• raster formats supported by the GDAL library, such as digitalelevation models, aerial photography or satellite imagery invery many formats;

• spatially-enabled PostgreSQL tables using PostGIS and Spa-tiaLite, by means of a ‘live’ connection to such databases;

• locations and mapsets from GRASS (an open source GIS);

The list is in principle endless, because the functionality of QGIScan be extended by plugins. Plugins add functionality to QGIS, andthey are usually made by others than the main QGIS developers.Because QGIS is an Open Source software, anyone can add plugins,which can be programmed using either C++ or Python.

2 Using OGC compliant services in QGIS

QGIS supports the Open Standards of the OGC, as described ear-lier in the “Short Introduction to Geo-webservices”. In the shortexamples below you will load map layers from Web Map Services(WMS) as well as vector data from Web Feature Services (WFS)

2.1 Connecting QGIS to Web Map Services

Task 2 : Choose the Layer > Add WMS/WMTS Layer... menu orclick the WMS layer icon. You can choose your Server Connectionfrom the list.

This list can be initially filled with some well-known services byclicking ‘Add default servers’. Try to find the service providedby LizardTech server. Once you have selected it and clicked theConnect button, the software sends a so–called GetCapabilitiesrequest to the WMS. The resulting XML description of the capa-bilities of the service will be parsed by QGIS and it will display thelayers that were advertised as being available.

Try to find and load a layer that displays a satellite image of thewhole earth. This will usually be the so–called BMNG, or “BlueMarble Next GenerationÕÕ, a dataset created from MODIS satel-lite images by NASA JPL. •


36

You can also add your own WMS connections to this list, e.g., tothe example Thailand WMS services provided on the ITC servers:

Task 3 : Choose again the Layer > Add WMS/WMTS Layer...menu (or click the WMS layer icon). Now add your own serverconnection by clicking ‘New’. In the Name field you can give anyname for the connection you want. In the URL field you put the so–called root URL, where the software can find the GetCapabilitiesinterface of the service.

• Those students that have followed the exercises on setting uptheir own Mapserver WMS should now enter the particularsof their own WMS server: Use the proper <URLPATH> and<NETPATH> to point to the proper .map file (as decribedin the exercises).

• In case you did not create your ownWMS (yet), use this URL:http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=D:/Inetpub→/geoserver/mapserver/config.map&

Now that connection is added, you can use it like the previous oneto retrieve capabilities and load WMS layers: Combine the layers‘railroad’ and ‘airports’ from the Thailand WMS with the ‘nextgeneration blue marble’.

Try to find out how to zoom to the extent of the Thailand layer,so that the map image is similar to the adjoining picture. •

Using these techniques, you can use any WMS available on theinternet or your local intranet. The only thing you need to knowis the the root URL, where the GetCapabilities interface of theservice can be found. E.g., you will learn (or have learned) how touse MapServer to publish a OGC-compliant WMS. To access thisservice in QGIS, again you would use the ‘base URL’ to the service.


37

2.2 Connecting QGIS to Web Feature Service data

A big disadvantage of loading WMS images, instead of actual data,is that you can not symbolise the data the way you want. In theprevious Task you may have noticed that the visualisation of therailroads was not very suitable for combination with the NASAraster image. But because it comes as a map image from a WMS,there’s nothing you could do about that. By loading vector data,you can change that. That means you could use also that other typeof OGC geo-webservice, the Web Feature Service (WFS) becausethat delivers vector data in the form of a stream of GML.

Task 4 : You can add a WFS connection similar to the way youadded WMS connections in the earlier Task. The root URL for theWFS is again dependent on your situation:

• Those students that have followed the exercises on setting uptheir own Mapserver WFS should now enter the particularsof their own WFS server: Use the proper <URLPATH> and<NETPATH> to point to the proper .map file (as decribedin the exercises).

• In case you do not have your own Mapserver WFS, use thisURL: http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=→D:/Inetpub/geoserver/mapserver/wfs_config.map&

Add the ‘airports’ layer from that service. . . •

The data are loaded and visualised as lines using a default line–width, colour and line–type. But you can change these: Right–click on the layer name in the Layers panel (normally on the leftof the application window), and choose the Properties item fromthe menu. In the Layer Properties dialog, choose the Symbologytab.

Task 5 : Experiment with the settings until you have an air-ports visualisation that fits well with the ‘blue marble’ image back-ground. . . ... •


38

3 The OpenLayers plugin: Using webmap layers in QGIS

QGIS is not limited to loading data from OGC services and files, italso allows you to use existing publicly available map services, suchas Google, Bing, OpenStreetMap etcetera. . .We will try out the useof OpenStreetMap, using a plug–in that offers that functionalitynamed (somewhat confusingly) the “OpenLayers plugin”.

Task 6 :

First check if the OpenLayers plugin is installed: Choose Plugins> Manage and Install Plugins..., and type “openlayers” in theFilter box. If the plugin is available, it will be listed and enabled(checked). You can go on to the next Task.

If not, select the plugin by checking the box and (if necessary) clickthe Upgrade Plugin button. Click Close. •

An item called OpenLayers Plugin should now be available in theWeb menu.

This plugin offers access to many publicly available map services,such as OpenStreetMap, Google Maps, Bing Maps and others. Butdespite its confusing name it does not offer direct access to theOpenLayers Javascript API. . . !

Now let us use the plugin to have OpenStreetMap in the back-ground:

Task 7 : Choose Add OpenStreetMap layer from this submenu,and the OpenStreetMap will be opened, zoomed out on the wholeworld.

Navigate to the location you were asked to set as the focus for themapping webpage you were creating in the earlier exercises. . . •


39

4 Creating new vector data

We will create a very simple vector line dataset, that depicts awalking route.

Task 8 : Choose the menu Layer > New > New Shapefile Layer...The New Layer dialog opens (see below). Make the following set-tings:

1. For Type choose Line;

2. Make sure the data is stored in latitude-longitude (unpro-jected), by checking that the field next to the Specify CRSbutton is set to EPSG:4326 - WGS84. If not, click the buttonand correct it;

3. In the New attribute section, create one attribute of typeText, call it for example routeName. Click the Add to attributelist button to actually add it;

4. Click OK to create the new file. Save it as “myRoutes.shp”.

Now you can start adding lines for your route:

Click first the Toggle Editing button in the QGIS menubar, thenthe Add Feature button. Create a nice walking route. Dependingon the context you do this exercise in it could be e.g. a routefrom the Enschede main station to the ITC building, from the TUVienna workshop premises to the Karlsplatz conference building,etcetera.. You can add points to the line by clicking in the map,undo them by using the CTRL-Z key or Edit > Undo menu.

If you have finished a route, right-click, fill in the route name andpress OK. Use the Toggle Editing button again to stop editing.Remember to save regularly! You can change the visualisation ofthe line (and many other properties) by double-clicking the symbolname in the layers list, or choosing the Layer > Properties menu.

You should create at least two alternative walking routes in thesame file.

•


40

SERVING DATA AS A WEB MAP SERVICEUsing Geoserver to set up an OGC WMS

Barend Köbben


Contents

1 Starting and Administrating GeoServer 1

2 Creating Web Map Services in GeoServer 22.1 Testing the WMS . . . . . . . . . . . . . . . . . . . . 3

3 Styling the WMS using Styled Layer Descriptors(SLD) 4


41


42

Key points

In this exercise you will learn how to set up the softwareGeoServer as a Web Map Service using the Open GeospatialConsortium’s OWS standards. You will publish data youcreated earlier as a WMS.

Note that this exercise assumes you are using the OSGeoLive sys-tem, and that you have achieved the tasks in the exercise “UsingQGIS to create data”.

1 Starting and Administrating GeoServer

GeoServer (http://openserver.org) is an open sourcesoftware server written in Java. Designed for inter-operability, it publishes data from any major spatialdata source using open standards. Being a community-driven project, GeoServer is developed, tested, and sup-ported by a diverse group of individuals and organiza-tions from around the world. GeoServer is the refer-ence implementation of the Open Geospatial Consor-tium (OGC) Web Feature Service (WFS) and Web Cov-erage Service (WCS) standards, as well as a high per-formance certified compliant Web Map Service (WMS).

GeoServer is a service: That means that it acts as a backgroundapplication, listening for requests on the web. You configure itusing a series of web pages. It is installed on the OSGEO LiveDVD, but the service has to be started up first in order to work:

Task 1 : In the menu, choose Geospatial > Web Services> GeoServer > Start GeoServer. The server starts up and (af-ter you OK this) a browser window is opened to show the con-nection to the administration pages of the service, at the URLhttp://localhost:8082/geoserver/web. This is by default us-ing the “public” interface, where you cannot change any settings.In order to set up the services you will have to login. Fill in theusername (“admin”) and password (“geoserver”) and click the loginbutton. The administrator pages are loaded. . . •


43

http://openserver.org

http://localhost:8082/geoserver/web

2 Creating Web Map Services in GeoServer

GeoServer uses a fairly elaborate setup: There are several Workspaces,that each can hold one or more DataStores. These connect theservice to various datastores, either simple ones like vector– andraster–files, or more complicated ones like spatial databases or otherOGC services. Each datastore can in turn contain one or moreLayers.

Task 2 : We will use an existing Workspace, the default onecalled “it.geosolutions”. In the Data menu, on the left side of thescreen, click the Stores icon or name. Now click the Add NewStore icon. From the list of datastores, choose the one called“Shapefile – ESRI(tm) Shapefiles (*.shp)”.

Now fill in the dialog: For the Shapefile location, you can use theBrowse... button to navigate to the shape–file you created earlierin QGIS [alternatively, you can use a pre–made one delivered toyou by the teacher or via the workshop website]. Click the Savebutton. •

Depending on the way your OSGeoLive system has been set up and! →ran, an error message might occur, stating that the system “Couldnot acquire data access”. This is a problem with security settingsof the directory where you saved the data earlier. The simplest wayto solve this is to copy your data files (so all the pieces of the shapefile: .shp, .dbf, .prj, etcetera) from your directory to GeoserversData directory. The path to that directory is usually:/usr/local/lib/geoserver-2.5/data_dir/data/(where the version number of geoserver might be different)

You have now created a new Data Store that makes the routesshapefile available within Geoserver. The next step is to publishthe data as a service, in this case as a Web Map Service (WMS):


44

Task 3 : Click in the data menu (left side of screen) on theLayers item. In the next screen, choose the Add new Resourceitem. From the list choose “it.geosolutions:myRoutes”, and in thelist of layers that is shown next click on the Publish link next tothe myRoutes layers (this normally should be the only one to choosefrom).

Now you can edit the layer properties. Most fields should havebeen filled in correctly by default. Check if the projection is setcorrectly (to EPSG:4326). If necessary, Click the Find button toset the Declared SRS field to EPSG:4326.

Complete both the Native Bounding Box and Lat/Lon BoundingBox fields, by clicking the Compute from data links under them.Then click the Save button. •

2.1 Testing the WMS

You can test the if layer publishing was successful by using GeoServersbuilt-in client:

Task 4 : Choosing Layer Preview in the Data menu (left sideof screen). There are many tests here, the most easy being to clickon the OpenLayers link. •


45

Now test if your data is available for anyone on the internet thatconnects to one of the webservices that the GeoServer offers, byusing another client to open the WMS:

Task 5 : Test if the WMS of the routes you just created in-deed works for all, by opening it in QGIS, shown on top of Open-StreetMap. By using what you learned in earlier exercises, youshould be able to figure out how to do this. . . •

3 Styling the WMS using Styled Layer Descriptors (SLD)

In your WMS, the routes you have created are depicted with a thinblue line. This just happens to be the default style set for line data.Of course you would rather like to change this symbolisation!

In GeoServer, styling is accomplished using a markup languagecalled Styled Layer Descriptor, or SLD for short. SLD is anXML-based markup language and is very powerful, although some-what complex. SLD is one of the OGC standards.

In GeoServer styling is most often specified using XML SLD styledocuments. Style documents are associated with GeoServer layersto specify how they should be rendered. A style document specifiesa single named layer and a user style for it. Within the top-levelstyle are one or more feature type styles, which act as “virtual lay-ers” to provide control over rendering order (allowing styling effectssuch as cased lines for roads). Each feature type style contains oneor more rules, which control how styling is applied based on fea-ture attributes and zoom level. Rules select applicable features byusing filters, which are logical conditions containing predicates, ex-pressions and filter functions. To specify the details of styling forindividual features, rules contain any number of symbolizers. Sym-bolizers specify styling for points, lines and polygons, as well asrasters and text labels.

Vector data that GeoServer can serve consists of three classes ofshapes: Points, lines, and polygons. Lines (one dimensional shapes)are the simplest, as they have only the edge to style (also known as“stroke”). Polygons, two dimensional shapes, have an edge and aninside (also known as a “fill”), both of which can be styled differently.Points, even though they lack dimension, have both an edge and a


46

fill (not to mention a size) that can be styled. For fills, color canbe specified; for strokes, color and thickness can be specified.

Task 6 : In the GeoServer administration page, choose theData > Styles menu, and click the +-button to Add a NewStyle.

Give the style a Name, e.g. “MyRoutes”, and choose theWorkspace you used before (it.geosolutions).

Copy the text from Listing 1 into the SLD file edit field, andclick Submit.

Now go back to the Layers menu and edit the layer. Click thePublishing tab and change the Default Stylemenu to the style

you just created. •

x If you now load the WMS layer (in the Layers Preview or inQGIS), you will see the symbolisation has changed from the defaultto a 3 pixel wide, 50% transparent red line. Also, the line is labelledwith its name attribute.

The SLD language is rather complex, and in this small exercise weonly use some very basic elements. For more possibilities it is goodto know:

• The GeoServer website has a very useful section called the“SLD Cookbook” (http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/);

• The official SLD standard specification can be found at theOGC website (http://www.opengeospatial.org/standards/sld)

• The easiest way to create styles is using QGIS: In that soft-ware, any layer style you have created using the QGIS StyleProperties dialog can be saved as an SLD file!

Task 7 : Try to create a style that has different symbols for thedifferent routes. The trick is to use various Rules with Filters.The easiest way to create these is to use the QGIS editing as de-scribed above. •


47

http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/

http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/

http://www.opengeospatial.org/standards/sld

http://www.opengeospatial.org/standards/sld

Listing 1: myRoutes.sld.txt (from the filefragments folder)<?xml version="1.0" encoding="ISO-8859-1"?><StyledLayerDescriptor version="1.0.0"xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"xmlns="http://www.opengis.net/sld"xmlns:ogc="http://www.opengis.net/ogc"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><NamedLayer><Name>Walking Route</Name><UserStyle><Title>Walking Route</Title><Abstract>Simple Walking Route style</Abstract><FeatureTypeStyle><Rule><Name>MyRoutes</Name><Title>My Routes</Title><Abstract>Transparent red line with 3 pixel width and label</Abstract><LineSymbolizer><Stroke><CssParameter name="stroke">#FF0000</CssParameter><CssParameter name="stroke-width">6px</CssParameter><CssParameter name="stroke-opacity">0.5</CssParameter>

</Stroke></LineSymbolizer><TextSymbolizer><Label><ogc:PropertyName>name</ogc:PropertyName>

</Label><Font><CssParameter name="font-family">Times New Roman</CssParameter><CssParameter name="font-style">Normal</CssParameter><CssParameter name="font-size">14</CssParameter><CssParameter name="font-weight">bold</CssParameter>

</Font><Fill><CssParameter name="fill">#000000</CssParameter>

</Fill></TextSymbolizer></Rule>

</FeatureTypeStyle></UserStyle>

</NamedLayer></StyledLayerDescriptor>


48

EXERCISE: PROGRAMMING WEBMAP CLIENTSUsing Leaflet to overlay Geoserver WMS on an existing OSMmap

Barend Köbben

Version 1.0 GeoServer WMSNovember 13, 2014

Contents

1 Adding Geoserver WMS layers to OpenStreetMap 11.1 Adding a layer switcher . . . . . . . . . . . . . . . . 21.2 Adding a legend . . . . . . . . . . . . . . . . . . . . . 3


49


50

Key points

This is a reference for the use of Leaflet, a JavaScript API(Advanced Programming Interface). Leaflet can be used tobuild general WebMapping clients, among others to connectto OGC Web Map Services. In this exercise we will give avery brief introduction, where you will learn how to:

1. Add the WMS layer you published using Geoserver tothe OSM map web page you created.

Note this exercise description assumes you have done the exercises“Using the Leaflet Javascript API to make a simple OpenStreetMapviewer” as well as“Using GeoServer to set up an OGC WMS” beforethis one. . .

1 Adding Geoserver WMS layers to OpenStreetMap

Earlier you (should) have made a webpage in which you programmedan OpenStreetMap viewer, using Javascript from the Leaflet API.Now let us add a layer to that map, using the WMS with walkingroutes we made earlier in the GeoServer exercises:

Task 1 : Open the HTML file you created and add the codein listing 1 (remember you can copy the code from the file in thefilefragments folder). Insert the code just after the layer defini-tion you made earlier (for the OSM world map):

Listing 1: geoserverwms.txt

wmsURL = "http://localhost:8082/geoserver/it.geosolutions/→wms";

wmsLayerRoutes = L.tileLayer.wms(wmsURL, {version: "1.3.0",layers: "myRoutes" ,format: "image/png",transparent: true,attribution: "©Your Name"});

Refer to the earlier GeoServer exercise, to find the proper wmsURL foryour service. Also check the name of the layer you set in layers:,it should match the name you gave this layer in the WMS set–updialog. . . !

Now look for the line in the code that reads:myMap.addLayer(osmLayer);


51

To include the new layer in the map object add the line:myMap.addLayer(wmsLayerRoutes);

Make sure you have the two lines in the correct order: The layersare added from bottom to top, and you do not want the OSM layerto overlap your WMS routes! Try out the map in a web browser. •

1.1 Adding a layer switcher

Now we have more than one layer, we want to control which ofthose are shown in our map. So we will add some layer controls.

There are two types of layers in Leaflet:

1. base layers that are mutually exclusive: only one at a timecan be visible on your map. E.g. tile layers such as GoogleMaps,Bing or in our case OpenStreetmap;

2. overlays: all the other layers that you put over the base lay-ers. In our case, the routes WMS. Because several of thesecould be combined, they work best if the layer can be trans-parent, which can be achieved with most layers created fromvector data (note we set transparent: true for this pur-pose, when we created the WMS layer). This does not meanthe actual vectors are transparent, but that those parts thathave no data are, so that underlying data layers can be seen“through” them.

Task 2 : Create two objects. One to contain the base layersand one to contain the overlays. These are just simple objects withkey/value pairs. The key is what sets the text for the layer inthe control (e.g. “OpenStreetMap”. The corresponding value is areference to the layer object (e.g. osmLayer). Add the text below tothe end of the script (before the closing } of the init() function):

baseLayers = {"OpenStreetMap": osmLayer};

overlays = {"My Routes": wmsLayerRoutes};

Now, all that is left to do is to create a Layers Control and addit to the map. The first argument passed when creating the layerscontrol is the base layers object. The second argument is the over-lays object. Both arguments are optional — for example, you can


52

pass just a base layers object by omitting the second argument, orjust an overlays objects by passing null as the first argument:

L.control.layers(baseLayers, overlays).addTo(myMap); •

A new control should have been added to the map: next to thezoom tools, there now should be a layer–switcher icon in the upper-right corner. Clicking it will reveal a Layer Control, in which youcan switch layers on and off.

1.2 Adding a legend

In order to have a place to put a legend in, we will change the layout.Add another section to the lay–out by adding another <div> thatwill hold the legend for the WMS layer:

Task 3 : Add a second <div> element for the legend:

<div id="legendDiv" style="position:absolute; width:250px;→height:200px; left: 420px; top: 5px; overflow: auto; →

border: 1px solid red; "><img src="http://localhost:8082/geoserver/it.geosolutions/→

wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetLegendGraphic→&FORMAT=image/png&LAYER=test">My Routes<br/>

</div>

•

This should result in the layer legend being shown in the legenddiv.

The src parameter of the <img> (image) tag issues a new OGCWMS request called GetLegendGraphic. This retrieves the legendof the LAYER requested as an image in the FORMAT requestedfrom the WMS. Note that GetLegendGraphic is an optional OGC-WMS request, our GeoServer installation does support it, but notall WMS services do!


53

SOMAP-OSGEO WORKSHOP Open GIS and Modern Webmapping … · 2018. 11. 5. · SOMAP-OSGEO WORKSHOP...

Documents

Transcript of SOMAP-OSGEO WORKSHOP Open GIS and Modern Webmapping … · 2018. 11. 5. · SOMAP-OSGEO WORKSHOP...