OpenLayer/OpenStreetMap Hike & Bike Map

Question

В моем SPA я хочу включить openstreetmap через OpenLayer для каждого JavaScript. Это прекрасно работает. Но как я могу изменить тип карты на Hike & Bike Map, как здесь: http://hikebikemap.de/?

В настоящее время я использую следующий код:

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); 

и получил это:

, но я хочу этот вид карты:

THx!

Answer 1

Если вы посмотрите на источнике Связанных страниц вы увидите, что они добавив несколько слоев WMS кроме 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 ]); 

Если вы хотите больше, чем один слой, чтобы быть доступным для пользователя вам понадобится OpenLayers.Control.LayerSwitcher.

Обратите внимание, что подтипы (OSM.Mapnik, OSM.CycleMap, OSM.Osmarender) не являются частью стандартного распределения OpenLayers, глядя на one of the source files кажется, что они просто удобные классы, определяющие различные источники данных плитки, они не предоставляют какие-либо специальные как таковые, например:

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" 
});