How to invert leaflet polyline arrow auto resize on Zoom? - leaflet

Question

I want my Leaflet polyline arrow to increases it's size on Zoom In and decreases it on Zoom Out.
But by it's pattern what happens is the opposite of that. Is the a way to reverse it?
Here a complete exemple: https://github.com/bbecquet/Leaflet.PolylineDecorator
function addLine(map, iniCoord, endCoord, desc, color, lineWeight, onClick) {
var polyline = L.polyline([coordIni, coordFim], {
color: color,
offset: 0,
weight: lineWeight
});
polyline.addTo(elements);
L.polylineDecorator(polyline, {
patterns: [{
offset: '100%',
symbol: L.Symbol.arrowHead({
offset: 20,
iconSize: 3,
polygon: false,
pathOptions: {
stroke: true,
color: color,
weight: 3
}
})
}]
}).addTo(elements);
polyline.on('click', onClick);
}

Answer 1

I've found the solution:
var map = L.map('map');
**var arrowSize = 30;**
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
elements = L.layerGroup().addTo(map);
map.on('zoomend', function() {
var currentZoom = map.getZoom();
**arrowSize = 30/((20 - currentZoom )*2);**
elements.clearLayers();
});
function addLine(map, iniCoord, endCoord, desc, color, onClick) {
var polyline = L.polyline([coordIni, coordFim], {
color: color,
offset: 0,
weight: 1.5
});
polyline.addTo(elements);
L.polylineDecorator(polyline, {
patterns: [{
offset: '100%',
symbol: L.Symbol.arrowHead({
offset: 20,
**pixelSize: arrowSize,**
polygon: false,
pathOptions: {
stroke: true,
color: color,
}
})
}]
}).addTo(elements);
polyline.on('click', onClick);
}