Application Development in Web Mapping 5.

(1)

Application Development in Web Mapping 5.

OWS application

László Kottyán

(2)

Created by XMLmind XSL-FO Converter.

Application Development in Web Mapping 5.: OWS application

László Kottyán Lector: Antal Guszlev

This module was created within TÁMOP - 4.1.2-08/1/A-2009-0027 "Tananyagfejlesztéssel a GEO-ért"

("Educational material development for GEO") project. The project was funded by the European Union and the Hungarian Government to the amount of HUF 44,706,488.

v 1.0

Publication date 2010

In Module 5 an OWS simple application is created.

The right to this intellectual property is protected by the 1999/LXXVI copyright law. Any unauthorized use of this material is prohibited. No part of this product may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system without express written permission from the author/publisher.

(3)

Chapter 5. OWS application

1. 5.1 Introduction

ADW Module 5 is based on Module 2, Module 3 and Module 4.

In Module 2 a PostgreSQL example database was created from OpenStreetMap source and a Geocaching dataset was added to the database.

In Module 3 GeoServer was installed and reviewed.

In Module 4 OpenLayers client was introduced.

In Module 5 an OWS application will be created using:

• PostgreSQL Geocaching dataset,

• GeoServer with WMS and SLD,

• OpenStreetMap Mapnik layer,

• and OpenLayers.

2. 5.2 The development environment

For the sample application we will use the existing szfv_osm_db database from PostgreSQL, it was created in Module 2.

In Module 3 there was an Apache Tomcat server installed with GeoServer. We will use GeoServer for creating OGC Web Service (OWS) from database and serve maps to client.

The OpenLayers will be used to create the client application. The client will be served to the web browser by Apache Tomcat. The easiest way to serve the client is to put the client source code into Tomcat 7.0\webapps\ROOT directory.

Download OpenLayers library from http://openlayers.org/ unpack it and place into the ROOT.

The HTML file of the client will be saved into the ROOT. If you save it as ows_client.html then you will have access to it using:

http://localhost:8080/ows_client.html

3. 5.3 Adding PostGIS data to GeoServer

The first step is to create GeoServer layers from PostGIS data.

Make sure that PostgreSQL and Tomcat are running. Open log in to GeoServer administrative area:

http://localhost:8080/geoserver/web/

Create a new store clicking on Stores on left and on Add new Store.

Select PostGIS database.

(6)

OWS application

2

Choose AWD workspace (it was created formerly), type geocaching as Data Source Name and fill the Connection Parameters.

(7)

OWS application

On New Layer Chooser select and publish geocache. When the resource information form display, compute bounding boxes and save it.

Click on Layers on the left and add walk table to the layers from the same store.

You can check the added layers on Layer Preview page.

4. 5.4 Styling layers with SLD

SLD (Styled Layer Descriptor) is an OGC standard. With SLD point, lines, polygons can be styled within an XML document.

In GeoServer admin area select Styles. Here, you can insert a new style, copy an existing one and modify, or upload a new style from file.

After you saved the SLD file assign it to a layer on Layer page Publishing tab.

Here is a sample point stlye:

<?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"

(8)

OWS application

4

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<Name>Point with styled label</Name>

<Title>Based on GeoServer SLD Cook Book: Point with styled label</Title>

<Rule>

<Mark>

<WellKnownName>triangle</WellKnownName>

<Fill>

</Fill>

</Stroke>

</Mark>

</Graphic>

</PointSymbolizer>

<Label>

<ogc:PropertyName>id</ogc:PropertyName>

</Label>

<Font>

<CssParameter name="font-family">Arial</CssParameter>

<CssParameter name="font-style">normal</CssParameter>

<CssParameter name="font-weight">regular</CssParameter>

</Font>

</AnchorPoint>

</Displacement>

</PointPlacement>

</LabelPlacement>

<Fill>

</Fill>

</TextSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

It defines a point with label. To write an XML document is not too comfortable, however this SLD is self- descriptive. Reading the document tree you can realize the meanings of tags and attributes. You can read more about styling in GeoServer SLD Cookbook¹.

5. 5.5 Displaying the layers

1 GeoServer SLD Cookbook: http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/index.html

(9)

OWS application

Before we start to create the client we need to know some parameters about our local WMS service. With this URL you get the service details, metadata in XML format:

http://localhost:8080/geoserver/wms?service=wms&request=GetCapabilities Save it and open in Firefox or an editor.

Now you have relevant information about the layers, you can start to create the client.

We will use OpenStreetMap layer as base layer and geocache and walk layers as overlays.

Type the following code into a file and save into the ROOT as ows_client.html.

<html>

<head>

<title>OpenLayers Example</title>

html, body, #map { width: 100%;

height: 100%;

margin: 0;

}

</style>

function init(){

var bounds = new OpenLayers.Bounds(

2048213.62, 5973065.741, 2061614.706, 5979022.181 );

var options = { controls: [

new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(),

new OpenLayers.Control.LayerSwitcher({'ascending':false}), new OpenLayers.Control.Permalink(),

new OpenLayers.Control.ScaleLine(),

new OpenLayers.Control.Permalink('permalink'), new OpenLayers.Control.MousePosition(),

new OpenLayers.Control.OverviewMap(), ],

maxExtent: bounds,

projection: "EPSG:900913", };

var map = new OpenLayers.Map('map', options);

var mapnik = new OpenLayers.Layer.OSM();

var walk = new OpenLayers.Layer.WMS(

"Walks", "http://localhost:8080/geoserver/wms", {layers: "AWD:walk", transparent: "true",

format: "image/png"

}, {isBaseLayer: false}

);

var geocache = new OpenLayers.Layer.WMS(

"Geocaches", "http://localhost:8080/geoserver/wms",

{layers: "AWD:geocache", transparent: "true", format: "image/png" }, {isBaseLayer: false}

);

map.addLayers([mapnik, walk, geocache ]);

map.setCenter(new OpenLayers.LonLat(18.4090782,47.1908359) .transform( new OpenLayers.Projection("EPSG:4326"),

new OpenLayers.Projection("EPSG:900913") ), 15 );

}

</script>

</head>

</body>

</html>

Explanation:

(10)

OWS application

6

• After some CSS styling the <script> tag refers to the library in ROOT folder.

• The bounds variable defines the bounding box.

• The options variable defines the controls to use on map.

• The maxExtent property gets bounds values.

• We use EPSG:900913 projection.

• When the map object is created it gets the parameters from options variable.

• In next three steps the layer objects is created. The isBaseLayer properties of WMS layers are false.

• Layers is added to map

• The map center is set with WGS84 coordinates, therefore the transform method is called.

• 15 is the zoom level.

• <body> has a <div> tag within which the map will be displayed.

On the next picture is the resulted client with controls.

Client with green point and line style.

(11)

OWS application

6. 5.6 Summary

In Module 5 a sample client application was created to demonstrate how the OWS works with PostGIS backend and OpenLayers client.

The client has some controls and more controls can be added. However it is not a finalized client, you can develop it extending its functionality.

Bibliography

Geoserver: GeoServer User Manual, Styling, 2011

OpenLayers: OpenLayers Documentation, http://docs.openlayers.org/

Application Development in Web Mapping 5.

Application Development in Web Mapping 5.

OWS application

László Kottyán

Application Development in Web Mapping 5.: OWS application

Table of Contents

Chapter 5. OWS application

1. 5.1 Introduction

2. 5.2 The development environment

3. 5.3 Adding PostGIS data to GeoServer

4. 5.4 Styling layers with SLD

5. 5.5 Displaying the layers

6. 5.6 Summary

Bibliography