Geoserver Tutorial: Open Source Geospatial Tools Workshop

Open Source Geospatial tools workshop
28th – 30th August 2008

Pune Chapter
GeoServer Tutorial
Table of Contents
Overview......................................................................................................................... 2
1) Install GeoServer ........................................................................................................ 3
2) Load the data into PostgreSQL/PostGIS database using loader utility ...................... 5
3) Connect Your Data into GeoServer............................................................................ 8
4) Symbolize the Datalayer........................................................................................... 16
5) Modify OpenLayers client........................................................................................ 21
Salim Ali Centre For Ornithology And Natural History (SACON), Hyderabad.
1
Pune Chapter
Overview
Persistence – PostgreSQL / PostGIS
PostgreSQL is a high-performance object-relational database management system.

PostGIS extends spatial data capabilities to Postgres. We’ll cover setting up Postgres with
PostGIS, designing your data models, and importing your data.
Server – GeoServer
GeoServer is a feature rich, standards compliant open source server that connects your
information to the geospatial web. The workshop will give you what you need to
configure GeoServer to publish your data on the Web. We’ll walk through a
configuration with a Postgres back-end, data styling, and integration with browser-based
and desktop clients.
Client – OpenLayers
penLayers provides the base for a browser-based mapping client. This workshop will
cover the basics of building an application with OpenLayers—getting a simple slippy
map interface to display your data.
In the following demo, SACON shows how easy it is to serve your geographic data on
the web. Steps covered:
1. Install GeoServer
2. Load your data (shapefile) into PostgreSQL/PostGIS database using
OpenJUMP
We have provided Wetlands of Rajahmundry Mandal sample data with

this tutorial in the form of shapefiles as follows in the directory
data/Wetlands of Rajahmundry Mandal.
• Godavaririver.shp
• Rajahmundry-parliamentary Constituency.shp
• total water bodies.shp
3. Connect your data to GeoServer

4. Symbolize your shapefile with the help of uDig open source desktop GIS and
create a style in GeoServer
5. Create an OpenLayers client that visualizes your data.
2
Pune Chapter
1) Install GeoServer
GeoServer is map and geographic data serving software. In order to serve your map data
to the Internet you would need to install GeoServer on a server connected to the Internet
and having a registered domain name. A web server that you might already have
probably has web serving software such as Apache. However, GeoServer requires some
other components.
Prerequisites - GeoServer requires 2 additional components:
1. A servlet engine. A servlet engine called Jetty comes bundled with GeoServer.
Another popular servlet engine used is Tomcat.
2. A Java development kit (JDK). For this demo we installed JDK 1.4.2 on a
Windows XP. To install JDK 1.4.2, go to
http://java.sun.com/j2se/1.4.2/download.html and scroll down to the section “Java
SE Development Kit (JDK) 1.4.2” and click the Download button. On the
following download page, find your operating system (for example, Windows or
Linux), and download the installation file. For Windows, there is a choice of
online installation.
GeoServer version 1.6.4 was used for this demo. However, as of 26/08/2008 the latest
version is now 1.7 Beta RC 1. It may be something else as you are reading this.
GeoServer is constantly updated. You can download the latest stable release.
1. Go to
http://sourceforge.net/project/downloading.php?groupname=geoserver&filename
=geoserver-1.6.4b-war.zip&use_mirror=kent and download geoserver-1.6.4b-
war.zip
2. Please check out the installation guide provided along with this tutorial. We have
provided the installation of GeoServer with Tomcat (Server oriented installation).
If user just wants to try out it locally, then user can install just GeoServer exe
provided with this tutorial.
Explore the GeoServer web interface
GeoServer has a web interface where you can configure your installation and setup your
data. For this demo we are “serving” the data to ourselves, not installing GeoServer on a
server with a registered domain name, so we'll use “localhost” as the server name.
Open a web browser (any type - Firefox or Internet Explorer, etc) and go to:
http:/localhost:8080/geoserver/ (8080 is the servlet engine port). You'll see the GeoServer
welcome page:
3
Pune Chapter
Note that there are links to documentation and a demo page. If you click on the link
“OpenLayers client”, you'll see a page which contains some sample data already loaded
into GeoServer, such as topp:states. If you click on the “OpenLayers” link next to this
layer a sample OpenLayers interactive map will appear, showing this layer. Our goal is to
load Rajahmundry Dataset (shapefiles), symbolize them, and then edit the OpenLayers
client to add more datalayers.
4
Pune Chapter
2) Load the data into PostgreSQL/PostGIS database using loader utility
This can be achieved by following 2 ways.
1) Use the Loader utility: the shp2pgsql command of PostGIS.
Command for converting shapefile to sql file

