Custom grids for higher zoom levels (up to 42)?

[simonpenel]

Hello,
thanks Pirmin for your answer at the issue initially posted dhere

t-rex-tileserver/t-rex#316

      Hi Pirmin,  

First, thanks a lot for your help. And sorry for this long message. We tried with @simonpenel to prepare a small example showing the bug we are facing when zooming in the map, and for which we are struggling finding a solution. If it is obvious for you what happens an how to solve it, it would be great !

The symptom : if you zoom in the simple map (only black) we prepared at this url: http://134.214.213.45/assets/html/index_test42.html, you will see that starting from zoom 27, some tiles do not display correctly, creating some kind of irregular checkerboard

The reproducible example: To make the problem very simple and easily reproducible we decided that the map only displays one tile (always the same, named 1.pbf).
The server configuration file was this one this one :

[[datasource]]
#will not be used 
name = "gebco"
[datasource.wms_proxy]
baseurl = "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?version=1.3.0"
format = "image/jpeg"


[[assets.static]]
dir = "./assets"
path = "/assets"

[[tilestore]]
name = "tilecache"    
[tilestore.files]
#base_dir = "../tiles"
base_dir = "/tmp/mvtbench"

[[tilestore]]
name = "mbtilecache"
[tilestore.mbtiles]
path = "/tmp/tilecache.mbtiles"

[[tilestore]]
name = "pmtilecache"
[tilestore.pmtiles]
path = "/tmp/tilecache.pmtiles"

[[tileset]]
name = "gebco"
wms_proxy = { source = "gebco", layers = "gebco_latest" }

and the configuration json files used are available here:
mystyle_test42.json
lines_test42.json

Do you have any idea where the problem could come from?

All the best, and thanks again for your time,

Damien

Originally posted by @damiendevienne in t-rex-tileserver/t-rex#316 (comment)

[simonpenel]

Hi,
Maybe it can help:
The problem does not seem to appear when using Openlayers and MVT, at least with trex, but I presume it will work with bbox too.
The main.js file for openlayers is the following

import MVT from 'ol/format/MVT.js';
import Map from 'ol/Map.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import View from 'ol/View.js';
import {Fill, Icon, Stroke, Style, Text} from 'ol/style.js';
import TextPlacement from 'ol/style/Text.js';
import TileLayer from 'ol/layer/Tile.js';
import {TileDebug} from 'ol/source.js';
// Styles 
// ------
const rankStyle = new Style({
  text: new Text({
    font: '21px Calibri,sans-serif',
    maxAngle: 0.78,
    placement: new TextPlacement('line'),
    fill: new Fill({
      color: 'red',
    }),
    rotation:0.2,
  }),
});
const cladeStyle = new Style({
  text: new Text({
    font: '23px Calibri,sans-serif',
    fill: new Fill({
      color: 'blue',
    }),
    stroke: new Stroke({
      color: '#fff',
      width: 4,
    }),
  }),
});
const leaveStyle = new Style({
  text: new Text({
    font: '10px Calibri,sans-serif',
    fill: new Fill({
      color: 'yellow',
    }),
  }),
});
const style = [rankStyle, cladeStyle, leaveStyle];

// Carte
// -----
var map = new Map({
  layers: [
    // Layer polyeuk
    new VectorTileLayer({
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/polyeuk/{z}/{x}/{y}.pbf',
      }),
      opacity: 0.3
    }),
    // Layer lines
    new VectorTileLayer({
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/lines/{z}/{x}/{y}.pbf',
      }),
    }),
    // Layer ranks (line)
    new VectorTileLayer({
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/ranks/{z}/{x}/{y}.pbf',
      }),
      style: new Style({
        stroke: new Stroke({
          color: 'red',
          width: 1,
        }),
      }),
    }),
    // Layer ranks (text)
    new VectorTileLayer({
      declutter: true,
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/ranks/{z}/{x}/{y}.pbf',
      }),
      style: function (feature) {
        rankStyle
        .getText()
        .setText([
          ` ${feature.get('rank')}`,
          '',
          '\n',
          '',
        ]);
        return style;
      },
    }),
    // Layer leaves (text)
    new VectorTileLayer({
      declutter: true,
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/leaves/{z}/{x}/{y}.pbf',
      }),
      style: function (feature) {
        leaveStyle
        .getText()
        .setText([
          ` ${feature.get('sci_name')}`,
          '',
          '\n',
          '',
        ]);
        return style;
      },
    }),
    // Layer clade (text)
    new VectorTileLayer({
      declutter: false,
      source: new VectorTileSource({
        maxZoom: 42,
        format: new MVT(),     
        url: 'http://134.214.213.45:4000/clade/{z}/{x}/{y}.pbf',
      }),
      style: function (feature) {
        cladeStyle
        .getText()
        .setText([
          ` ${feature.get('sci_name')}`,
          `${feature.get('sqrzoom')/5}px Calibri,sans-serif`,
          `\n`,
          '',
          ` ${feature.get('common_name')}`,
          '',
        ]
        );
        return style;
      },
    }),
    
    new TileLayer({
      source: new TileDebug(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 4,       
    maxZoom: 42
  }),
});

Best,
Simon

[pka]

I've tested the custom Mercator grid with PostGIS vector data and I could reproduce that layers disapeared on z levels > 22. Setting maxzoom on layer query level fixed it:

[[tileset.postgis.layer.query]]
minzoom = 0
maxzoom = 42

[pka]

In the next release, setting maxzoom on layer query level won't be necessary anymore. With #59, maxzoom from the grid definition is used by default.

[simonpenel]

Hi Pirmin,

thanks again for your help, it seems that the problem came from mapbox since bbox works perfectly with openlayers. We will then use openlayers for the moment, maybe we will come to you if we have some questions.

If you are interested there is a development version of lifemap using bbox here:

http://134.214.213.43/

thanks a lot for your tool!
best,
Simon

[pka]

If you are interested there is a development version of lifemap using bbox here:

http://134.214.213.43/

Wow, this looks great!

I'm closing this issue then.