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?

enter image description here

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

see [this related question](https://help.openstreetmap.org/questions/6188/mapping-layer-africa-in-english) on help.osm.org. — tyr, Sep 03 '13 at 12:36
All you need is a right tile server, you can choose one from : - http://leaflet-extras.github.io/leaflet-providers/preview/ — Shubham Upadhyay, Apr 13 '21 at 10:23
https://www.osmap.us/ appears to use `'https://osmap.{s}.tile.mapcdn.net/en/map/v1/{z}/{x}/{y}.png'` — Jason S, Jun 09 '21 at 04:09

score 22 · Accepted Answer · edited Apr 27 '18 at 06:52

22

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.

edited Apr 27 '18 at 06:52

DineshKP

364
2
12

answered Sep 03 '13 at 14:44

scai

20,297
4
56
72

Thanks, I will check these out. I'm using the tile server for a prototype app, and will be switching to a different paid server or most likely roll our own soon. – JohnP Sep 04 '13 at 05:41
5

I went with open mapquest. For anyone with the same question, here's a handy list of tile servers you can use - https://gist.github.com/mourner/1804938 – JohnP Sep 04 '13 at 09:46
Thanks! Unfortunately the corresponding project is dead. I updated my answer. – scai Mar 20 '17 at 07:45

score 9 · Answer 2 · answered Dec 22 '20 at 09:28

9

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

answered Dec 22 '20 at 09:28

Rania Fatnassi

99
1
1

1

This example does not work when zooming in. It reverts to local. – SeaDude Oct 19 '21 at 16:07

score 5 · Answer 3 · edited Mar 21 '22 at 10:20

5

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', {
  ...
})
...

edited Mar 21 '22 at 10:20

Ergis

1,105
1
7
18

answered Oct 05 '21 at 04:56

Shaheel_Azhar

73
2
7

in case someone would like to do the same, but for French: L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { maxZoom: 100, minZoom: 1, attribution : '© OpenStreetMap contributors', noWrap : true }); Also a good link to check for tiles url: https://wiki.openstreetmap.org/wiki/Tile_servers – manfall19 Nov 04 '21 at 13:08

Setting map language to English in Openstreetmap with LeafletJS

3 Answers3

Linked