Time for action – creating a Bing Maps layer

Bing Maps tiles can be viewed using the official Bing Maps API, but they can also be used through an API that gives direct access to their tiles. This is what we will see now:

Go to the Microsoft Mapping API register website at http://www.bingmapsportal.com to get an official key.
Let's set up the source object now. We need to not only specify the style property but also the key. Contrary to the previous examples, a tile access control is done and works through an account associated with a key to use in your code:
```
  var sourceBingMaps = new ol.source.BingMaps({ 
    key: 'AibU6zHqoTPYDuNRtHPMJq557poKb9AVTIJ0NWWnNZf8LfoRRwoigHTQ0Frrsr5m',
    imagerySet: 'Road',
  });
```

Now, create the first ol.layer.Tile layer:

  var bingMapsRoad = new ol.layer.Tile({ 
    source: sourceBingMaps
  });

Now, add another layer using the other type of image 'Aerial':

  var bingMapsAerial = new ol.layer.Tile({ 
    source: new ol.source.BingMaps({ 
      key: 'AibU6zHqoTPYDuNRtHPMJq557poKb9AVTIJ0NWWnNZf8LfoRRwoigHTQ0Frrsr5m', 
    style: 'Aerial', 
    }) 
  });

Let's create the map and add the two layers and the view directly:

  var map = new ol.Map({ 
    layers: [bingMapsRoad, bingMapsAerial], 
    target: 'map', 
    view: new ol.View({ 
    center: ol.proj.transform([6.562783, 46.517814], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 13 
    })
  });

You should see something like the following image:
Note
To make the example work, it's required to put your file on a web server. It can be Apache, but with Python, you can simply do it in the command line in your demo file root directory:
python -mSimpleHTTPServer
Next, open your browser to http://localhost:8000/sandbox/your_file_name.html.
Another way can be to use the node index.js command (if you downloaded the samples code) and open http://localhost:3000/sandbox/your_file_name.html.
Also, you don't have the obligation to create an API key when you are on your local machine. The one used in this book works only when using localhost or the official book website at http://openlayersbook.github.io.

What just happened?

We just made a map using the Microsoft Bing Map tiles' API. It works similar to the OpenStreetMap tiles layers but required to be authenticated. We can communicate with Microsoft tiles API server and use different properties. Let's go over the properties, as there are some that the other third-party sources do not provide.

Bing Maps source class properties

Bing Maps source helps you consume Bing tiles representing road and imagery in your layer.

The constructor is ol.source.BingMaps and the following table is for the options:

Name	Type	Description
`culture`	`string` \| `undefined`	It is the language and the localization you want to display for your labels. The supported Culture Codes for each style are listed in the official Microsoft documentation at http://msdn.microsoft.com/en-us/library/hh441729.aspx.
`kety`	`string`	This is the Bing Maps API key. Get yours at http://bingmapsportal.com.
`imagterySet`	`string`	This is a type of imagery. It can be `Road`, `Aerial`, and `AerialWithLabels`. Some others are also available for local parts of the world, such as `collinsBart` or `ordnanceSurvey`.
`tileLoadFunction`	`ol.TileLoadFunctionType` \| `undefined`	This is an optional function to load a tile given a URL.

The TileJSON layer

The TileJSON format was invented by MapBox, another company providing OpenStreetMap related services. It relies on JSON notation.

According to the specification, TileJSON is an open standard for representing map metadata. Its main goal is to reference the name, the attribution, the server URL, the minimum and max zoom, the center, the bounds, and the scheme of the tile (for OSM, numbering go top to bottom but other tiles' systems start numbering upwards). You can see all available parameters looking at the official specification at https://github.com/mapbox/tilejson-spec.

As it is not the mainstream way to get tiles, although it's a smart way, we will not review it through an example but directly advise you to go the official demo available at http://openlayers.org/en/v3.0.0/examples/tilejson.html and look into the code.

TileJSON source class properties

TileJSON source permits you to display in a tiled layer custom tile. You can declare their source using the following constructor:

ol.source.TileJSON

You can also review the available properties, particularly the required URL parameter on the official API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.TileJSON.html.

WMTS layers

The WMTS layer is based on the WMTS standards. The specification defines it as The Web Map Tile Service described in this standard builds on earlier efforts to develop scalable, high-performance services for web-based distribution of cartographic maps.

A WMTS-enabled server application can serve map tiles of spatially referenced data using tile images with predefined content, extent, and resolution.

This type of layer is quite different from most of the previous tiled layers we've seen. WMTS layers are more customizable. You can make a request to get tiles in custom projection, you can also choose your grid without caring about the implicit rules, that each tile when you zoom it will give you four tiles, as illustrated with the following figure:

It's really not the most common tiles layer, but you can see it as the most efficient tile system for custom requirements. You can better choose your level of tiling or you can also use custom tile size. For example, for mobile, a smaller tile with 64 pixels for its side can be used instead of the standard 256 pixels size. We recommend, if you are curious, to see the official examples at http://openlayers.org/en/v3.0.0/examples/ using the WMTS keyword. We will not be covering the details here. You can learn more about the standard itself by going to the official dedicated web pages at http://www.opengeospatial.org/standards/wmts.

You also need to understand that one of its main goals was to fill the issue for fast rendering contrary to OGC WMS standard as it can be cached.

WMTS source class properties

WMTS sources are complex to declare. They require more parameters than other sources because of their flexibility. For example, the ability to customize for each tile levels grid means also as a drawback, complexity.

The constructor is ol.source.WMTS. To see its options, we recommend that you visit the official API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.WMTS.html.

The DebugTileSource source

The DebugTileSource source is only a way to debug tiles rendering in OpenLayers 3. It doesn't use the tile numbering from the source but the internal that OpenLayers use. We just mentioned it to be exhaustive. You use it into a ol.layer.Tile class. You can look at the demo to learn more about it at http://openlayers.org/en/v3.0.0/examples/canvas-tiles.html. It can really help you to debug special grid, for example, in WMTS.

TileDebugTile source class properties

The TileDebugTile source enables you to display numbered grids to show how tiles are regrouped in the OpenLayers Canvas rendering. Canvas is a renderer to display a map in your browser.

The constructor is ol.source.TileDebug and for the options, you should visit the official API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.TileDebug.html.

OpenLayers tiled WMS

A WMS (Web Map Service) is a standard protocol for serving georeferenced map images over the Internet that are generated by a map server. You can watch the full reference at the official OGC (Open Geospatial Consortium) website, the organization managing this standard (http://www.opengeospatial.org/standards/wms).

The two versions of WMS available are 1.1.1 and 1.3.0.

WMS is dynamic: you can generate on the fly images.

So, why do I see a reference to a tiled WMS in OpenLayers 3?

It's just a way to lower charge on server-side—when you are generating small images, the process is faster, the memory cost does not really change as the number of requests increase, but you gain the ability to cache the tiles.

But wait, so why can't we use ImageWMS with WMS if we can have the advantage of both tiled (caching) and untiled system (freshness)?

We will not directly answer this right now, but will give you the hint in the section dedicated to ImageWMS.

You can refer to the official example to see a simple example as a reference at http://openlayers.org/en/v3.0.0//examples/wms-tiled.html.

Note

To find out what projections a WMS service supports, you can make a getCapabilities request to the server. To make this request, specify the request, service, and version properties in the URL. For example, http://suite.opengeo.org/geoserver/wms?service=WMS&version=1.1.1&request=GetCapabilities.

You also have to be cautious. Here, we use the Version 1.1.1 version call but the specification supports two versions: 1.1.1 and 1.3.0. It's recommended to use 1.3.0 nowadays, but you can meet external WMS web services using only 1.1.1. Just use the VERSION parameter in the params options.

Tiled WMS source class properties

Tiled WMS source helps you set tiled WMS calls for your layer. The constructor is ol.source.TiledWMS and the options are listed in the following table:

Name	Type	Description
`attributions`	`Array.<ol.Attribution>` \| `undefined`	This property sets an attributions array for the source.
`params`	`Object.<string, *>`	This property contains an object of WMS request parameters. At least, a `param` layer is required. Styles are set by default. The version is 1.3.0 by default. The width, height, BBOX, and CRS (SRS for WMS, version less than 1.3.0) will be set dynamically.
`crossOrigin`	`null` \| `string` \| `undefined`	This property sets the `crossOrigin` setting for image requests.
`extent`	`ol.Extent \| undefined`	This property sets the extent of your layer source.
`tileGrid`	`ol.tilegrid.TileGrid` \| `undefined`	This property enables you to declare a tile grid, a custom grid for your source layer.
`maxZoom`	`number` \| `undefined`	This property sets the maximum zoom level.
`projection`	`ol.ProjectionLike`	This property sets the projection.
`url`	`string` \| `undefined`	This property sets WMS service URL.
`urls`	`Array.<string>` \| `undefined`	This property sets an array of WMS service URLs. Use this instead of URL when the WMS supports multiple URLs for `GetMap` requests.

OpenLayers Zoomify

Contrary to most components that are useful only in a map context, this component helps you to display any arbitrary images. It's really useful when you need to display a large image and want performances associated with tiles displayed and the usual interactions of mapping such as panning and zooming.

Some use cases can be game maps, discovery of scanned historical documents such as birth certificates for genealogy, or the old maps with no referencing, meaning that they do not overlay well with existing imagery and geographical data.

To make the ol.source.Zoomify component work, you will need to preprocess a large image to create tiles.

Previous Chapter

Time for action – creating a Stamen layer

Next Chapter

Time for action – creating tiles and adding Zoomify layer