GeoServer – Displaying Mapbox Vector Tiles with Custom Gridset in GeoServer

geoservergridsetsopenlayerstilesvector-tiles

I'm trying to render Mapbox Vector Tiles hosted on a GeoServer instance. I followed along with the GeoServer Vector tiles tutorial without any issues (the demo uses EPSG:900913). Likewise, I'm able to preview the MVT in Tile Caching > Tile Layers. See Image #1 below. The tiles also rendered in OpenLayers when I set my map view projection to EPSG:90013.

The projection I need to use in OpenLayers is EPSG:6931. I added this projection as a new gridset following these instructions and then assigned it to the same layer (opengeo:countries). However, I get nothing when trying to preview my MVT in this projection. See Image #2 below.

When I plug this url into OpenLayers with the following code (using React), The vector layer doesn’t render on my map, similar to the GeoServer preview.

useEffect(() => {
  const tileGrid = new TileGrid({
    extent: [
      -180.0, 51.208333333333364, -61.09935709635414, 83.2172339545356,
    ],
    tileSize: 256,
    resolutions: defaultResolutions,
  });

  const layer = 'opengeo:countries';
  const projection_epsg_no = '6931';
  const vtLayer = new VectorTileLayer({
    style: new Style({
      fill: new Fill({
        color: '#ADD8E6',
      }),
      stroke: new Stroke({
        color: '#880000',
        width: 1,
      }),
    }),
    source: new VectorTileSource({
      tileGrid: tileGrid,
      projection: 'EPSG:6931',
      format: new MVT(),
      url:
        'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
        layer +
        '@EPSG%3A' +
        projection_epsg_no +
        '@pbf/{z}/{x}/{-y}.pbf',
    }),
  });
  if (olMaps[mapKey]) {
    console.log(vtLayer);
    olMaps[mapKey].addLayer(vtLayer);
  }
  return () => {
    if (olMaps[mapKey]) {
      olMaps[mapKey].removeLayer(vtLayer);
    }
  };
}, [olMaps, mapKey]);

This is just the test data from the GeoServer demo but the actual data I want to render has the same behavior in the MVT GeoServer preview; showing up in EPSG:900913 and displaying nothing in the new gridset with EPSG:6931.

Is there a way to retile my vector data in the correct projection so it can be ingested by OpenLayers? Is there a re-projection step I need to do? What am I missing?

Image #1: MVT Preview with default gridset EPSG:900913

MVT Preview with default gridset EPSG:900913

Image #2: MVT Preview with new gridset EPSG:6931

MVT Preview with new gridset EPSG:6931

Best Answer

After a bit of troubleshooting, I realized that the min and max Published Zoom Levels in GeoServer kept defaulting to 0 for the gridset I added.

I simply removed the gridset from the assigned layers, saved, and added them again. One thing to note-- I added my resolutions in the Tile Matrix Set of the gridset config after initially assigning the girdset to the corresponding layers. It's possible that this was the root of my issue and the layers did not see the changes I had made to the gridset, however it may have been some error I made in the layer/gridset configuration. Working beautifully now!

Related Question