shp2pgsql file.shp table_name > file.sql
Loading data in PostGIS
psql –u username –d dbname –f file.sql
Change SRID
select updategeometrysrid('your_table', 'geom_col', <new_srid>);
2) Use OpenJUMP tool.
Open a shapefile in OpenJUMP.
Go to File menuÆSelect submenu Load Dataset From File. Then browse the
shapefile on your drive.
5
Pune Chapter
Change SRID
Go to Layers MenuÆ Select Change SRID submenu and enter the SRID 32644
(for this tutorial, Rajahmundry lies in UTM 44N zone)
6
Pune Chapter
Save the spatial data into PostGIS database.
Go to File menuÆSelect submenu Save dataset as. Then a window will appear.
Select PostGIS table format and enter all details such as
Server: localhost (if the database is on your local machine)

Port: 5432
Database: Name of the database where you want to store the data.
Table: Name of the table in which you want to store the data.
Username: Enter username
Password: Enter password
Follow the same steps to load the other shapefiles in PostGIS.
7
Pune Chapter
3) Connect Your Data into GeoServer
Go to: http:/localhost:8080/geoserver/. You'll see the GeoServer welcome page:
http://localhost:8080/geoserver/
Log into GeoServer.
http://localhost:8080/geoserver/admin/login.do
8
Pune Chapter
Click on the “Login” link in the upper right, and then use the username and password
shown on the page (“admin” and “geoserver”). You'll see the GeoServer Configuration
page:
http://localhost:8080/geoserver/admin/login.do
After logging, you'll see the Welcome to GeoServer page.
Click on the “Config” link. You'll see the GeoServer Configuration page.
http://localhost:8080/geoserver/config/index.do
9
Pune Chapter
Click on the “Data” link. You'll see the GeoServer Data Configuration page:
http://localhost:8080/geoserver/geoserver/config/index.do
Add DataStore to GeoServer:
Click on “DataStores” link. You'll see the Feature Data Set Configuration page
Click on “New” link. You'll see Create New Feature Data Set page
10
Pune Chapter
Select “PostGIS” from the list as a Feature Date Set Description. For “Feature Data Set
Id” type a name such as “sacon”.
Click the “New” button. Next you'll see the “Feature Data Set Editor” page. Please fill up
the source of information as follows. Please look at the namespace which you select.
Here we selected “tiger”as a namespace.
11
Pune Chapter
Then hit “Submit” button. Don’t forget to hit “Apply” and “Save” button.
Now that we've added the DataStore to GeoServer, we need to create a new FeatureType
from that DataStore. Click on the “Feature Types” link. You'll see the Feature Type
Configuration page
Click on the “New” link to define new feature type in GeoServer. You'll see the Create
New Feature Type page
12
Pune Chapter
Then browse all the feature types made available by DataStores. Scroll down the list and
choose sacon::water_bodies. Click on “New” button to add new feature type.
http://localhost:8080/geoserver/config/data/typeNew.do
After clicking “New” button, you'll see the Feature Type Editor page. Click on
“Generate” button to create the bounding box.
http://localhost:8080/geoserver/config/data/typeNewSubmit.do
13
Pune Chapter
Now there is a FeatureType Editor form which allows you to configure the various
things.. First, choose a style to associate with the shapefile. For now, choose “polygon”
(later we will create our own style). For the SRS (Spatial Reference System) the number
32644, which means UTM zone 44N will come automatically as we have set the SRID in
PostGIS database. Click on the “Generate” button and a bounding box in latitude and
longitude will be generated from the EPSG code. After click “Generate” button, it will
show the bounding box parameters as follow.
http://localhost:8080/geoserver/config/data/typeEditorSubmit.do
Click the “Submit” button at the bottom of this FeatureType Editor Form, then “Apply”
button in the upper left, then “Save” button in the upper left. Don’t forget to hit “Apply”
and then “Save” button.
http://localhost:8080/geoserver/admin/saveToXML.do
14
Pune Chapter
Follow the same steps for other shapefiles. At this point the data is loaded! Click on the
“Welcome” link to go back to the first page with the OpenLayers client link, or put
http://localhost:8080/geoserver/mapPreview.do into your web browser. There should now
be a layer called tiger:rajahmundry in the list, and if you click on the OpenLayers link an
interactive OpenLayers map should appear, showing the datalayer, with a grey
symbolization.
15
Pune Chapter
4) Symbolize the Datalayer
We don't want to have a grey colored datalayer, we want green and yellow. GeoServer
uses a symbology system called SLD (Styled Layer Descriptor) which is an XML file.
However, instead of writing this XML file by hand, we can use uDig (user-friendly
Desktop Internet GIS) to create the file.
• Download and install uDig. (Current version as of 19/08/2008 was 1.1. RC 14)
• Start uDig (Start / All Programs / uDig1.1-RC12 /uDig).
• Load the wireless datalayer into uDig from GeoServer WFS (web feature server,
so we can change the colors).
Go to the File menu, and then choose New, then New Layer. Choose “Web Feature
Server”, then the Next button. Put
http://localhost:8080/geoserver/wfs?service=WFS&request=GetCapabilities into the
URL box. This will bring up a list of datalayers that are on your GeoServer. Put a check
mark next to the layer with the title godavari_river_Type and click the “Finish” button.
You should now see the data in the uDig map window:
16
Pune Chapter
http://localhost:8080/geoserver/wfs?service=WFS&reques
17
Pune Chapter
Change the colors of the godavari_river datalayer
To do this, in the lower left pane, highlight the name of the layer godavri_river_Type.
Right click and choose “Change Style”.
Change the color however you want. Click Apply once you have made your changes, and
move (but don't close!) the Style Editor window off to the side so that you can see the
map.
18
Pune Chapter
If you like the results, go back to the Style Editor window and click on “XML” in the left
column. You'll see the SLD XML of what you created using the uDig interface:
Create the style in GeoServer
Go to your web browser with the GeoServer web interface. From the Welcome page,
click “Config”, then “Data”, then “Style”. We're going to create a new Style. Click the
“New” link, make up a name for the style (example: godavari_river), then click the
bottom “New” button. Uncheck Toggle Editor. Select the entire XML text block from
uDig and paste it into the box on the GeoServer Style Editor page. Before you click
“Submit”, delete the line near the top of the XML file with this
content: ”<sld:FeatureTypeName>tiger:godavari_river</sld:FeatureTypeName>”. Then
click “Submit”.
19
Pune Chapter
Associate this style with the godavari_river layer
Now we need to associate the new style with the FeatureType. Go back to “Data”, then
“FeatureTypes” and choose in the dropdown “sacon:godavari_river” and click the “Edit”
button. For the Style dropdown, instead of “Polygon”, choose in the dropdown
godavari_river, then scroll to the bottom, click “Submit”, then “Apply” and “Save” in the
upper left. Return to the “Welcome” page, click “OpenLayers client”, and click the
OpenLayers link next to the tiger:godavari_river layer. You'll see that it's has colors
instead of grey.
Follow the same steps for symbolizing the other layers.
20
Pune Chapter
5) Modify OpenLayers client
One of the advantages of web mapping services (WMS) is that datalayers from different
sources can often be combined in client software (whether browser-based or desktop).
Our next goal is to combine the rajahmundry datalayer served from our local server with
other datalayers such as Godavari river and wetlands. We will save the sample
OpenLayers client from the GeoServer page and edit the Javascript to add a few other
layers In this section of the demo, we'll make a few minor changes to the OpenLayers
client (change the size of the map, add a layerlist).
Save the OpenLayers client page
While looking at the OpenLayers client page showing the rajahmundry boundary
datalayer in your web browser, choose File / Save Page As, and save the page as
rajahmundry.html into your GeoServer's data directory, then www directory. (example:
c:\geoserver\data_dir\www). This www is a web-accessible directory. Open this page in a
web browser at: http://localhost:8080/geoserver/www/rajahmundry.html. You will be
actually looking at a web-served page.
Edit rajahmundry.html
Open rajahmundry.html in a text editor such as Notepad. You'll notice some Javascript at
the top of the file. There will be a paragraph regarding tiled layers and untiled layers.
Change width and height of map
To change the width and height of the overall map, make changes at the top of
rajahmundry.html:
#map {
width: 371px;
height: 550px;
For example, change the height from 550 to 250. After making the change and saving
rajahmundry.html, refresh the page in your browser and notice that the map is a different
size. OpenLayers will ensure that the data is the correct aspect ratio (not stretched or
squished).
21
Pune Chapter
Add a layer switcher
A layer switcher will let us see the list of layers and turn layers on and off. In
amherst.htm, uncomment this line:
//map.addControl(new OpenLayers.Control.LayerSwitcher());
by deleting the two forward slashes. Save and refresh

