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 '20 at 10:10
  • @TomazicM nope got an error
    – ziggy
    Dec 4 '20 at 13:31
  • Any possibility of trying your vector tile layer?
    – TomazicM
    Dec 4 '20 at 13:43
  • unfortunately its on my local so unless I open up my ports...no
    – ziggy
    Dec 4 '20 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 '20 at 13:50
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 '20 at 15:42
  • If you don't get answer on StackOverflow, remove question there and post it here.
    – TomazicM
    Dec 4 '20 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.