Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting map language to English in Openstreetmap with LeafletJS

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); 
like image 216
JohnP Avatar asked Sep 03 '13 10:09

JohnP


2 Answers

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.

like image 163
scai Avatar answered Sep 20 '22 14:09

scai


The simplest way to solve this problem is

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

replace above link with this

L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {                 attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',                 noWrap      : true  }).addTo(map); 
like image 37
Shaheel_Azhar Avatar answered Sep 19 '22 14:09

Shaheel_Azhar