How to make a custom line layer in Mapbox-gl?

user_7896012 0
Viewed 2262

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,
      },
  });
mapbox-gl mapbox
2 Answers

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.

user_16710900
user_50764040
Related