I created a map in vuejs using leafletjs and Openstreetmap (using the official website: https://leafletjs.com/),
more code here......
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a target="_blank"
href="http://osm.org/copyright">OpenStreetMap</a>'
></l-tile-layer>
But now I want to show both local original language and English on my map like we show in (see image below)
https://liveuamap.com/
I googled and checked a lot of tutorials but couldn't find what I was looking for. How can I achieve this for my map using vuejs. Secondly, I also need to turn off English, so if the user only wants to see the local language or wants to see English, they can choose to do that. Any help is greatly appreciated. Thanks in advance!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You will need to change to a vector tile provider that offers different language options (e.g. MapTiler), or if you want to use Leaflet and raster tiles - use a tile provider that offers labels in English. For example. The MapTiles API provides local or English labels (but not a combination of both) with global raster tiles.
For example this one (you need an API key) will show the English label:
EDIT: Found a map layer with mixed English/local labels: Thunderforest map tiles display both English and local labels, similar to your liveuamap example. You also need an API key.
Code example:
About switching: For raster tiles, this is only possible via the map layer switcher (called layer control in Leaflet, see here: https://leafletjs.com/SlavaUkraini/examples/ layers-control/ ). For example. One layer has standard OpenStreetMap tiles and another layer has, for example, MapTiles API English tiles and Thunderforest tiles.