Leaflet / Leaflet.VectorGrid

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

TypeError: json.layers[layerName].feature is not a function #163

Open relaxweb opened 6 years ago

relaxweb commented 6 years ago

Hi, I have 2 issues with VectorGrid:

1) Errors are popping up in console: TypeError: json.layers[layerName].feature is not a function when tiles are fetched, so when tiles are not found this error comes up. I am using VectorGrid to fetch tilesets from Mapbox Studio. Despite the error the vector tiles display correctly.

Here is a sample of my code:

var layer = L.vectorGrid.protobuf("https://{s}.tiles.mapbox.com/v4/"+tile+"/{z}/{x}/{y}.vector.pbf?access_token={token}", {
            vectorTileLayerStyles: {},
            subdomains: "abcd",
            token: L.mapbox.accessToken,
            interactive: true,
            getFeatureId: function(f) {
                            return f.id; //properties.osm_id;
                       }
         })
         .on('click', function(e){
            if(e.latlng && e.layer.properties){
                var content = self.parseProperties(e.layer.properties);
                if(content != ""){
                     var popup = L.popup()
                 .setLatLng(e.latlng)
                 .setContent(content)
                 .openOn(self.mapnew);
                }
            }
         }).addTo(self.mapnew); 

2) When I zoom in, the vector tile markers or circlemarkers do not change size smoothly, but still remain on the map creating a messy display. Below are two screenshots.

screen shot 2018-05-18 at 5 06 15 pm screen shot 2018-05-18 at 5 05 33 pm

Any idea how to fix these issues?

perliedman commented 6 years ago

It looks like normal behavior until the new, zoomed in tiles have loaded. If they just stay like that forever, something else is going on. I would check for errors in the console.

relaxweb commented 6 years ago

They do stay like that forever and this error is displayed in the console: TypeError: json.layers[layerName].feature is not a function Leaflet.VectorGrid.Protobuf.js:140:16

This is where the error occurs on lines: for (var i=0; i<json.layers[layerName].length; i++) { var feat = json.layers[layerName].feature(i); feat.geometry = feat.loadGeometry(); feats.push(feat); }

I think it needs to be changed to

for (var i=0; i<json.layers[layerName].length; i++) { if(json.layers[layerName].feature(i)){ var feat = json.layers[layerName].feature(i); feat.geometry = feat.loadGeometry(); feats.push(feat); } }

I am declaring vector grid like that:

It seems like https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js and all the related files are not updated with the latest changes.