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
Section 1: Creating a Basic Map
- Navigate to the following directory:
C:Program FilesGeoServer 1.6.5data_dirwww
- Create a
new file called ol-basics.html.
- Open ol-basics.html
in the text editor of your choice and enter in the following text:
- 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 {
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>
- Save changes to ol‑basics.html.
-
1. Visit the following url in the web browser:
http://localhost:8910/geoserver/www/ol-basics.html2. Open ol-basics.html.
- 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();
4. Save changes to ol-basics.html.
5. Return to the web browser and refresh the page. (F5)
