Though using constructor without options can be enough, you can also use other properties. The default constructor code uses the publicly available OSM tiles, but it is easy to point it at your own tiles. To do so, create the layer in this format:

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM({
    url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
  })
});

To use this, you will have to replace http://{a-c}.tile.opencyclemap.org/cycle/ with the server hosting your OSM tiles. {z}, {x}, and {y} are variables that OpenLayers will replace with the appropriate values to reference specific map tiles.

The {a-c} parameters mean to say you can access tiles using these URLs:

http://a.tile.opencyclemap.org/cycle,

http://b.tile.opencyclemap.org/cycle,

http://c.tile.opencyclemap.org/cycle

This behavior comes from restrictions from your browser: you can't simultaneously ask images from a same domain. It can only request a certain number of resources from the same domain simultaneously, usually 2 or 4. Using subdomains is a way to bypass this limit and speed up the map displaying.

If you have different sources for tiling, it is not only to provide different URLs to access different map images. The way tiling is done depends on established standards.

For example, Stamen layers, OpenStreetMap layers, and MapQuest layers are using the same tiling convention, whereas WMTS (Web Map Tile Service) can adopt other patterns to display tiles. These patterns are set with the ol.tilegrid.TileGrid object that describe for each arbitrary zoomlevel how the tiles are split.

The rules are the following. In reality, the Earth is not a sphere, but in this case, our planet is assimilated to a sphere because we are using Spherical Mercator projection (mainly known as EPSG 900913 or EPSG 3857). Do not worry about projections at the moment, we will review them in a later chapter as it can be a difficult topic to understand.

The entire sphere is projected on a single square at the 0 level. Then, for each zoom, you increase a level and for each tile at the previous zoom, we get 4 tiles at this one.

With the preceding diagram, you will know how to access a tile covering East Europe such as Poland at the 3 level. The URL always looks like URL_TO_TILES/level_z/x_in_grid_for_level/y_for_grid_in_level.png. So, for Poland that has a zoom level 3, x equal to 4, an y to 2, the URL could be http://b.tile.openstreetmap.org/3/4/2.png or http://c.tile.openstreetmap.org/3/4/2.png to get the right tile.

This source enables your layer to consume OpenStreetMap data and customize OpenStreetMap specific properties.

The constructor is ol.source.OSM and its properties can use following options:

The MapQuest source class refers directly to the MapQuest tiles server URL.

The constructor is ol.source.MapQuest.

You are only required to use the source constructor included in an ol.layer.Tile object to add the layer. There are only two options' properties. The first one is the layer. It can take values such as osm (roads), sat (satellite), and hyb (hybride) depending on the tiles you want to display. The other property tileLoadFunction will not be covered here: it's not a common requirement for beginners and we already listed it in the ol.source.OSM. At least, you just need to know that it helps change call to tiles with rules defined in your code.