GeoServer_tutorial

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


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.


http://www.postgresql.org/

http://postgis.refractions.net/

http://geoserver.org/

http://openlayers.org/


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:


http://www.geoserver.org/

http://www.apache.org/

http://www.mortbay.org/

http://tomcat.apache.org/

http://java.sun.com/j2se/1.4.2/download.html

http://geoserver.org/display/GEOS/Stable

http://sourceforge.net/project/downloading.php?groupname=geoserver&filename=geoserver-1.6.4b-war.zip&use_mirror=kent

http://sourceforge.net/project/downloading.php?groupname=geoserver&filename=geoserver-1.6.4b-war.zip&use_mirror=kent


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.



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.



Change SRID Go to Layers Menu Select Change SRID submenu and enter the SRID 32644 (for this tutorial, Rajahmundry lies in UTM 44N zone)



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.



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



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



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



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.



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



Salim Ali Centre For Ornithology And Natural History (SACON), Hyderabad.

13

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



14

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


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.


http://localhost:8080/geoserver/mapPreview.do


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:


http://udig.refractions.net/

http://localhost:8080/geoserver/wfs?service=WFS&request=GetCapabilities



17

http://localhost:8080/geoserver/wfs?service=WFS&reques


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.



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”.



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.



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).


http://localhost:8080/geoserver/www/rajahmundry.html


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




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:




See the OpenLayers documentation for more ways to edit your OpenLayers client!

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


http://www.openlayers.org/

http://geoserver.org/display/GEOSDOC/User

GeoServer_tutorial

Documents

Transcript of GeoServer_tutorial