I'm very much done with searching for this as I've been doing it for a trillion years and still don't have a goddamn good working example.

Does anyone know how one can properly render pbf tiles with a custom style in either leaflet or open layers?

Leaflet VectorGrid is a no go as it can't render any names (streetnames etc) and I can't fucking figure out how to use Leaflet VectorTileLayer.

Leaflet would be preferred as I've written everything with leaflet till now but anything working would be great 😬

It aint what you are asking for specifically, but it is my experience with OpenLayers from few years ago: unfortunetely, using vector tiles was a big no-go. I used raster tiles, generated on the fly using GeoServer (OSM as well as some other national data stored in PostgreSQL with PostGIS).

Vector tiles worked only to a certain point (demo purposes), but styling them and in particular scaling them (having more data) was a huge performance bottleneck. To this end, we decided to render data on the server and serving them as geocached WMS.

Data queries were handled by the server as well, i.e. to detect objects under user’s clicks, a call was made to the server to check the layer and display the selection - this was done using vector layer.

Never worked with that

But did you check this?

https://gitlab.com/jkuebart/...

@Ganofins Yes! I'm just far from a frontender and am struggling to see how I'd run this...

@gberginc I've seen high performing examples from open layers and have a high performing one running through leaflet but that one is without place names and such..

@linuxxx I guess

1. Create a directory and Run 'npm install leaflet-vector-tile-layer'

2. Now build it by 'npm run build'

3. Now create a js file

4. Put this code
const url = 'https://{s}.example.com/tiles/{z}/...';

const options = {

// Specify zoom range in which tiles are loaded. Tiles will be
// rendered from the same data for Zoom levels outside the range.

minDetailZoom, // default undefined

maxDetailZoom, // default undefined

// Styling options for L.Polyline or L.Polygon. If it is a function, it

// will be passed the vector-tile feature and the layer name as // parameters. style,
// default undefined
// This works like the same option for `Leaflet.VectorGrid`. vectorTileLayerStyle,
// default undefined };

const layer = vectorTileLayer(url, options);

Replace the URL with your pbf file's URL
You can read more about styling in the readme file (https://gitlab.com/jkuebart/...)

I hope that's correct 😅