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... ?
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
