Time for action – creating a Stamen layer

Follow these steps to create a Stamen layer:

We can access the Stamen layer from the outside of the box. This will be pretty simple. First, we just need to create a layer object:
```
  var stamenLayer = new ol.layer.Tile({
    source: new ol.source.Stamen({
      layer: 'toner'
    })
  });
```

Then, we just construct the map directly, adding the view and the layer already configured at startup:

  var map = new ol.Map({ 
    layers: [stamenLayer],
    target: 'map',
    view: new ol.View({
     center: ol.proj.transform([2.35239, 48.858391], 'EPSG:4326', 'EPSG:3857'),
      zoom: 12
    })
  });

You should see something like the following screenshot:

What just happened?

The map we've just created shows a black and white Stamen layer. You can look at other available layers for Stamen, the list is available just after the Stamen Layers' properties below.

Stamen source class properties

Stamen source class refers to the beautiful tiles from Stamen. You can declare their source using the following content.

The constructor is ol.source.Stamen.

We will not review all properties, as most of them are configured by default. You can refer to the API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.Stamen.html.

The most important property to remember is the layer where you set the name of the available layer you want with:

new ol.source.Stamen({
  layer: 'toner'
})

You will find all the available layers names derived from the three Stamen layers in the following table, their image type, and their default state. Be careful, particularly when you are using the .jpg images and the opaque property option together, the .jpg image format is unable to work with transparency. Refer to the following table for further information:

Name	Extension	opaque
terrain	`.jpg`	true
terrain-background	`.jpg`	true
terrain-labels	`.png`	false
terrain-lines	`.png`	false
toner-background	`.png`	true
toner	`.png`	true
toner-hybrid	`.png`	false
toner-labels	`.png`	false
toner-lines	`.png`	false
toner-lite	`.png`	true
watercolor	`.jpg`	true

The Bing Maps layer

Microsoft provides an interface to their mapping services as well. Their mapping service previously was referred to as Virtual Earth, but they have since rebranded it as Bing Maps. The official Microsoft documentation can be found at http://msdn.microsoft.com/en-us/library/dd877180.aspx.

Previous Chapter

Tiled images' layers and their sources

Next Chapter

Time for action – creating a Bing Maps layer

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – creating a Stamen layer

What just happened?

Stamen source class properties

The Bing Maps layer

Table of Contents for
OpenLayers 3 : Beginner's Guide