6

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?

  • Actually the first version with "LSOA" should have worked. Did you figure out what was the problem? – ylka Jan 24 '18 at 9:06
  • As far as I know that vector grid does not support labelling of vector tiles. – Sudip Barman Jan 25 '18 at 5:22
  • can you back up your claim with a source? this would improve your answer – LaughU Jan 25 '18 at 6:34
  • @ylka Unfortunately not. Maybe I'll try again some day with the latest versions and see if that helps. – BStone Jan 25 '18 at 14:46
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.