Goal: In this link, I found an Esri vector tile (with url “https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf”), and I want to load it into leaflet as a reference layer.

Inspired by this post, I managed to:

1, First load this Esri tile into leaflet with L.vectorGrid.protobuf() with no styling at all. It is showing really haphazard styling with default blue color:
image

2, Then, I log out this Esri protobuf layer in console and check what layers it has:
image.

3, Then to ONLY show “Road”, I create a style, where const style = {Road: {weight: 1, color: "#FF0000", opacity: 1}, ... all other layers : []}, and I load this Esri layer again with this style:

const vectorTileOptions = {vectorTileLayerStyles:style}
L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

4, For result, some roads do go red, and some less important geometries do go invisible. But there are still cycles (esri labels maybe?) and coastal lines that are showing in default blue (below).
image

So how exactly to render this Esri vector tile in leaflet where it only shows Roads?