water layer: antialias / some boundaries are visible

[pathmapper]

Hi, some boundaries are visible in the water layer.

Examples:

https://editor.openmaptiles.org/?style=https://rawgit.com/openmaptiles/positron-gl-style/master/style.json#0.38/-0/111

and

https://editor.openmaptiles.org/?style=https://rawgit.com/openmaptiles/positron-gl-style/master/style.json#10/54.5974/11.1702

I dont't know exactly why this happens, but "fill-antialias": true has sometheing to do with it. Maybe the buffer size of the vector tiles is also a source of this issue.

A quick workaround is to duplicate the water layer with "fill-antialias": false and place it over the original water layer:

https://gist.github.com/pathmapper/7049c569f1e04434c644339c22e8080f#file-style-json

This covers the visible boundaries but also preserves the sharp coastlines:

https://editor.openmaptiles.org/?style=https://gist.githubusercontent.com/pathmapper/7049c569f1e04434c644339c22e8080f/raw/4f49119f6fde956a53427b32311d590e83114408/style.json#0.38/-0/111

But this is only a workaround and I am sure there is a much smarter way to resolve this issue without an additional layer. Any ideas?

[pathmapper]

The boundaries of the second example are getting visible starting with zoom level = 9. This is when the switch from natural earth to osm as source for the ocean polygons happens. These are boundaries of the ocean polygons provided by openstreetmapdata (http://data.openstreetmapdata.com/water-polygons-split-3857.zip).

The visible boundary in the first example is where the boundaries of the shapefiles (ne and osm) are.

In the water.yaml is written:

The polygons are split into many smaller polygons to improve rendering performance. This however can lead to less rendering options in clients since these boundaries show up. So you might not be able to use border styling for ocean water features.

In this context "fill-antialias": true has the same effect like a border styling for ocean water features.

[anneb]

If you zoom in to the coast near Stockholm or the coast of south Chili you see way too many of these borders. These borders do not exist in OSM so they must be some artifact, likely because of "The polygons are split into many smaller polygons to improve rendering performance."

I suppose it is better to remove ocean boundaries at higher zoom levels from positron, something like this:

{
  "id": "water",
  "type": "fill",
  "source": "openmaptiles",
  "source-layer": "water",
  "filter": [
    "==",
    "$type",
    "Polygon"
  ],
  "layout": {
    "visibility": "visible"
  },
  "paint": {
    "fill-color": "rgb(194, 200, 202)",
    "fill-antialias": true,
    "fill-outline-color": {
      "stops": [
        [
          0,
          "hsla(180, 6%, 63%,8)"
        ],
        [
          8,
          "rgb(194, 200, 202)"
        ]
      ]
    }
  }
}

[pathmapper]

@anneb nice, with your approach there is no duplicated layer used to cover the boundaries. However, on lower zoom levels the boundary from north to south (first example above) is still visible, but I'm afraid there comes a trade-off with every styling solution I'm aware of: either a duplicated layer to cover or remove ocean boundaries at higher zoom levels but border from north to south visible on lower zoom levels or no ocean boundaries at all

@klokan I think every trade-off is better compared to like it is now. Do you want a PR for one of the three? For reference the area near Stockholm @anneb mentioned:

[anneb]

I do not understand the purpose of trade-off option with a duplicate layer covering the boundaries. If covered, why keep the original layer at all? I suppose the ocean borders were meant as a nice border line between ocean and land (=background). The trade-off is to keep the land-water border but have some artificial in-ocean borders or remove all border lines and have a slightly less attractive land-ocean border.

[klokan]

PR with a temporary fix of the look (probably with an extra overlay layer?) for the existing vector data would be nice @pathmapper - thanks! Could you please make it?

Improving the vector tiles data would be even better in long term, but it is not an easy task. Now with elevating the more detailed data few zoom levels up - there can be merge done on the generalised polygons probably - but this would be available earliest fo v3.7 (probably September) - and would not fix the problem 100%. Related ticket: https://github.com/openmaptiles/openmaptiles/issues/308

Changing the style to eliminate the border is recommended workaround for now.

[jirik]

@pathmapper +1 for no ocean boundaries at all Should be quite easy, actually "fill-antialias": false

[pathmapper]

@jirik @klokan my favorite workaround is the one with the extra overlay layer, but this might be confusing for somebody using the style and having no clue why it is there. That's why the ocean boundaries are removed in the PR.

@anneb please have a look at the coastlines around Prerow: 1 water layer with `"fill-antialias": false:

1 water layer with "fill-antialias": true and another water layer with "fill-antialias": false on top:

With the extra layer the coastlines are smoother.

[anneb]

@pahtmapper Ok, it is now clear to me that fill-antialias:true is important. but why overlay that on top of a layer with fill-antialias:false? I do not see a visual difference with the second (smoother) Prerow map if I completely remove the fill-outline-color on the single layer, now defined as:

{
  "id": "water",
  "type": "fill",
  "source": "openmaptiles",
  "source-layer": "water",
  "filter": [
    "==",
    "$type",
    "Polygon"
  ],
  "layout": {
    "visibility": "visible"
  },
  "paint": {
    "fill-color": "rgb(194, 200, 202)",
    "fill-antialias": true
  }
}

?

[pathmapper]

You're right, your suggestion would be the best solution, thanks!