Leaflet.VectorGrid | Display gridded vector data | Map library

React-Leaflet aims to provide all the controls and layers provided by Leaflet, but it does not support any Leaflet plugin.

To create a custom components requires the following steps,

1.) Extend an Abstract class provided by React-Leaflet

2.) Implement createLeafletElement (props: Object): Object method to create Leaflet-element. For example,

The vectorTileLayerStyles option must be an object, not a function:

vectorTileLayerStyles Object
A data structure holding initial symbolizer definitions for the vector features.

But individual layers in vectorTileLayerStyles can be styled by a function:

A layer style can be either:

• A set of L.Path options
• An array of sets of L.Path options
• A function that returns a set of L.Path options
• A function that returns an array of sets of L.Path options for point, line, and polygon styles respectively

Try passing an object defining a function for your mountains layer, something like

This Github issue https://github.com/Leaflet/Leaflet.VectorGrid/issues/89 describes a fetchOptions attribute you can pass when instantiating your layer that will be used as fetch options to retrieve the tiles.

You should be able to do