Styling GeoServer pbf vector tiles in Leaflet

Question

I'm serving up vector tiles in pbf format in GeoServer 2.11.2 (using the MVT extension) and consuming them in Leaflet 1.2.0 with Leaflet.VectorGrid 1.2.0 but am having trouble styling them. The URL format I am using is:

http://xxxx/geoserver/gwc/service/tms/1.0.0/GIS:LSOA@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf

The vectors appear and render nicely but with a default blue line style. The docs state you should set the style for each layer within the vector tile set like so:

var vectorTileOptions = {
vectorTileLayerStyles: {
    // A plain set of L.Path options.
    water: {
        weight: 0,
        fillColor: '#9bc2c4',
        fillOpacity: 1,
        fill: true
    }
};

i.e. in this example 'water' is the layer name.

I am unsure what my layer name is because whatever I have tried, the style remains the default blue.

In GeoServer my layer title is "LSOA" and name is "GIS:LSOA" so I have tried the following without success:

LSOA: {
        weight: 0,
        fillColor: '#9bc2c4',
        fillOpacity: 1,
        fill: true
    }

JS Error with the colon

GIS:LSOA: {
        weight: 0,
        fillColor: '#9bc2c4',
        fillOpacity: 1,
        fill: true
    }

Nope:

pbfLayerOpts["pbfLayerStyles"]["GIS:LSOA"] = {
        weight: 0,
        fillColor: '#9bc2c4',
        fillOpacity: 1,
        fill: true
    }

All attempts result in the same default style. I have also tried creating a layer group in GeoServer and adding one or multiple layers but no luck there. Also tried adding a layer group without a workspace (the GIS prefix) but in that case GeoServer returned an error to the pbf request.

If I use the OpenMapTiles service then everything works as expected so it seems the issue is with GeoServer/the extension and how it names layers/serves the data.

Has anyone got this set-up working before?

Answer 1

You can dump the Object and inspect the LayerNames your server is hosting via javacsript to debug further.

If you add the interactive flag to your vectorTileOptions Object:

var vectorTileOptions = {
    interactive: true, pane: 'OverlayPane',
    vectorTileLayerStyles: {
        layer_name1: {
            weight: 0,
            fillColor: '#9bc2c4',
            fillOpacity: 1,
            fill: true
        }, layer_name2: {...} }};

Then you can hook into the clickable feature:

var pbfLayer=L.vectorGrid.protobuf(pbfURL,vectorTileOptions).on('click',function(e) {
    console.log(e.layer);
    L.DomEvent.stop(e);
}).addTo(map);

Then click on your a data feature in Leaflet, and in the console the Object will be dumped... expand the following sections.. _eventParents -> (There is usually a number here next, expand that) -> _dataLayerNames:

You should see a list of all your layers, their names, and a true/false if they are to be displayed. You can also investigate the properties Object of the layer Object dumped to learn the attribute fields available if you didn't create the datasource.