Professional Documents
Culture Documents
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.
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.
Ensure that Module 4: Creating a Base Map has been completed. It is recommended (but not required) to use Firefox and install Firebug.
Module 5: OpenLayers
Module 5: OpenLayers
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
Module 5: OpenLayers
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
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.
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
14
Module 5: OpenLayers
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
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
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