Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with line-dasharray and starting offset of 0 #8140

Open
HarelM opened this issue Apr 11, 2019 · 2 comments
Open

Issue with line-dasharray and starting offset of 0 #8140

HarelM opened this issue Apr 11, 2019 · 2 comments
Labels
bug 🐞 needs investigation 🔍 Issues that require further research (e.g. it's not clear whether it's GL JS or something else)

Comments

@HarelM
Copy link

HarelM commented Apr 11, 2019

mapbox-gl-js version:
0.53.1
browser:
Chrome

Steps to Trigger Behavior

  1. use line-cap: round
  2. use line-dash-array: [0, 10, 10, 10]

Link to Demonstration

Expected Behavior

There shouldn't be artifacts along the line

Actual Behavior

There are artifacts for 0 starting offset:

code:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/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 = 'your-key';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function () {

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                        [-122.48888969421387, 37.83297152392784],
                        [-122.48987674713133, 37.83263257682617],
                        [-122.49043464660643, 37.832937629287755],
                        [-122.49125003814696, 37.832429207817725],
                        [-122.49163627624512, 37.832564787218985],
                        [-122.49223709106445, 37.83337825839438],
                        [-122.49378204345702, 37.83368330777276]
                    ]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8,
            "line-dasharray": [0, 10, 10, 10]
        }
    });
});
</script>

</body>
</html>

Screenshot:
image

More info:
I would like to create an ant-path using animation.
I have looked at the examples below in the SO question:
https://stackoverflow.com/questions/43057469/dashed-line-animations-in-mapbox-gl-js
In these examples the artifacts are less visible since the line-cap is butt but still there.
@HarelM HarelM changed the title Issue with line-dasharray and starting offset Issue with line-dasharray and starting offset of 0 Apr 11, 2019
@andrewharvey
Copy link
Collaborator

I might be misunderstanding something but a dash of length 0 with line-cap round will draw a nice circle, I always thought this was expected behaviour. Indeed it's how you get a circle dotted line.

There will be artefacts at tile boundaries since each tile is drawn independently, but given you didn't circle that one I don't think that's the issue here.

@HarelM
Copy link
Author

HarelM commented Apr 11, 2019

Thanks for the super quick response!!
I would expect 1 pixel to behave like this not 0, but maybe it's just me.
But this was more of a way to shot the issue.
Setting line-cap to either butt or square produces some artifacts as well but more subtle:
The following image is butt line cap
image
Also square doens't create squares so I'm not sure why round would create dots...

@mourner mourner added bug 🐞 needs investigation 🔍 Issues that require further research (e.g. it's not clear whether it's GL JS or something else) labels Apr 15, 2019
This was referenced May 13, 2019
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐞 needs investigation 🔍 Issues that require further research (e.g. it's not clear whether it's GL JS or something else)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mourner @andrewharvey @HarelM