|Version 4 (modified by crschmidt, 4 years ago)|
Getting Started with OpenLayers
Creating Your First Map
The OpenLayers API has two concepts which are important to understand in order to build your first map: 'Map', and 'Layer'. An OpenLayers Map stores information about the default projection, extents, units, and so on of the map. Inside the map, data is displayed via 'Layer's. A Layer is a data source -- information about how OpenLayers should request data and display it.
Building an OpenLayers viewer requires crafting HTML in which your viewer will be seen. OpenLayers supports putting a map inside of any block level element -- this means that it can be used to put a map in almost any HTML element on your page.
In addition to a single block level element, it is also required to include a script tag which includes the OpenLayers library to the page.
Ex. 1: Creating your first HTML Page
Creating the Map Viewer
In order to create the viewer, you must first create a map. The OpenLayers.Map constructor requires one argument: This argument must either be an HTML Element, or the ID of an HTML element. This is the element in which the map will be placed.
Ex. 2: Map Constructor
The next step to creating a viewer is to add a layer to the Map. OpenLayers supports many different data sources, from WMS to Yahoo! Maps to WorldWind. In this example, the WMS layer is used. The WMS layer is an example provided by MetaCarta.
Ex. 3: Layer Constructor
The first parameter in this constructor is the URL of the WMS server. The second argument is an object containing the parameterss to be appended to the WMS request.
Finally, in order to display the map, you must set a center and zoom level. In order to zoom to fit the map into the window, you can use the zoomToMaxExtent function, which will zoom as close as possible while still fitting the full extents within the window.
Putting it All Together
The following code block puts all the pieces together to create an OpenLayers viewer.
Adding an Overlay WMS
WMS layers have the capability to be overlaid on top of other WMS layers in the same projection. There are several ways to mark a layer as an overlay, rather than a base layer. With WMS, the best way to do this is by setting the 'transparent' parameter to 'true'. The example here uses a political borders WMS to demonstrate overlaying a transparent WMS.
Ex. 5: How to add a transparent WMS overlay to your map.
Using the transparent: 'true' parameter sets two flags automatically:
- format parameter. The format option of the WMS layer is set to image/png if the browser supports transparent PNG images. (This is all browsers except for Internet Explorer 6.) In Internet Explorer 6, this will instead be set to image/gif.
- isBaseLayer option. The isBaseLayer option controls whether the layer can be displayed at the same time as other layers. This option defaults to false for the WMS layer, but setting transparent to true changes it to true by default.
Putting this code together with our earlier example, we get the following:
Ex. 6: How to add a transparent WMS overlay to your map.
One thing to note here is that we have used addLayers on the map object to add both layers at the same time. This allows us to save a line of code in this case, and may be useful in other cases when you need to add multiple layers to the map at the same time.