CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-glmapbox-studio
ecounihan
ecounihan

Reputation: 11

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

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>

Upvotes: 1

Views: 2902

Answers (2)

FFFFFF
FFFFFF

Reputation: 109

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.

Upvotes: 3

Steve Bennett
Steve Bennett

Reputation: 126295

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.

Upvotes: 1

Related Questions