Showing Direction Arrow on Line in Mapboxgl

Trying to show a arrow as indication of direction in mapboxgl. The arrow is only visible at high zoom and is not visible at low zooms.



Adding a image Layer with 'symbol-placement': 'line'



Line Layer

map.addLayer({
'id': 'route',
'type': 'line',
'source': 'mapSource',
'filter': ['==', '$type', 'LineString'],
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#3cb2d0',
'line-width': {
'base': 1.5,
'stops': [[1, 0.5], [8, 3], [15, 6], [22, 8]]
}
}
});




Arrow Layer

const url = 'img/arrow.png'
map.loadImage(url, (err, image) => {
if (err) { return; }
map.addImage('arrow', image);
map.addLayer({
'id': 'arrowId',
'type': 'symbol',
'source': 'mapSource',
'layout': {
'symbol-placement': 'line',
'symbol-spacing': 1,
'icon-allow-overlap': true,
// 'icon-ignore-placement': true,
'icon-image': 'arrow',
'icon-size': 0.045,
'visibility': 'visible'
}
});
});




No Arrow at low zoom







Arrow showing at high zoom







I have tried experimenting with symbol-spacing, but it didn't work.
Is there way to force mapbox to show arrow on low zoom?



jsfiddle.net/4jjmh2nb