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.
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
map.html
in the
root of your workshop directory.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
.
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.
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
Having worked with dynamically rendered data from a Web Map Service, let’s move on to learn about cached tile services.