Installation guide

11. GeoServer with OpenLayers

“OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers,

with no server-side dependencies. OpenLayers implements a JavaScript API for building rich

web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs,

with one important difference -- OpenLayers is Free Software, developed for and by the Open

Source software community.”

(Reference: http://openlayers.org/)

 The best way to learn OpenLayers is to start with the documentation which is available at:

1. http://docs.openlayers.org/

2. http://trac.osgeo.org/openlayers/wiki/Documentation

 A great number of examples are also available at:

1. http://openlayers.org/dev/examples/

Pay a visit to the link of http://localhost/spatialdbtips/map-with-wms.html. And jump to the

physical location of this file map-with-wms.html at C:\Program Files\Apache Software

Foundation\Tomcat 7.0\webapps\spatialdbtips. Now you should aware that it will NOT be valid if

you double click the file directly in the spatialdbtips folder.

Now let’s investigate the course code of this file. Right click map-with-wms.html, and click Edit

with Notepad++.

1. <script src="OpenLayers/OpenLayers.js"></script> is included during the <head></head>

part, which means you must include OpenLayers.js file to use OpenLayers in the webpage.

2. Content in the <script type="text/javascript"></script> is a javascript definition of the

OpenLayers map that you have seen.

3. onload="init()" in the <body onload="init()"> means function init() will be initialized to

create OpenLayers whenever the webpage is open.

4. OpenLayers will be showed when <div id="map" class="smallmap"> is executed, and

typically id="map" corresponds with name of the OpenLayers map.

In this example the map is created using the following code:

map = new OpenLayers.Map( 'map' ,

{controls:[ new OpenLayers.Control.MouseDefaults(),

new OpenLayers.Control.LayerSwitcher(),

new OpenLayers.Control.PanZoomBar()],

numZoomLevels:20}); // Set up base map

This map constructor requires an HTML Element, or the ID of an HTML element in which the

map will be placed to be passed as an argument. The following lines create the layer and add it