This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

How to use the Transport map in OpenLayers

I'm new to OpenStreetMap and OpenLayers and want my map to resemble the Transport Map on the OpenStreetMap website.

My init() function looks like this: function init() { map = new OpenLayers.Map("map"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection var position = new OpenLayers.LonLat(-1.83, 52.60).transform(fromProjection, toProjection); var zoom = 7; map.setCenter(position, zoom); }

My map currently looks like the Standard one. Does the OpenLayers.Layer.OSM() constructor take any parameters?

map openlayers transport

asked 07 Apr '13, 13:18

id94
11●1●1●2
accept rate: 0%

edited 08 Apr '13, 15:52

aseerel4c26 ♦
32.6k●18●248●554

2 Answers:

Try this

function init() {
        map = new OpenLayers.Map("map");
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
        var transportmap = new  OpenLayers.Layer.OSM.TransportMap("OpenTransportMap"); //defined here https://www.openstreetmap.org/openlayers/OpenStreetMap.js
        map.addLayer(transportmap);
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(-1.83, 52.60).transform(fromProjection, toProjection);
        var zoom = 7;
        map.setCenter(position, zoom);
    }

answered 08 Apr '13, 19:20

amritkarma
684●21●29●41
accept rate: 11%

I've figured it out. I used WireShark to watch what my browser was doing while using the Transport Map and I can see the following HTTP headers being sent:

GET /transport/16/35668/20346.png HTTP/1.1
Host: b.tile2.opencyclemap.org
...

Looks like it using a tile server hosted by opencyclemap.org.

answered 07 Apr '13, 18:52

id94
11●1●1●2
accept rate: 0%

Please make sure that you abide by the terms and conditions under which these tiles are offered!

(07 Apr '13, 21:18) Richard ♦

Thanks for the link to Thunderforest and the Ts & Cs. Doh! I've only just noticed the attribution at the bottom of the Transport map to Andy Allan and opencyclemap.org so perhaps my super-sleuthing was unnecessary!

(08 Apr '13, 09:56) id94