You are on page 1of 23

Module 5: OpenLayers

Module 5
Working With OpenLayers
This module walks through the basics of creating web maps with OpenLayers. The reader will learn how to create an OpenLayers map from scratch, overlay data from various sources, and work with vector feature editing and styling.

In this module you will:

Learn how to create a map from scratch with OpenLayers. Learn how to overlay various types of data on different base layers. Learn how to edit and style vector data client-side.

Before you start:

Ensure that Module 4: Creating a Base Map has been completed. It is recommended (but not required) to use Firefox and install Firebug.

Links to have on hand:


OpenLayers - http://openlayers.org OpenLayers API Documentation - http://dev.openlayers.org/apidocs OpenLayers Examples - http://openlayers.org/dev/doc/examples

Module 5: OpenLayers

Section 1: Creating a Basic Map


1. Navigate to the following directory: C:\Program Files\GeoServer 1.6.5\data_dir\www 2. Create a new file called ol-basics.html. 3. Open ol-basics.html in the text editor of your choice and enter in the following text:
<html> <head> <title>Basic Map</title> <style type="text/css"> #map_container { width: 512px; height: 256px; border: 1px solid gray; } </style> <script src="openlayers/OpenLayers.js"> </script> </head> <body> <h2>Basic Map</h2> <div id="map_container"></div> <script> // your application code here </script> </body> </html>

4. Save changes to ol-basics.html.

Module 5: OpenLayers

5. Visit the following url in the web browser: http://localhost:8910/geoserver/www/ol-basics.html

6. Open ol-basics.html. 7. Locate the line // your application code here and replace it with the following: var map = new OpenLayers.Map("map_container"); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: "basic"} ); map.addLayer(wms); map.zoomToMaxExtent(); 8. Save changes to ol-basics.html. 9. Return to the web browser and refresh the page. (F5)

Module 5: OpenLayers

Module 5: OpenLayers

Section 2: Working with Base Layers


1. Open ol-basics.html. 2. For the WMS Layer created in the previous section: a. Change the name from OpenLayers WMS to Landsat Imagery. b. Change the url from http://labs.metacarta.com/wms/vmap0 to http://t1.hypercube.telascience.org/cgi-bin/landsat7 c. Change the layer from basic to MS. var wms = new OpenLayers.Layer.WMS( "Landsat Imagery", "http://t1.hypercube.telascience.org/cgi-bin/landsat7", {layers: "MS"} ); 3. Return to the web browser and refresh the page.

Module 5: OpenLayers

Section 3: Google Maps Base Layer


1. Open ol-basics.html. 2. Add the following to the head of the document directly before the line <script src=openlayers/OpenLayers.js : <html> Ignore the line <head> wrapping shown in the <title>Basic Map</title> code sample. Ensure that <style type="text/css"> you add the <script> #map_container { element so that is spans width: 512px; only a single line. height: 256px; border: 1px solid gray; } </style> <script src='http://maps.google.com/maps? file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5X cMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_Et eAjPdGDwqpQ'> </script> <script src="openlayers/OpenLayers.js"></script> 3. Add the following to the body of the document directly after the WMS layer definition: <body> <h2>Basic Map</h2> <div id="map_container"></div> <script> // create a map var map = new OpenLayers.Map("map_container"); // create a wms layer var wms = new OpenLayers.Layer.WMS( "Landsat Imagery", "http://t1.hypercube.telascience.org/cgibin/landsat7", {layers: "MS"} ); // create a google layer var gphy = new OpenLayers.Layer.Google( "Google Physical",{type: G_PHYSICAL_MAP} );
6

Module 5: OpenLayers

4. Change the line map.addLayer(wms) to map.addLayers([wms,gphy]): // create a google layer var gphy = new OpenLayers.Layer.Google( "Google Physical", {type: G_PHYSICAL_MAP} ); map.addLayer(wms); // add two layers to the map map.addLayers([wms, gphy]); 5. Add the following before the line map.zoomToExtent() : // create a google layer var gphy = new OpenLayers.Layer.Google( "Google Physical",{type: G_PHYSICAL_MAP} ); // add two layers to the map map.addLayers([wms, gphy]); // add a layer switcher control map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); 6. Save changes to ol-basics.html. 7. Return to the web browser and refresh the page. A file containing all the code up to this point can be found in the www directory and is named ol-basics3.html. It can be used to check your work up to this point.

Module 5: OpenLayers

8. Use the Layer Switcher located in the upper right hand corner of the map to select the Google Physical base layer.

With OpenLayers it is also possible to use base maps from other commercial providers such as Microsoft Virtual Earth and Yahoo Maps. See OpenLayers documentation for more information.

Module 5: OpenLayers

Section 4: Working with WMS Overlays


