title: Showing Direction Arrow on Line in Mapboxgl
body: <p>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.</p>
  
  <p>Adding a image Layer with <code>'symbol-placement': 'line'</code></p>
  
  <p><strong>Line Layer</strong></p>
  
  <pre><code>  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]]
              }
            }
          });
  </code></pre>
  
  <p><strong>Arrow Layer</strong></p>
  
  <pre><code>const url = 'img/arrow.png'
      map.loadImage(url, (err, image) =&gt; {
        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'
          }
        });
      });
  </code></pre>
  
  <p><strong>No Arrow at low zoom</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ckGpq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ckGpq.png" alt="enter image description here"></a></p>
  
  <p><strong>Arrow showing at high zoom</strong></p>
  
  <p><a href="https://i.stack.imgur.com/xuo8S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xuo8S.png" alt="enter image description here"></a></p>
  
  <p>I have tried experimenting with symbol-spacing, but it didn't work.
  Is there way to force mapbox to show arrow on low zoom?</p>
  
  <p><a href="https://jsfiddle.net/4jjmh2nb" rel="noreferrer">jsfiddle.net/4jjmh2nb</a> </p>