geo1007-labinstructions

GEO1007 Lab 4 - WMS layers in a Leaflet web map client & QGIS

This Lab assignment consists of three parts:

A. ‘Server side’ (with GeoServer): add another style to WMS layers, using SLD (Styled Layer Descriptor)

B. ‘Client side’: use of a Leaflet (JavaScript) web map client that supports WMS (and the Dutch coordinate reference system ‘Rijksdriehoekstelsel’).

C. Use your layers inside another client [QGIS]

Part A: Adding style to WMS layers (in GeoServer)

1. Preparation

a. Data files

Sync your fork on Github and pull the git repository to your laptop. The git repo contains top10delft.zip (inside the directory data/lab4).

Unzip it so that you get a directory top10delft, and place top10nldelft in the data/data directory of your GeoServer installation, so you will have: geo1007/apache-tomcat-<version>/webapps/geoserver/data/data/top10delft/ with the following shapefiles in it:

b. Style files

The (updated) git repo (again in: data/lab4) also contains sld_top10.zip. Unzip and copy the folder sld_top10 to the data/styles directory in your GeoServer installation, so you will have: geo1007/apache-tomcat-<version>/webapps/geoserver/data/styles/sld_top10/ with the following SLD files in it:

Note: there is currently no SLD file for the spoorbaandeel_lijn shapefile.

2. Add the top10nl layers in GeoServer

Start Apache Tomcat, and open GeoServer in your browser.

  1. Add a store:

    Add the whole top10delft directory containing the shapefiles as one ‘store’.

    As workspace name you can choose the one that you already created in the lab3 assignment, when you defined the ‘parcels’ layer (this is okay, because you can have the same workspace name for several different data stores and layers).

    💡 Note

    The new data is not being served from a database as in Lab 3. This time, select the Directory of spatial files (shapefiles) option when adding the store.

  2. Add layers:

    Then define layers in GeoServer for 2 of the 5 shapefiles (Which? The choice is up to you!).

    Note: the top10nl shapefiles are in the Dutch coordinate reference system. So use the same EPSG:28992 code as in the case of the PostGIS ‘parcels’ layer you added for lab3.

    Test in the Layer Preview (try a few options) to see the result.

    💡 Note

    Don’t forget to set the bounding box as in Lab 3 via Compute from native bounds

3. Adding style to a layer with SLD (Styled Layer Descriptor)

The next step is to add ‘style’ to the 2 layers you defined, with the cartographic goal to create a nicer looking digital map.

In this step you use the top10nl SLD files that you copied to the data/styles directory.

3.1 Use 'add new style' in GeoServer (in the data section). You have to give the style a name (free to choose, but use one that you can recognize later ...)

Then use 'browse' and 'upload' to link the appropriate top10nl SLD file to that new named style. You’ll see the XML load up in the Style Editor

Then ‘validate’ the style (and look at possible warnings or errors, and correct them) and when no errors then ‘submit’ the style.

Note: Because there is no SLD file for the ‘spoorbaandeel_lijn’ layer, look in the ‘styles’ list for a style for line geometries, and apply that to the ‘spoorbaandeel_lijn’ layer (in step 3.2).

3.2 After you have added the 2 styles to GeoServer, the next step is to apply each style to the corresponding top10nl layer. Do this via the 'layers' menu: Open the layer, so that you are in the Edit Layer page for that layer, then choose the second tab: 'Publishing' (see figure below).

Under ‘WMS settings’ you can make your new style the default style for that layer.

Test the top10nl layers again to see the effect of the styles. You can test in LayerPreview (and later in part B of this assignment in a real web map client).

❓ Question / Result 1

Explain why an SLD style definition is often layer-specific (in other words: why can it not be applied to just any layer).

4. Create a style for the ‘parcels’ layer that you created for the previous lab assignment (lab3)

Instead of using an already existing SLD file (as under step 3 above), you now make an SLD file yourself for the ‘parcels’ layer, ‘from scratch’. It can be a simple style (all parcels the same color (of the polygon and/or of the boundary line)), or a style that has different colors based on the values of one of the properties (= attributes) of the ‘parcels’ feature.

Apply your new style to your ‘parcels’ layer.

❓ Question / Result #2

Test the newly styled ‘parcels’ layer in the LayerPreview and