1. Open the file ol-overlays.html in the web browser by visiting the following url: http://localhost:8910/geoserver/www/ol-overlays.html

2. In the www directory (which contains the ol-basics.html file created in the previous section) open the ol-overlays.html file in the text editor.

Module 5: OpenLayers

3. Examine the bit of code which sets the projection for the for map to EPSG:900913: var map = new OpenLayers.Map("map_container", { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxResolution: 156543.0339, The 900913 projection maxExtent: new OpenLayers.Bounds(-15830414, matches2328577, the projection -5811660, 7337954) used by the Google base }); map. GeoServer can reproject any dataset into this projection and overlay it onto a Google map. Notice how 900913 resembles GOOGLE.

10

Module 5: OpenLayers

4. Return to the browser and examine Step 5 is only applicable if you are using the Firefox web browser with the Firebug extensions enabled. the map. Using the map controls on the left hand side of the map zoom the map into the north east of the United States. A rubber band zoom tool is available by holding down the Shift key. Hold down the mouse button and drag to define the zoom bounds.

5. Open the Firebug Console and type map.getExtent() at the prompt.

The console can be used to inspect the state of the application. It provides access to properties of any objects defined by the 11 application.

Module 5: OpenLayers

6. Return to ol-overlays.html in the text editor. 7. Edit the maxExtent property of the map so that it matches the bounds retrieved in step 5: var map = new OpenLayers.Map("map_container", { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-9749695, 4750102, -7245007, 6002446) });

12

Module 5: OpenLayers

8. Save changes to ol-overlays.html and refresh the web browser. You should now see the map centered to this location.

13

Module 5: OpenLayers

Section 5: Working with WFS Overlays


1. Return to ol-overlays.html in the text editor. 2. Change the definition of the states layer to the following: var states = new OpenLayers.Layer.WMS( "US States", "http://localhost:8910/geoserver/ows", {layers: "topp:states", format: "image/png", transparent: "TRUE"}, {isBaseLayer: false, opacity: 0.8} ); var states = new OpenLayers.Layer.WFS( "US States", "http://localhost:8910/geoserver/ows", {typename: "topp:states"}, { typename: "states", featureNS: "http://www.openplans.org/topp", projection: new OpenLayers.Projection("EPSG:4326"), extractAttributes: false, ratio: 1.2 In this example a WFS layer is } created to overlay vector data. As ); opposed to the previous section where a WMS layer was used to overlay raster data.

14

Module 5: OpenLayers

3. Refresh the web browser.

This example shows the ability of OpenLayers to do coordinate re-projection on the client. The data in this example is requested from GeoServer in geographic coordinates (EPSG:4326) and is re-projected to match the Google base map (EPSG:900913). The transformation is performed by the proj4s.js library. See OpenLayers documentation for more details.

15

Module 5: OpenLayers

Section 6: Editing with Vector Formats


1. Open the file ol-vector-formats.html in the web browser by visiting the following url: http://localhost:8910/geoserver/www/ol-vector-formats.html 2. Use the Edit Tools located in the upper right hand corner of the map to draw points, lines, and polygons.

3. Using the Selection Tool hover over features you have drawn and view the underlying representation for them. 4. Use the Format drop down list to change the format used to represent the feature.

16

Module 5: OpenLayers

5. Open Google Earth, and zoom into the north eastern United States. Digitize a polygon around the state of Ohio.

6. Select the new polygon in the Places panel and select Copy.

17

Module 5: OpenLayers

7. Switch back to the web browser. Select KML from the Format drop down list and paste the contents of the clipboard into the text box.

8. Click the Add Feature button and notice the same polygon show digitized on the map.

18

Module 5: OpenLayers

9. Open the ol-modify-feature.html file in the web browser by visiting the following url: http://localhost:8910/geoserver/www/ol-modify-feature.html

19

Module 5: OpenLayers

10. Select the draw polygon option from below the map and draw a new polygon.

20

Module 5: OpenLayers

11. Select the modify feature option from below the map and modify the polygon from step 10 by first selecting it, and then dragging verticies around.

12. Experiment with the rotation, resizing, and dragging features of the edit tool.

21

Module 5: OpenLayers

Section 7: Styling with Vector Formats


1. Open the file ol-style-rules.html in the web browser by visiting the following url: http://localhost:8910/geoserver/www/ol-style-rules.html 2. Hover over the various states to view information about the state. Notice how the style changes when the mouse if over the state.

This is an example of a thematic style based on state population. The styling rules can be defined in javascript directly, or by reading an SLD document.

22

Module 5: OpenLayers

3. Open the file ol-style-context.html in the web browser by visiting the following url: http://localhost:8910/geoserver/www/ol-style-context.html

In this example the style represents population density. Fill colors are generated by applying a function calculating density to each feature and generating a darker shade for higher populations.

23

You might also like