16

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

enter image description here

Arrow showing at high zoom

enter image description here

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

vito
  • 473
  • 1
  • 7
  • 17
  • Can you put up a JSfiddle so we can play with it? – Steve Bennett Sep 07 '17 at 23:05
  • @SteveBennettㄹ http://jsfiddle.net/4jjmh2nb/ – vito Sep 08 '17 at 04:26
  • 1
    Hmm, I don't know. `symbol-spacing` should control this, but it's not having any effect below about 100 or so. I suspect it's related to your source icon being so huge. Maybe resizing the image first, rather than relying on `icon-size`. – Steve Bennett Sep 11 '17 at 01:14
  • 3
    @SteveBennettㄹthanks icon size was the issue – vito Sep 12 '17 at 19:13
  • @vito what did you change icon-size to / how did you change the icon – marisbest2 Mar 22 '18 at 14:21
  • 1
    @marisbest2 resized the image to 6x6 pixels / reduced image resolution – vito Apr 04 '18 at 12:32
  • Can't figure out from this example - if i am adding a `LineString` DYNAMICALLY to the map feature list, i.e. `polyline = ({ geometry: { type: 'LineString', coordinates: {...} }, properties: {...} }) as mapboxgl.GeoJSON.Feature; featureCollection.features.push(polyline);` - how to add a predefined arrow to it right away? – Alexander Aug 10 '22 at 14:28
  • @Alexander, there is no pre defined arrow, a new img layer needs to added, try the jsfiddle and try to use ur the JWT token – vito Aug 30 '22 at 05:22

0 Answers0