How can I create a style with directional lines in Mapbox Studio?

Question

I've noticed that Mapbox Studio doesn't seem to support directional lines, but was able to get around this by creating a custom arrow icon and using it as the pattern style property. This looks pretty nice in the mapbox studio editor

But when I go to display the map in a web page, it looks like this

I thought it might be an issue with the custom icon being missing, but zooming further into the web page map, it appears the icon is there, but is not being displayed correctly

Can anyone advise a way to fix the display issue or a better way to go about styling directional lines?

Here is a link to the style in question, please let me know if there is any other info I can provide to help!

Edit- here is the code I am using to render the map:

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Grand Junction Wastewater</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiZXZhbmNvdW5paGFuIiwiYSI6ImNrYWU0d3VibDJkZXAycnBtZ244aWJvMjgifQ.Bjwv1VKYDddx3EYkts773g';

        var map = new mapboxgl.Map({
            container: 'map',
            maxZoom: 21.99,
            minZoom: 4,
            zoom: 12,
            center: [-108.552518, 39.091731],
            //style: 'mapbox://styles/evancounihan/ckae50mmr01pa1inkguat2jfn'
            style: 'mapbox://styles/evancounihan/ckae50mmr01pa1inkguat2jfn/draft'
        });
    </script>
</body>
</html>

The directional lines in the preview link you shared look good (i.e. the same as your screenshot from Studio). Both the Studio style editor and the preview link use GL JS to render the map, so I am assuming that the screenshot you shared of displaying a map in a web page is using a renderer other than GL JS (such as Leaflet or mapbox.js) -- is that correct? If so, could you share the code you are using to render the map in production? — Adriana Babakanian, May 20 '20 at 17:09
Thanks for the response! Just edited my question to include the code I am using to render the map. Been a while since I've done anything front end so apologies for any obvious mistakes — ecounihan, May 20 '20 at 17:37

score 2 · Answer 1 · answered Jun 10 '22 at 15:31

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

Detailed answer.

score 1 · Answer 2 · answered May 20 '20 at 22:51

1

The normal way to create "directional lines" is to use a symbol layer to place arrow icons along the line. See the icon-rotation-alignment property for instance.

answered May 20 '20 at 22:51

Steve Bennett

114,604
39
168
219

Could you please point to some real working example online? I'm trying to add a predefined arrow icon (vector or png) to my dynamically created LineString (at the LAST coordinate), but all MapBox GL API descriptions are just confusing. – Alexander Aug 10 '22 at 14:40

How can I create a style with directional lines in Mapbox Studio?

2 Answers2