Setting map language to English in Openstreetmap with LeafletJS

Question

I'm using LeafletJS to add a map component to my app. Everything is fine and dandy except for the localization of the map. Some country names are shown in the local language (I'm assuming).

Is there a way to show the country names in English?

This is the current code that I use

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                noWrap      : true 
}).addTo(map);

Answer 1

The standard tile server of OSM tries to display labels in the local language whenever such data is available (local meaning the language of the country currently displayed, not your local language). The tiles, served by the tile server, already contain the labels, so you cannot remove them afterwards. But you can:

• render them on your own (which requires suitable hardware) with an adjusted stylesheet, or
• use tiles without labels and create a label overlay
• try to see if there is a different tile server which only displays english labels. open mapquest for example has tiles based on OSM data where all labels are in english.
• Map internationalization in the OSM wiki has some more examples

And always remember to comply with the tile usage policy of the tile server you choose.

Answer 2

For German language

You can use this german tile server: https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png.

L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
  ...
})
...

Answer 3

All you need to do is to work with basemaps instead of openstreetmap

const mainLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', {
  minZoom: 3,
  maxZoom: 17,
  attribution: '&copy; <a href="https://carto.com/">carto.com</a> contributors'
});
mainLayer.addTo(this.map);