Setting language option in Leaflet.Routing.Control

Question

UPDATED:

I am trying to translate the leaflet routing component with language:'sp' but it does not work for me.

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('&#8593;&#8595;', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,      
}).addTo(map)

}

With " language:'sp' " the form is traslated but not the instruccions. I know I have to use formatter but I tried to put it in routing.control, routing.plan... (and more places only to test it) and it does not work (the map is not displayed)

Add the language option as parameter of the mapbox function, when creating the "router" : ... router: L.Routing.mapbox(config.features.routing.key, {language: 'sp'}), — Didier68, Oct 19 '18 at 13:17

score 2 · Answer 1 · answered Apr 18 '18 at 10:25

The response from @IvanSanchez is almost correct: Control does indeed not have a language option, but several other classes have (not sure this is even properly documented, sorry).

Having said that, as a default, the Control class passes on any option you give it when it instantiates its child components, so passing language as an option to Control will also pass it to the default formatter, the router, etc. The exception is when you provide child components that you instantiate yourself, like the Plan in your example: for that case, you need to explicitly provide the options (like you already do).

So I would assume this code should fix the issue:

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('&#8593;&#8595;', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,
  language: 'sp'
}).addTo(map)

Thanks Liedman. I added " language: 'sp' " ( inside routing.control ) like you but nothing. Instruccions are in English — ABT, Apr 18 '18 at 12:56

Didier68 · Answer 2 · 2018-10-03T16:04:43.383

I'm sorry to dig up this topic, but I can not translate the instructions in french...

I set the language option 'fr' directly in L.Routing.control and also in the formatter...

I try to debug the lines where the localization is done, and I see my problem at line 16353 of leaflet-routing-machine.js :

    formatInstruction: function(instr, i) {
        if (instr.text === undefined) {
            return this.capitalize(L.Util.template(this._getInstructionTemplate(instr, i),
                .....
                })));
        } else {
            return instr.text;
        }

where instr.text is already initialized...

If I reset instr.text to "undefined" at debug time, the instruction is well translated...

Do you have any idea of my problem? My code is below:

$script(['https://unpkg.com/leaflet/dist/leaflet-src.js'], () =>{
$script(['https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js'], () => {

this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
maxZoom: 18
}).addTo(this.map);      


this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
 attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
 maxZoom: 18
}).addTo(this.map);      

let control1 = L.Routing.control(
 {
  router: L.routing.mapbox(this.key.MapboxKey),   
    
  language: 'fr',
  formatter:  new L.Routing.Formatter({
   language: 'fr' 
  }),

  waypoints: [
   L.latLng(47.928927, 7.538860),
   L.latLng(48.044444, 7.299279),
   L.latLng(47.857503, 6.821690),
   L.latLng(47.506390, 6.996181),
   L.latLng(47.586881, 7.25652)
  ],
  routeWhileDragging: true
 })
 .on('routingerror', function(e) {
  try {
   this.map.getCenter();
  } catch (e) {
   this.map.fitBounds(L.latLngBounds(control1.getWaypoints().map(function(wp) { return wp.latLng; })));
  }

  handleError(e);
 })
 .addTo(this.map);
L.Routing.errorControl(control1).addTo(this.map);

====================================================================

As I found the solution in the meantime, I give it away because it seems not to be documented :

I have to add the language option as parameter of the mapbox function, when creating the "router" :

L.routing.mapbox(this.key.MapboxKey, {language: 'fr'}),

it worked for me when adding 'pt-BR', thanks – Daniel Bentes Jun 07 '22 at 13:59 — Daniel Bentes, Jun 07 '22 at 13:59

score 0 · Answer 3 · answered Apr 17 '18 at 10:38

This is a case of RTFM.

If you look a bit closer at the API documentation for Leaflet Routing Machine, you'll notice that L.Routing.Control does not have a language option, and that the language option only applies to instances of L.Routing.Formatter, and that a L.Routing.Control can take a formatter option which can hold an instance of L.Routing.Formatter. So putting everything together...

L.Routing.control({
  router: L.Routing.mapbox(config.features.routing.key),     
  formatter: L.Routing.formatter({
    language: 'sp'
    units: config.features.routing.units,
  }),
  showAlternatives: true,
  autoRoute: true,
  // ... etc
},

(P.S.: "prop" is reactjs slang, and that word does not apply here)

Setting language option in Leaflet.Routing.Control

3 Answers3