Time For action – playing with various sources and layers together

To achieve your task, combine our knowledge and just follow these instructions:

Let's make a map mashup that consists of a different tiles layer, a WMS layer. We will also play with the visibility to display a basic layer switcher.

First, we need to reuse the usual template that call OpenLayers 3 CSS and JavaScript for our code and put it on a local server:

<!doctype html>
<html lang="en">
  <head>
    <title>Playing with various sources and layers </title>
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
    <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="../assets/ol3/ol.js" ></script>
    <script>
    </script>
  </body>
</html>

Now, we can begin to add our layers between the empty <script> tag. We add together two Bing Maps layers and add to them a name using set . We will reuse this parameter later:

var bingMapsAerial = new ol.layer.Tile({
  source: new ol.source.BingMaps({
    key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
    imagerySet: 'Aerial'
  })
});
bingMapsAerial.set(
'name', 'Bings Maps Aerial'
);
var bingMapsRoad = new ol.layer.Layer({
  source: new ol.source.BingMaps({
    key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
    imagerySet: 'Road',
    culture: 'fr-FR'
  })
});
bingMapsRoad.set(
'name', 'Bings Maps Road'
);

Now, let's add a MapQuest layer. You just need to use the constructor without an option. We add a layer name using a setter:

var mapQuestAerial = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});
mapQuestAerial.set('name', 'MapQuest Open Aerial');

We'll create our WMS layer now and specify that we want the topp:states layer from the URL http://demo.boundlessgeo.com/geoserver/wms and various label layers back from the WMS server. We'll also set the opacity to 0.6, that is 60 percent opaque. The projection is not specified: it comes from the view and we know that the remote layer service available has the right projection (using getCapabilities). Go ahead and create the WMS layer and add again a name:
```
var simpleWMS = new ol.layer.Image({
  opacity: 0.6,
  source: new ol.source.ImageWMS({
    url: 'http://demo.boundlessgeo.com/geoserver/wms',
    params: {
      'LAYERS': 'topp:states'
    },
    extent: [-13884991, -7455066, 2870341, 6338219]
  })
});
simpleWMS.set('name', 'USA layer from Geoserver WMS demo');
```
Now, let's create an array of all the layers. You will soon discover why we do it like this:
```
var layers = [bingMapsAerial, bingMapsRoad, mapQuestAerial, simpleWMS];
```

Create the map object, add into the layers object and the view too.

var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([-90, 40], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3
  })
});

Now, we just need to add the layers to the map.

Now, we'll create a function with a special purpose: creating an HTML label tag and also and HTML input checkbox. It will have three parameters: one for the name, one to create an id for the HTML input, and the planned place where we want to create this checkbox:

function generate_checkbox(id_checkbox, label_name, html_element) {
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.id = id_checkbox;
  var label = document.createElement('label');
  label.htmlFor = id_checkbox;
  label.appendChild(document.createTextNode(label_name));
  html_element.appendChild(checkbox);
  html_element.appendChild(label);
}

Finally, we just need to loop using the layers object from the end of the array to the beginning in order to see; first, our checkbox for the top layer and after the others. We will use two magic functions ol.dom.Input and bindTo but don't bother about it at the moment:

for (var i = layers.length - 1; i >= 0; i--) {
  var id = layers[i].get('id');
  var name = layers[i].get('name');
  generate_checkbox('layer_id_' + i, name, document.body);
  var visible = new ol.dom.Input(document.getElementById('layer_id_' + i));
  visible.bindTo('checked', layers[i], 'visible');
};

Open up your map now and pan on USA. You will see an image, as seen in the following section, and will be able to play with the layer switcher.

What just happened?

We just created a map using different tiles' layers with a WMS overlay. We also create, as a bonus, a simple but dynamic layer switcher. All the layers use the map's projection, EPSG:3857, and line up with the lower aerial Bing Maps.

Note

We choose, for learning purposes, to only use the OpenLayers library code to manage layers display but an external component to the library is also available for this goal at https://github.com/walkermatt/ol3-layerswitcher. Try it on your own and enjoy! It will be a good opportunity to learn more about ol.layer.Group, we didn't really review until now.

After revising, it's time to see another source to display the image: the ol.source.MapGuide source.

OpenLayers image for MapGuide

We didn't review this server, although an open source version of this server is available at http://mapguide.osgeo.org, when we saw the various servers available to provide images for the OpenLayers 3 library. We chose to not cover it in detail, because this solution is not mainstream and beginners will not be able to dive deeper in to this complex solution.

You just need to understand that this image source is unusual and is mostly used by people coming from the CAD (Computer-aided design) world because this software was released as open source by AutoDesk, the leading company for 2D/3D drawing software.

For an example, you should go to the OpenLayers official sample, http://openlayers.org/en/v3.0.0/examples/mapguide-untiled.html.
Contrary to cases where we review an example, we will also recommend that you go to the official link http://openlayers.org/en/v3.0.0/apidoc/ol.source.MapQuest.html for the API to discover more about how to achieve specific configuration if required.

Inserting raw images using ImageStatic class

After this short review, it's time to see ol.source.ImageStatic, a class that can be seen as the equivalent for the nonprojected image of TileWMS for ImageWMS. It can be also seen as a non-Zoomify source. We will see how to use it within an untiled layer.

Previous Chapter

Using Spherical Mercator raster data with other layers

Next Chapter

Time For action – applying Zoomify sample knowledge to a single raw image

Table of Contents for OpenLayers 3 : Beginner's Guide

Time For action – playing with various sources and layers together

What just happened?

Note

OpenLayers image for MapGuide

Inserting raw images using ImageStatic class

Table of Contents for
OpenLayers 3 : Beginner's Guide