http://localhost:8080/geoserver/www/rajahmundry.html in the browser. You'll notice a
small plus sign on the upper right side of the map. When you click on this, a list of layers
opens up. Currently we have only one layer (named tiger:rajahmundry).
Change a layer name
We can change a layer name as it appears in OpenLayers. In this part of the amherst.htm
file:
// setup untiled layer

untiled = new OpenLayers.Layer.WMS.Untiled(
"tiger:rajahmundry", "http://localhost:8080/geoserver/wms",
change the tiger:rajahmundry to “Rajahmundry Boundary”. Save the file

rajahmundry.html and refresh your web browser and click on the + to see the change.
Add another data layer to the map
22
Pune Chapter
To add another datalayer, copy and paste the paragraph with the untiled datalayer
information and change the relevant parts. Under map.addLayer(untiled); add:
godavari = new OpenLayers.Layer.WMS(

"Godavari River", "http://localhost:8080/geoserver/wms",
{
//width: '481',
srs: 'EPSG:32644',
layers: 'topp:godavari_river',
//height: '550',
styles: '',
tiled: 'true',
tilesOrigin : "143.60260815000004,-
43.851764249999995",
format: 'image/png'
},
{
'opacity': 0.75, 'isBaseLayer': false,
'wrapDateLine': true
}
);
We need a new name for this layer, so instead of “untiled” we are using “godavari”.
Save rajahmundry.html, refresh your web browser and click on + to see the change. You
can now turn the godavari layer on. However, you'll notice that you can see either
rajahmundry or godavari, but not both layered together on the map. To fix this, in the
untiled section, add a comma after the png' of the format line and add another line:
“transparent: true”
format: 'image/png',
transparent: true
Save rajahmundry.html, refresh in browser and you'll see that you can see both layers
together now if you turn both on.
Add more layers, grouped together
Layers can also be added that are grouped together and therefore turn
on and off together. Simply separate layers with commas.
Save rajahmundry.html, and refresh

http://localhost:8080/geoserver/www/rajahmundry.html in the browser. Turn on all the
datalayers and you should see:
23
Pune Chapter
See the OpenLayers documentation for more ways to edit your OpenLayers client!
For more on GeoServer, see the GeoServer User's Guide.
24

Geoserver Tutorial: Open Source Geospatial Tools Workshop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Geoserver Tutorial: Open Source Geospatial Tools Workshop

Uploaded by

Copyright:

Available Formats

Open Source Geospatial tools workshop

28th – 30th August 2008

Persistence – PostgreSQL / PostGIS

PostgreSQL is a high-performance object-relational database management system.

We have provided Wetlands of Rajahmundry Mandal sample data with

3. Connect your data to GeoServer

Prerequisites - GeoServer requires 2 additional components:

Explore the GeoServer web interface

2) Load the data into PostgreSQL/PostGIS database using loader utility

