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.

Overview
Persistence PostgreSQL / PostGIS PostgreSQL is a high-performance object-relational database management system. PostGIS extends spatial data capabilities to Postgres. Well 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. Well 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 OpenLayersgetting 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.

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.4bwar.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:

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
10

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 tigeras a namespace.
11

Then hit Submit button. Dont 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

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

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. Dont forget to hit Apply and then Save button.
http://localhost:8080/geoserver/admin/saveToXML.do
14

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

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

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

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

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

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

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

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

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

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 Description:

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 Pune Chapter

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

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

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

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

Open Source Geospatial tools workshop

3) Connect Your Data into GeoServer

Log into GeoServer.

Open Source Geospatial tools workshop

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

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

4) Symbolize the Datalayer

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

5) Modify OpenLayers client

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

Open Source Geospatial tools workshop

You might also like