Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
601 stars 194 forks source link

can't display protobuf layer #189

Closed 2803media closed 5 years ago

2803media commented 5 years ago

Hi I'm stuck and don't know what's not working

I have a geojson:

https://2803.ovh/lecadastre/tileserver/cadastre-59205-parcelles.json

I convert it with tippecanoe:

tippecanoe -o new259205.mbtiles -zg --drop-densest-as-needed --no-tile-compression cadastre-59205-parcelles.json

and upload to my server where tileserver-php is located

And create this leaflet vectorgrid map:

    var map = L.map('map', {
  measureControl: true}).setView([50.333764833496, 3.3377838134766], 14);

        var grayscale = L.tileLayer.provider('CartoDB.Positron',{minZoom: 8, maxZoom: 20}),
        streets   = L.tileLayer.provider('Esri.WorldImagery',{minZoom: 8, maxZoom: 20}),
            cadastreview = L.tileLayer('',{minZoom: 8, maxZoom: 20})
            ;

        var baseMaps = {
            "Vue cadastre": cadastreview,
            "Vue cartographique": grayscale,
            "Vue satellite": streets,
        };

          defaultLayer = L.tileLayer.provider('CartoDB.Positron',{minZoom: 8, maxZoom: 20}).addTo(map);
        //defaultLayer.on("load",function() { console.log("all visible tiles have been loaded") });

    map.addLayer(defaultLayer);

        map.on("baselayerchange", function (event) {
                map.removeLayer(defaultLayer);
            if(typeof vectorGrid != 'undefined'){
                    vectorGrid.bringToFront();
                }
                if(typeof vectorGrid2 != 'undefined'){
                    vectorGrid2.bringToFront();
                }
                console.log(event.layer);
        });

        map.scrollWheelZoom.disable();

        //var geocoder = L.control.geocoder('search-MKZrG6M').addTo(map);

    var lat = 50.333764833496;
        var lng = 3.3377838134766;
        latlng = L.latLng(lat, lng);
        console.log(latlng);

      var mapboxUrl = "//2803.ovh/lecadastre/tileserver/tileserver.php?/index.json?/new259205/{z}/{x}/{y}.pbf";

      var mapboxVectorTileOptions = {
        rendererFactory: L.canvas.tile,
      };

      var mapboxPbfLayer = L.vectorGrid.protobuf(mapboxUrl, mapboxVectorTileOptions).addTo(map);

And get this error:

Uncaught Error: Unimplemented type: 3
    at Pbf.skip (Leaflet.VectorGrid.bundled.min.js:1)
    at Pbf.readFields (Leaflet.VectorGrid.bundled.min.js:1)
    at new VectorTile$1 (Leaflet.VectorGrid.bundled.min.js:1)
    at FileReader.<anonymous> (Leaflet.VectorGrid.bundled.min.js:1)

As you see i create the mbtile without compression and can't find why it's failed.

The live url on my test is just here: https://2803.ovh/lecadastre/tileserver/test.php

Any input to debug is welcome!

zawarski commented 5 years ago

Nothing to add, except I am having this same issue.

zawarski commented 5 years ago

I figured out I was getting that error because my tiles were compressed. I tried the link you provided:

https://2803.ovh/lecadastre/tileserver/cadastre-59205-parcelles.json

And when I view the network log in chrome, all the pbf entries say "{"message":"Tile does not exist"}".

2803media commented 5 years ago

as you can see it works with mapbox : https://2803.ovh/lecadastre/tileserver/tileserver.php#bati/mapboxgl But not with leaflet vectogrid : https://2803.ovh/lecadastre/tileserver/test.php

zawarski commented 5 years ago

I was successful in adding and displaying the https://2803.ovh/lecadastre layer. Using [50.331434,3.361816], 14 as the setview, it is not shown, however, if I set it to:

map.setView([43.602209529927244, 1.396845382099396], 14)

It starts off over your layer.