This can be achieved by following 2 ways.

1) Use the Loader utility: the shp2pgsql command of PostGIS.

Command for converting shapefile to sql file

2) Use OpenJUMP tool.

Open a shapefile in OpenJUMP.

Save the spatial data into PostGIS database.

Server: localhost (if the database is on your local machine)

Follow the same steps to load the other shapefiles in PostGIS.

3) Connect Your Data into GeoServer

Go to: http:/localhost:8080/geoserver/. You'll see the GeoServer welcome page:

Log into GeoServer.

After logging, you'll see the Welcome to GeoServer page.

Add DataStore to GeoServer:

4) Symbolize the Datalayer

Change the colors of the godavari_river datalayer

Create the style in GeoServer

Associate this style with the godavari_river layer

Follow the same steps for symbolizing the other layers.

5) Modify OpenLayers client

Save the OpenLayers client page

Change width and height of map

Add a layer switcher

by deleting the two forward slashes. Save and refresh

Change a layer name

// setup untiled layer

change the tiger:rajahmundry to “Rajahmundry Boundary”. Save the file

Add another data layer to the map

godavari = new OpenLayers.Layer.WMS(

Add more layers, grouped together

Save rajahmundry.html, and refresh

For more on GeoServer, see the GeoServer User's Guide.

You might also like