3.1. Web Map Service Layers¶

When you add a layer to your map, the layer is typically responsible for fetching the data to be displayed. The data requested can be either raster or vector data. You can think of raster data as information rendered as an image on the server side. Vector data is delivered as structured information from the server and may be rendered for display on the client (your browser).

There are many different types of services that provide raster map data. This section deals with providers that conform with the OGC Web Map Service (WMS) specification.

3.1.1. Creating a Layer¶

We’ll start with a fully working map example and modify the layers to get an understanding of how they work.

Let’s take a look at the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>My Map</title>
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
        <style>
            #map-id {
                width: 512px;
                height: 256px;
            }
        </style>
        <script src="openlayers/lib/OpenLayers.js"></script>
    </head>
    <body>
        <h1>My Map</h1>
        <div id="map-id"></div>
        <script>
            var map = new OpenLayers.Map("map-id");
            var imagery = new OpenLayers.Layer.WMS(
                "Global Imagery",
                "http://maps.opengeo.org/geowebcache/service/wms",
                {layers: "bluemarble"}
            );
            map.addLayer(imagery);
            map.zoomToMaxExtent();
        </script>
    </body>
</html>

Tasks

If you haven’t already done so, save the text above as map.html in the root of your workshop directory.
Open the page in your browser to confirm things work: http://localhost:8082/ol_workshop/map.html

Important

If you want to keep track of your advances, we invite you to create different files for every exercise, you can call this one for example map-wms.html.

3.1.2. The OpenLayers.Layer.WMS Constructor¶

The OpenLayers.Layer.WMS constructor requires 3 arguments and an optional fourth. See the API reference for a complete description of these arguments.

var imagery = new OpenLayers.Layer.WMS(
    "Global Imagery",
    "http://maps.opengeo.org/geowebcache/service/wms",
    {layers: "bluemarble"}
);

The first argument, "Global Imagery", is a string name for the layer. This is only used by components that display layer names (like a layer switcher) and can be anything of your choosing.

The second argument, "http://maps.opengeo.org/geowebcache/service/wms", is the string URL for a Web Map Service.

The third argument, {layers: "bluemarble"} is an object literal with properties that become parameters in our WMS request. In this case, we’re requesting images rendered from a single layer identified by the name "bluemarble".

Tasks

This same WMS offers a layer named "openstreetmap". Change the value of the layers param from "bluemarble" to "openstreetmap".
If you just change the name of the layer and refresh your map you will meet a friend of any OpenLayers developer: our loved pink tiles. With Chrome, you can right click on any of them and go to Open Image in New Tab to get an idea of the problem.

When things go weird, we see the pink tiles.
In addition to the layers parameter, a request for WMS imagery allows for you to specify the image format. The default for this layer is "image/jpeg". Try adding a second property in the params object named format. Set the value to another image type (e.g. "image/png").

Your revised OpenLayers.Layer.WMS Constructor should look like:
```
var imagery = new OpenLayers.Layer.WMS(
    "Global Imagery",
    "http://maps.opengeo.org/geowebcache/service/wms",
    {layers: "openstreetmap", format: "image/png"}
);
```
Save your changes and reload the map: http://localhost:8082/ol_workshop/map.html

A map displaying the "openstreetmap" layer as "image/png".

Having worked with dynamically rendered data from a Web Map Service, let’s move on to learn about cached tile services.