Leaflet.VectorGrid icon indicating copy to clipboard operation
Leaflet.VectorGrid copied to clipboard

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

Open relaxweb opened this issue 7 years ago • 2 comments

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); 
  1. 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?

relaxweb avatar May 18 '18 21:05 relaxweb

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.

perliedman avatar Jun 01 '18 06:06 perliedman

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.

relaxweb avatar Jun 15 '18 12:06 relaxweb