3

enter image description here

Is it possible to make a custom line layer that could have some kind of direction markers (for example arrows)? How could I achieve something like this for provided geojson route?

Right now I'm just using this to make a simple route line for an imported gpx file:

map.addLayer({
      "id": "route",
      "type": "line",
      "source": {
          "type": "geojson",
          "data": path,
          "lineMetrics": true
      },
      "layout": {
          "line-join": "round",
          "line-cap": "round"
      },
      "paint": {
        //'line-color': 'red',
        'line-width': 8,
      },
  });
Oskar Gusgård
  • 457
  • 7
  • 20

3 Answers3

4

Here is how you can do it v2.8.2.

map.addLayer({
  id: 'lines',
  source: 'routes',
  type: 'line',
  paint: {
    'line-width': 2,
  }
});

map.addLayer({
  id: 'directions',
  type: 'symbol',
  source: 'routes',
  paint: {},
  layout: {
    'symbol-placement': 'line',
    'icon-image': 'airport-15',
    'icon-rotate': 90,
    'icon-rotation-alignment': 'map',
    'icon-allow-overlap': true,
    'icon-ignore-placement': true
  }
});

There are other icon-images that can be used.

FFFFFF
  • 99
  • 7
0

Maybe use the symbol-placement option can draw the icon repeatedly on the line

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-symbol-placement

jh.bak
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 18 '22 at 12:24
0
     map.addLayer({
        id: 'route',
        type: 'line',
        source: 'routes',
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color':'hsl(0, 0%, 13%)',
          'line-width': ['interpolate', ['linear'], ['zoom'], 2, 1, 10, 2],
          'line-dasharray': [0, 3],
        },
      });

      map.addLayer({
        "id": "triangles",
        "type": "symbol",
        "source": "routes",
        "layout": {
          "symbol-placement": "line",
          "icon-image": "airport-15",
          "icon-size": 1.2,
          "icon-offset": [0, -1],
          "icon-rotate": 90,
        }
    });
Lizandro C.M
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 14 '23 at 13:02