CODEWITHSUNDEEP
leaflet
Alex Szekely
Alex Szekely

Reputation: 1

How to use Leaflet js with OpenRailwayMap

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
}

Upvotes: 0

Views: 70

Answers (2)

Alex Szekely
Alex Szekely

Reputation: 1

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.

Upvotes: 0

peeebeee
peeebeee

Reputation: 2618

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
}

Upvotes: 0

Related Questions