Let's produce this recipe using the steps outlined as follows:

This is the first recipe so far in this book that has seen layer creation with such granularity. We've declared properties, such as custom URLs, and attributions, for the first time.

We'll gloss over the more familiar parts of this recipe, such as the HTML, CSS, and JavaScript, to create the map instance and layer switching with jQueryUI so that we can take a deeper look at the newer components of this recipe: the OpenStreetMap layers:

map.addLayer(new ol.layer.Tile({
  source: new ol.source.OSM({
    attributions: [
      new ol.Attribution({
        html: 'Tiles courtesy of ' +
              '<a href="http://hot.openstreetmap.org">' +
              'Humanitarian OpenStreetMap Team</a>'
      }),
      ol.source.OSM.ATTRIBUTION
    ],
    url: 'http://{a-c}.tile.openstreetmap.fr/hot/' +
         '{z}/{x}/{y}.png'
  }),
  title: 'Humanitarian OSM'
}));

As the three layers follow the same pattern, we'll thoroughly walk through the first layer instantiation only, then simply point out any noteworthy differences against the other two layers.

We create the new ol.layer.Tile instance within the addLayer method for convenience. Our tile layer source is an instance of the built-in OpenStreetMap source (ol.source.OSM), which we pass a configuration object into.

The first property of the configuration object that we customize is attributions. This property expects an array of many ol.Attribution instances. The list of attributions gives credit to the appropriate parties, and this means that we adhere to the terms of usage. The content that we put in here makes up the attributions map control content (placed bottom-right of the map as standard).

The ol.Attribution constructor just requires a string of HTML to be passed in via the html property. We've populated a string of HTML that covers our usage of the Humanitarian OpenStreetMap layer. Concatenation of the string has been used to break it up over multiple lines for readability.

The second item in the attributions array (ol.source.OSM.ATTRIBUTION) is an already prepared instance of ol.Attribution from OpenLayers that contains the following HTML: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'. This is what gets implicitly added whenever you use ol.source.OSM() without supplying any custom attributions yourself.

The url property contains a string, which has the endpoint for the HTTP tile requests for this layer. You'll notice some curly braces within the string. These are template placeholders, which will be replaced by meaningful values for the request by OpenLayers.

This tile service supports three sub subdomains, namely a, b, or c. The {a-c} attribute is replaced with a letter within the range at random. So, our tile requests could go out to a.tile.openstreetmap.org, b.tile.openstreetmap.org or c.tile.openstreetmap.org. The {x}, {y} and {z} attributes are also replaced by OpenLayers with the relevant grid coordinates to complete the request URL.

Using a template string, we can avoid having to pass in multiple URLs for differently named subdomains. However, if it's necessary for you to manually pass in multiple URLs, then you can alternatively use the urls property with an array of URL strings instead.

Finally, for the ol.layer.Tile options, we provide a custom title for this layer so that we can use it for display in the UI and also for some layer matching logic later on.

We go on to create another two OpenStreetMap based layers: MapQuest Open, and Transport Dark. These layers follow the same blueprint. Note that we set the visibility of these layers to false, as we only want to display one layer at a time.

Once all the layers are in place, we dynamically populate the list of layers in the HTML and add some logic to show or hide layers depending on their position in the list. We won't go into detail about how this works, as this has been properly discussed during earlier recipes.

The ol.source.OSM class is a subclass of ol.source.XYZ. This particular source type is for tile data with URLs in a set XYZ format that we saw defined in the string template. This structure follows the widely-used Google grid system. The ol.source.XYZ class provides some additional properties such as projection and methods, such as setUrl.

There are many more uniquely-designed tile services built on top of OpenStreetMap data, and this book simply can't demonstrate them all. The OpenStreetMap community is vibrant and creative, and I'm sure there will be lots more choice to come. I encourage you to take a look at the OpenStreetMap collection from http://www.thunderforest.com and the Stamen collection at http://maps.stamen.com, and then go expand your searches even further.

Big mapping companies, such as MapQuest, have embraced OpenStreetMap data and shown their support by openly providing great layers we can consume, like the one seen in this recipe. If you're interested to learn more about MapQuest, visit this informational link that provides some further insight: http://wiki.openstreetmap.org/wiki/MapQuest.