Part B: a Leaflet map client

Goal of this part of the assignment is to make a ‘map mashup’ using the output of WMS servers.

You will use a JavaScript (Leaflet) basic client that is available on the git repository of the course (lab4). It is based on this code: https://arbakker.github.io/pdok-js-map-examples/

We re-structured it a bit and added some other layers.

After having correctly updated your git repository earlier in this assignment, you should have under webapps a directory for lab4:

geo1007/apache-tomcat-<version>/webapps/lab4/lib/*.js
geo1007/apache-tomcat-<version>/webapps/lab4/index.html
geo1007/apache-tomcat-<version>/webapps/lab4/main.js
geo1007/apache-tomcat-<version>/webapps/lab4/main.css

This directory contains the client. Start Apache Tomcat and navigate in your browser to http://localhost:8080/lab4 You should see a map of the Netherlands, zoomed in to Delft. In the right hand corner there is an icon that gives the layers that are loaded at the moment:

For the following parts of the assignment you have to edit the main.js file (in a text editor of your choice).

Add a WMS layer

Include a WMS request for the 'parcels' layer you created during lab3, so that you will have an extra map layer.

💡 Hint

Inspect in the file main.js. How this is done for the 'geluidskaarten' WMS service (English: road noise / sound)?

💡 Hint

Do not forget to specify the new layer in the list in the overlays variable for the layer control, so you can switch it on/off.

❓ Question / Result #3

Make a screenshot of the 'parcels' layer added to the map.

If you do not succeed, describe what goes wrong, and what you tried to make it work and why you think it is not working.

Also add the top10nl layers you created earlier

You can do this as a group of layers, in one variable, like this:

layers: ['layer1', 'layer2']

(Replace layer1 etc. with the real layer name.)

Experiment with the styles for a layer

The style per WMS layer in the ‘geoclient’ examples is the default style for that layer.

To get another style for a layer than the default one, you have to specify the name of that style, like this:

styles: ['style1', 'style2']

(Replace style1 etc. with the real style name.)

💡 Note

Note: As a user of a WMS service, you can query the names of the layer styles for a layer are by performing a GetCapabilities request, like so: http://localhost:8080/geoserver/ows?service=WMS&request=GetCapabilities

Add a WMS layer of PDOK (national georegister)

Now add another layer to the Leaflet client, this time not from your own server (localhost), but a layer from a WMS service that is offered via the national geoportal, PDOK: https://www.pdok.nl/datasets

Note, if you do not speak Dutch, Google translate works fairly well on this page (but searching still will require Dutch search terms): https://translate.google.com/translate?sl=nl&tl=en&u=https%3A%2F%2Fwww.pdok.nl%2Fdatasets

Choose one WMS service from the list at PDOK, and find out which layers are offered by that service.

Then, add that layer to your Leaflet client (by editing main.js).

Test whether the new layer is indeed displayed in the Leaflet client, and make a screenshot of the resulting map.

❓ Question / Result #4

4.1 Describe what you did to find enough information about the PDOK layer, so that you could add it to the map in your geoclient.

4.2 Include the JavaScript fragment that you added to main.js, to load the layer.

❓ Question / Result #5

As you have seen the second background layer, with aerial images (‘luchtfotos’ / LUFO) does not work anymore. Find out the new URL for the ‘luchtfoto’, and fix the geoclient so that again there is a background layer of aerial images.

Part C: Using the layers in another client (QGIS)

In this part of the assignment, we are concerned with the ‘interoperability’ aspect, and next to your web client, we will be using QGIS to consume the data services you have created so far.

Load the same layers, those that the web client from Part B shows, inside QGIS.

❓ Question / Result #6

6.1 Describe what you did to load the layers inside QGIS. In your description also explain which Coordinate Reference System(s) you used and why? Also, reflect on: Did loading/visualizing the data go as smooth as you had expected (or were there problems)?

Include a screenshot of the QGIS user interface with all the layers loaded.

6.2 Use the parcel layer you loaded as WMS inside QGIS. In Lab 3, question 6 you explored the use of the WMS GetFeatureInfo request.

Explain if (and if so how) it is possible to make this request from within QGIS (and how the results are shown to the user).

Submit

Your report with answers should be in a zipfile, containing:

Submit the zipfile (together with your results for Lab 3) via Brightspace.