Mapbox-gl-js: Tile boundaries? visible on map pitch for geojson polygon source - no error

Created on 2 Nov 2016 · 12Comments · Source: mapbox/mapbox-gl-js

mapbox-gl-js version: https://api.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js

Steps to Trigger Behavior

Create a mapboxgl style with a geojson polygon source, styled as a line with a dash array.
Add the layer to the map, pitch the map and see weird lines, possibly the vector tile boundaries?

Expected Behavior

Go to this map
Don't see weird lines.

Actual Behavior

Go to this map
See weird lines.

Codepen Example

bug environment-specific

Source

reyemtm

Most helpful comment

I can reproduce — thanks for the easy test case! Very weird — the lines seem to only appear on certain pitch and only in closer plane (disappearing when you pan away). Also, it rules out this being a GeoJSON-specific issue (earlier suggested by the title).

mourner on 6 Mar 2017

🎉2

All 12 comments

I regret to say that I am unable to reproduce the bug. Can you double check that your test cases are as intended? This may be a platform-specific bug.

lucaswoj on 3 Nov 2016

Reproduced on:
Windows 7 Chrome Version 54.0.2840.71 m
Windows 7 Firefox Version 49.0.2

However no issue on:
W7 IE 11 V 11.09600.18499

reyemtm on 3 Nov 2016

I swear I could reproduce this on Chrome yesterday, but I can't reproduce it today. Puzzled.

mourner on 3 Nov 2016

Map has to be just at the right pitch and bearing. The lines disappear if
the map is turned 'upsidedown'. The pitch has to be 60 and bearing between
roughly 50 and -50.

On Nov 3, 2016 3:36 PM, "Vladimir Agafonkin" [email protected]
wrote:

I swear I could reproduce this on Chrome yesterday, but I can't reproduce
it today. Puzzled.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/3517#issuecomment-258250948,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGGj0f6kaiGSaXBlPWuYC_PCnOF-K3tSks5q6jfPgaJpZM4Knjgc
.

reyemtm on 3 Nov 2016

Anecdotally I have seen this before and it came up only at a certain pitch and bearing so would flicker on/off as you changed those, however I couldn't reliably replicate it.

andrewharvey on 3 Nov 2016

I wasn't sure where to report this as the symptoms are exactly the same as #2676 (but it doesn't need to be a large canvas) and #1679 (but it's not Firefox specific).

This http://jsbin.com/welaqihoye/edit?html,output on Chrome for me looks like

selection_477

lines are appearing along the tile borders. At least I can reproduce it when reloading the page, hopefully others can reproduce too.

<!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.32.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:1914px; height:1008px }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW5kcmV3aGFydmV5NCIsImEiOiJQUGlGbmRRIn0.QXGAIfNhyVBmLvz0BwAhRg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v10',
    center: [150.7313, -34.6844],
    zoom: 12.31,
    bearing: -44.4,
    pitch: 60
});
</script>

</body>
</html>

andrewharvey on 5 Mar 2017

mourner on 6 Mar 2017

🎉2

Yeah, basically everything needed to fall into place to get a stable occurrence of the issue. Change any of map canvas size, center, pitch, rotation, zoom by too much and the problem disappears.

I also can reproduce on Firefox, so I don't think it's a platform specific bug.

andrewharvey on 6 Mar 2017

The next step would probably be to get the style locally and then gradually remove layers until we get a minimal set for reproducing this (ideally just one).

mourner on 6 Mar 2017

The next step would probably be to get the style locally and then gradually remove layers until we get a minimal set for reproducing this (ideally just one).

A minimal style is mapbox.mapbox-terrain-v2 with contour-line. http://jsbin.com/luqijuf/edit?html,output

selection_479

I also noticed it on a fill layer, if you look carefully in the same places that the artifacts from the previous example show up, the full is over painted becoming darker is some sections. http://jsbin.com/qekevo/edit?html,output (and then looks the way it does due to #3320 as it has the same flickering when changing the view)

selection_478

<!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.32.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:1914px; height:1008px }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW5kcmV3aGFydmV5NCIsImEiOiJQUGlGbmRRIn0.QXGAIfNhyVBmLvz0BwAhRg';
var map = new mapboxgl.Map({
    container: 'map',
    style: {
       "sources" : {
          "composite" : {
             "type" : "vector",
             "url" : "mapbox://mapbox.mapbox-terrain-v2"
          }
       },
       "version" : 8,
       "layers" : [
          {
             "paint" : {},
             "source-layer" : "contour",
             "id" : "contour-line",
             "type" : "line",
             "source" : "composite",
             "layout" : {}
          }
       ]
    },
    center: [150.7313, -34.6844],
    zoom: 12.31,
    bearing: -44.4,
    pitch: 60
});
</script>

</body>
</html>

andrewharvey on 6 Mar 2017

@andrewharvey thanks for reducing the test case! Those lines are coming from the buffer of the vector tiles, but normally those should get clipped with a stencil buffer clipping mask. Somehow it doesn't work in this case.

mourner on 6 Mar 2017

Another issue that looks very similar: #2903

mourner on 19 Apr 2017

Was this page helpful?

0 / 5 - 0 ratings