Customize leaflet routing error (options)

Question

I am using Leaflet-routing-machine,

I added the error control to my map like this :

L.Routing.errorControl(this.control).addTo(map);

for style I used this :

.leaflet-routing-error {
  width: 320px;
  background-color: rgb(238, 153, 164);
  padding-top: 4px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

this is what I got :

Ididn't find a lot of explanations about. Have anyone know how to customise this more, change language, hide/show... ?

Mohammed Housseyn Taleb Mohammed Housseyn Taleb · Accepted Answer · 2019-10-22T20:57:29

After reading this source code you can redefine the header and the fromat message function

L.Routing.errorControl(control, {
            header: 'Routing error',
            formatMessage(error) {
                if (error.status < 0) {
                    return 'Calculating the route caused an error. Technical description follows:  <code><pre>' +
                        error.message + '</pre></code';
                } else {
                    return 'The route could not be calculated. ' +
                        error.message;
                }
            }
        }).addTo(map);

I believe that in your control you can redefine this two options

also you may be able to use the leaflet element with classes leaflet-bar leaflet-routing-error and inject more html code on it as they do to create the alert

var L = require('leaflet');

        onAdd: function() {
            var header,
                message;

            this._element = L.DomUtil.create('div', 'leaflet-bar leaflet-routing-error');
            this._element.style.visibility = 'hidden';

            header = L.DomUtil.create('h3', null, this._element);
            message = L.DomUtil.create('span', null, this._element);

            header.innerHTML = this.options.header;

            return this._element;
        }

so retrieving the div of class or id leaflet-routing-error and injecting on it your desired html component template should be fine

Customize leaflet routing error (options)

1 Answers