Uncaught Error: Unimplemented type: 3

[manuelep]

Hi *!

Trying to render subsequent data encoded server side with python using mapbox_vector_tile encoder I obtain this error:

• Uncaught Error: Unimplemented type: 3

  Uncaught Error: Unimplemented type: 3
  skip https://unpkg.com/[email protected]:1
  readFields https://unpkg.com/[email protected]:1
  VectorTile$1 https://unpkg.com/[email protected]:1
  _getVectorTilePromise https://unpkg.com/[email protected]:1
  _getVectorTilePromise https://unpkg.com/[email protected]:1
  _getVectorTilePromise https://unpkg.com/[email protected]:1
  promise callback*_getVectorTilePromise/< https://unpkg.com/[email protected]:1
  promise callback*_getVectorTilePromise https://unpkg.com/[email protected]:1
  createTile https://unpkg.com/[email protected]:1
  _addTile https://unpkg.com/[email protected]/dist/leaflet.js:5
  _update https://unpkg.com/[email protected]/dist/leaflet.js:5
  _setView https://unpkg.com/[email protected]/dist/leaflet.js:5
  _resetView https://unpkg.com/[email protected]/dist/leaflet.js:5
  onAdd https://unpkg.com/[email protected]/dist/leaflet.js:5
  _layerAdd https://unpkg.com/[email protected]/dist/leaflet.js:5
  whenReady https://unpkg.com/[email protected]/dist/leaflet.js:5
  addLayer https://unpkg.com/[email protected]/dist/leaflet.js:5
  addTo https://unpkg.com/[email protected]/dist/leaflet.js:5
  initMap http://localhost:8000/qurates/static/testmap5.html:151
  mounted http://localhost:8000/qurates/static/testmap5.html:113
  VueJS 7
  invokeWithErrorHandling
  callHook
  mountComponent
  $mount
  $mount
  _init
  Vue
  http://localhost:8000/qurates/static/testmap5.html:99

[{
  "name": "re",
  "features": [
    {
      "geometry": "POLYGON ((298 439, 297 444, 300 447, 304 445, 306 441, 302 438, 298 439))",
      "properties": {
        "id": "8c1f9b7680697ff",
        "rate": 0.206364124597207,
        "mrate": 0.206364124597207,
        "pricemax": 320000,
        "pricemin": 320000,
        "count": 1,
        "upricemax": 2206,
        "upricemin": 2206,
        "color": "#f3b692"
      }
    },
    {
      "geometry": "POLYGON ((81 649, 80 653, 83 656, 88 655, 89 650, 85 647, 81 649))",
      "properties": {
        "id": "8c1f9b7680887ff",
        "rate": 0.514366272824919,
        "mrate": 0.514366272824919,
        "pricemax": 450000,
        "pricemin": 450000,
        "count": 1,
        "upricemax": 4500,
        "upricemin": 4500,
        "color": "#dc759f"
      }
    },
    {
      "geometry": "POLYGON ((-1 590, -2 595, 1 598, 5 596, 7 592, 3 589, -1 590))",
      "properties": {
        "id": "8c1f9b7680a29ff",
        "rate": 0.416219119226638,
        "mrate": 0.416219119226638,
        "pricemax": 490000,
        "pricemin": 490000,
        "count": 1,
        "upricemax": 3769,
        "upricemin": 3769,
        "color": "#e6869a"
      }
    }
  ]
}]

Here it is how I have instantiated the layer:

var tilesUrl = "/testapp/ws/vtile/{x}/{y}/{z}?classic=true";
this.vectorTileLayer = L.vectorGrid.protobuf(tilesUrl, {
        vectorTileLayerStyles: vectorTileStyling,
});
this.vectorTileLayer.addTo(this.map);

I tryed to follow the example at this url using a custom web service

Thanks a lot for any help!

Cheers

[adolgarevntnx]

@manuelep use uncompressed pbf tiles

[CalRobert]

If anyone else is using tippecanoe, you can generate uncompressed tiles with tippecanoe --no-tile-compression