OpenLayer/OpenStreetMap Hike&Bike Map

Question

In my SPA i want to inlcude openstreetmap via OpenLayer per JavaScript. This works fine. But how can i change the map type to the Hike&Bike Map like here: http://hikebikemap.de/ ?

currently i am using the following code:

var zoom            = 11;
var fromProjection  = new OpenLayers.Projection('EPSG:4326');
var toProjection    = new OpenLayers.Projection('EPSG:900913');
var markers         = new OpenLayers.Layer.Markers( 'Markers' );
var map             = new OpenLayers.Map();
var mapnik          = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.addLayer(markers);

var position  = new OpenLayers.LonLat(lng, lat).transform( fromProjection, toProjection);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
map.render(element);

and got this:

but i want this kind of map:

thx!

Answer 1

If you have a look at the linked page's source you'll see that they're adding several WMS layers apart from OSM:

var osm = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var cycle = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
var osma = new OpenLayers.Layer.OSM.Osmarender("Osmarender");

map.addLayers([ osm, cycle, osma ]);

If you want more than one layer to be available to the user you'll need a OpenLayers.Control.LayerSwitcher.

Note that the sub-types (OSM.Mapnik, OSM.CycleMap, OSM.Osmarender) are not part of standard OpenLayers distribution, looking at one of the source files seems like they're simply convenience classes that define different tile data source, they don't provide any special functionality per se, for example:

OpenLayers.Layer.OSM.CycleMap = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        var url = [
            "http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
            "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
            "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },
    CLASS_NAME: "OpenLayers.Layer.OSM.CycleMap"
});