How to use Leaflet js with OpenRailwayMap - Stack Overflow

I want to use Leaflet with OpenRailwayMap tiles. It is possible? If yes, how?

/

I have wanted to change the tile layer in my initialization, but nothing works

function initMap(): L.Map {
  map = L.map(mapContainerRef.value).setView(center, zoom)
  L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
  }).addTo(map)
  map?.on('zoomend', onZoomed)
  return map
}

I want to use Leaflet with OpenRailwayMap tiles. It is possible? If yes, how?

https://www.openrailwaymap.org/

I have wanted to change the tile layer in my initialization, but nothing works

function initMap(): L.Map {
  map = L.map(mapContainerRef.value).setView(center, zoom)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
  }).addTo(map)
  map?.on('zoomend', onZoomed)
  return map
}

• leaflet

Share Improve this question Follow edited Jan 23 at 21:55 shotor 1,0621010 silver badges2828 bronze badges asked Jan 22 at 22:43 Alex SzekelyAlex Szekely 111 bronze badge 3

• what happens if you change openstreetmap.org to openrailwaymap.org? – shotor Commented Jan 23 at 1:28
• Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Bot Commented Jan 23 at 5:51
• @shotor There is no map on the background. The response: (failed)net::ERR_NAME_NOT_RESOLVED – Alex Szekely Commented Jan 23 at 15:24

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Following the instructions at https://wiki.openstreetmap.org/wiki/OpenRailwayMap/API#Usage_in_Leaflet your code should look like this, substituting the OpenRailwayMap tile URL and attribution in place of the OSM one.

  function initMap(): L.Map {
  map = L.map(mapContainerRef.value).setView(center, zoom)
  L.tileLayer('http://{a-c}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
    attribution: '<a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> and OpenStreetMap''
  }).addTo(map)
  map?.on('zoomend', onZoomed)
  return map
}

Here is solved:

map = L.map(ref.value).setView(config.center, config.zoom)
map.addLayer(
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
)
map.addLayer(
    L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png')

If you want, you can use attribution option like above.