0

Loading a vector tiles in leaflet with leaflet.vectorgrid I'm getting Error: unknown command 4

core code that fails:

var pbf_testSlope = new L.vectorGrid.protobuf('https://myx.ch/test/Slope_Ausschnitt_WGS84/{z}/{x}/{y}.pbf',
            vectorTileOptions = {
            interactive: true,
            maxNativeZoom: 16,
             vectorTileLayerStyles: {
                    fill: true,
                    weight: 1,
                    fillColor: 'red',
                    color: '#06cccc',
                    fillOpacity: 0.2,
                    opacity: 0.4,
                    }
                
            }

The aim is to include a large polygon dataset in a leaflet-map. For testing purposes, I exported a smaller set to our local webserver using native:writevectortiles_xyz in QGIS. QGIS can access the server well under the following URL: https://myx.ch/test/Slope_Ausschnitt_WGS84/%7Bz%7D/%7Bx%7D/%7By%7D.pbf

However, I struggle to get that working in a leaflet app.

Error: unknown command 4
    at VectorTileFeature$2.loadGeometry (vectortilefeature.js:81:19)
    at Leaflet.VectorGrid.Protobuf.js:141:27

Sometimes I'm getting as well unknown command 6.

Nothing is displayed in the leaflet app.

Here is a sample leaflet HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css">
        <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>
        <title></title>
    </head>
    <body>
        <div id="map">
        </div>
        
        <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
        <script src="https://unpkg.com/leaflet.wms@latest/dist/leaflet.wms.js"></script>
        <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

        <script>

        var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        }).fitBounds([
            [47.1247804242369881, 8.1082769014031886],
            [47.1277594260495789, 8.1132427183521294]
        ])


        map.createPane('pane_SWISSIMAGEHintergrund_3');
        map.getPane('pane_SWISSIMAGEHintergrund_3').style.zIndex = 100;
        var layer_SWISSIMAGEHintergrund_3 = L.WMS.layer("https://wms.geo.admin.ch/?VERSION=1.3.0", "ch.swisstopo.swissimage", {
            pane: 'pane_SWISSIMAGEHintergrund_3',
            format: 'image/jpeg',
            uppercase: true,
            transparent: true,
            continuousWorld : true,
            tiled: true,
            info_format: 'text/html',
            opacity: 1,
            identify: false,
            attribution: 'Swisstopo',
        });


        map.createPane('pbf_Test');
        map.getPane('pbf_Test').style.zIndex = 450;
        //map.getPane('pbf_Test').style['mix-blend-mode'] = 'multiply';
        var pbf_testSlope = new L.vectorGrid.protobuf('http://cors-anywhere.herokuapp.com/https://myx.ch/test/Slope_Ausschnitt_WGS84/{z}/{x}/{y}.pbf',
            vectorTileOptions = {
            interactive: true,
            maxNativeZoom: 16,
             vectorTileLayerStyles: {
                    fill: true,
                    weight: 1,
                    fillColor: 'red',
                    color: '#06cccc',
                    fillOpacity: 0.2,
                    opacity: 0.4,
                    }
                
            }  
        );


        map.addLayer(layer_SWISSIMAGEHintergrund_3);

        L.control.layers(   {"SWISSIMAGE Hintergrund": layer_SWISSIMAGEHintergrund_3},
                            {'Slope PBF':pbf_testSlope},
                            ).addTo(map);


        </script>
    </body>
</html>


---- new information
I tried with QGIS 3.34.4 (LTR). It's getting better, but still fails in several locations. It now seems to be like other errors I've seen. At least, I'm getting other errors now :) Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')

enter image description here

4
  • If I try it with L.vectorGrid.protobuf in Leaflet I get error Error: unknown command 4 from vector tile parser. If I try it in OpenLayers I can display tiles without problems, so obviously there is something in pbf tiles that L.vectorGrid.protobuf does not recognize.
    – TomazicM
    Commented Feb 1 at 16:40
  • Many thanks. Could it be that native:writevectortiles_xyz compresses the pbf?
    – Beni
    Commented Feb 1 at 16:55
  • That could be one possibility. I even looked at the content of the pbf tile, but I'm not expert in this field and can't differentiate between compressed and uncompressed tiles.
    – TomazicM
    Commented Feb 1 at 17:12
  • the unknown command 4 points to compression as a potential issue - it might think they are compressed but are not or vice versa
    – Malcolm
    Commented Feb 1 at 19:07

1 Answer 1

0

Exporting from QGIS didn't do the job. I don't know why. It might be, that the input gpkg contains errors in the geometries, which do not hamper them being displayed in QGIS directly nor as vector tiles in QGIS. However, exporting a freshly generated, temporary point layer was not displaying fine neither.

What didn't help:

What finally helped was to generate the vector tiles with https://github.com/felt/tippecanoe

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.