0

I am having a ton of trouble styling my pbf tile service rendered from pg_tileserv in a leaflet map.

here is my code

L.vectorGrid.protobuf(http://localhost:7800/data_oh.parcel/{z}/{x}/{y}.pbf, {
        interactive: true,
        rendererFactory: L.svg.tile,
          vectorTileLayerStyles: {
            parcel: {
            fillColor: "yellow",
            fill: true,
            color: "red"
                }
          }
    }).addTo(map);

it comes up standard blue.

now if I take the suggestions of Styling GeoServer pbf vector tiles in Leaflet

and run

    var vectorTileOptions = {
        interactive: true,
        // pane: "OverlayPane",
        vectorTileLayerStyles: {
          parcel: {
            fillColor: "yellow",
            fill: true,
            color: "red"
         }
        }
      };

L.vectorGrid.protobuf("http://localhost:7800/data_oh.parcel/{z}/{x}/{y}.pbf",vectorTileOptions).on('click',function(e) {
    console.log(e.layer);
    L.DomEvent.stop(e);
}).addTo(map);

it doesnt correctly change the color and in those directions I don't see anything that could help me change this

enter image description here

the actual datalayername is data_oh.parcel but I cannot write it like that in the vector grid function because it will give me an error with the .

not sure what to do here, ive found other examples which have not helped me

Styling polygons in a map tile PBF file in Leaflet https://eox.at/2020/01/vector-tiles-with-dynamically-updated-style-in-leaflet-lpvis/

5
  • Try putting your layer name which contains . into quotes: 'data_oh.parcel'.
    – TomazicM
    Dec 4, 2020 at 10:10
  • @TomazicM nope got an error
    – ziggy
    Dec 4, 2020 at 13:31
  • Any possibility of trying your vector tile layer?
    – TomazicM
    Dec 4, 2020 at 13:43
  • unfortunately its on my local so unless I open up my ports...no
    – ziggy
    Dec 4, 2020 at 13:47
  • oh wait that worked! I was connecting to the wrong DB when I tried your suggestion @TomazicM thanks feel free to make it an answer
    – ziggy
    Dec 4, 2020 at 13:50

1 Answer 1

1

Since vectorTileLayerStyles option is a JS object (JSON), property names can be put in quotes when containing characters that can otherwise be interpreted as some kind of delimiter.

So solution in this case is simply to put layer name property in quotes:

var vectorTileOptions = {
  interactive: true,
  vectorTileLayerStyles: {
    'data_oh.parcel': {
      fillColor: "yellow",
      fill: true,
      color: "red"
   }
  }
};
2
  • I'm trying to take what you showed me with multiple layers and function stackoverflow.com/questions/65146183/… would be awesome if you could help me out here!
    – ziggy
    Dec 4, 2020 at 15:42
  • If you don't get answer on StackOverflow, remove question there and post it here.
    – TomazicM
    Dec 4, 2020 at 16:05

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.