How can I use maxNativeZoom to continue to show the ... | Leaflet/Leaflet.VectorGrid

Nobody has claimed this yet.

I have a tile set that is defined for zoom levels 0-2, but I want it to continue to show beyond a zoom level of 2. I believe this is done using maxNativeZoom however this setting doesnt seem to work, as the tiles are hidden beyond a zoom level of 2.

The full code for this problem is:

<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>

    <style>
        body {
            margin: 0;
        }

        #map {
            background: #F9F7F7;
        }
    </style>
</head>

<body>
    <div id='map' style='width: 100vw; height: 100vh'></div>
    <script>
        var map = L.map('map');

        // add openstreetmap basemap
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        const URL = 'https://gfswindtiles.s3.eu-west-2.amazonaws.com/tiles/{z}/{x}/{y}.pbf'
        const interpolator = d3.scaleLinear()
            .domain([0, 4, 12, 16, 20, 24, 28].map(x => x * 1.94384))
            .range(["hsl(0, 0%, 100%)", "hsl(202, 88%, 51%)", "hsl(157, 96%, 53%)", "hsl(60, 100%, 49%)", "hsl(26, 100%, 49%)", "hsl(0, 64%, 43%)", "hsl(274, 47%, 29%)"]);

        const opacityInterpolaotr = d3.scaleLinear()
            .domain([0, 4, 12, 28].map(x => x * 1.94384))
            .range([0, 0, 1, 1]);

        const vectorStyle = {
            wind: function (properties, zoom) {
                var speed = properties.wind_speed_max;
                const color = interpolator(speed);
                const opacity = opacityInterpolaotr(speed);
                return {
                    fill: true,
                    fillColor: color,
                    stroke: false,
                    fillOpacity: opacity
                };
            }
        };

        L.vectorGrid.protobuf(URL, {
            rendererFactory: L.canvas.tile,
            // token: TOKEN,
            vectorTileLayerStyles: vectorStyle,
            maxNativeZoom: 20,
            maxZoom: 2
        }).addTo(map);

        map.setView({
            lat: 0,
            lng: 0
        }, 3);

    </script>
</body>

</html>

Any help would be appreciated!

Start with the provided L.vectorGrid.protobuf reproduction and inspect how the maxNativeZoom and maxZoom options affect tiles beyond zoom level 2. Run the example with the referenced Leaflet.VectorGrid bundle and determine whether the expected behavior is supported; done means documenting the working configuration or clearly identifying the limitation.

Written by the indexing model from the issue text.

How can I use maxNativeZoom to continue to show the vector tiles beyond their maximum zoom level?

Description

Contributor guide

First steps

Research direction

Assessment