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

Question

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,
      },
  });

Have you tried using the "line-line-pattern"? mapbox.com/mapbox-gl-js/style-spec/#paint-line-line-pattern — Bwyss
– Bwyss, Commented Dec 11, 2018 at 19:33

FFFFFF · Accepted Answer · 2022-06-10 15:42:41Z

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.

edited Jun 10, 2022 at 15:42

answered Jun 10, 2022 at 15:25

FFFFFF

1097 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jh.bak · Accepted Answer · 2022-05-12 07:12:27Z

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

answered May 12, 2022 at 7:12

jh.bak

1

1 Comment

Community Over a year ago

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.

Lizandro C.M · Accepted Answer · 2023-01-12 03:09:27Z

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,
        }
    });

edited Jan 12, 2023 at 3:09

answered Jan 12, 2023 at 3:08

Lizandro C.M

11 bronze badge

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related