Can not slice a GeoJSON file containing just points

[IvanSanchez]

Prompted by https://stackoverflow.com/questions/44707862/how-to-add-geojson-points-as-a-vector-tile-in-leaflet

I tried to load a GeoJSON file containing only points (the one referenced in the SO question) like so:

    fetch('https://raw.githubusercontent.com/evantdailey/map_testing/master/site1.geo.json').then(function(response){
      return response.json();
    }).then(function(json){
      var points = L.geoJson(json);
      map.fitBounds(points.getBounds());

      var vectorGrid = L.vectorGrid.slicer( json, {
        maxZoom: 20,
        rendererFactory: L.svg.tile,
        vectorTileLayerStyles: {
          sliced: {
            weight: 2,
            color: 'red',
            opacity: 1,
            fillColor: 'yellow',
            fill: true,
            radius: 6,
            fillOpacity: 0.7
          }
        }
      });
      
      vectorGrid.addTo(map);
    })

Playground here. The GeoJSON is valid as per geojsonlint, and it loads if the code is changed to read var points = L.geoJson(json).addTo(map);

After a few minutes looking at the problem, I've discovered at least two problems when slicing geojson points:

• The L.VectorGrid.Slicer does not have a minZoom nor maxZoom. This affects the behaviour of L.GridLayer.update(), as this._tileZoom becomes undefined. The end result is that no tiles are displayed, so no tiles are requested to geojson-vt. Setting a default minZoom and maxZoom should alleviate this. I do not know if the default maxZoom of 14 is being overwritten, or if there is some other race condition elsewhere.

• If this._tileZoom is hacked during debug to allow some tiles to be requested, then _mkFeatureParts throws an exception. It is reminiscent of the cases where a point geometry is used but a linestring geometry is expected.

Unfortunately I don't have the time to debug this problem thoroughly.

[evantdailey]

Thanks @IvanSanchez for taking the time to look into this, those two points are giving me more to think through.

I made a copy of the Leaflet.VectorGrid.js script and made the changes shown in this fix: #https://github.com/Leaflet/Leaflet.VectorGrid/pull/62/commits/f242e7ac4f0e58dfd0d1bda3b8a9848c722ee75d.

From what I can figure out from error messages and some debugging, it looks like this part of the leaflet-src.js script (lines 9611 to 9613 in the L.SVG function, starting at line 9471) is getting an incomplete/wrong variable:

_setPath: function(layer, path) {  
    layer._path.setAttribute('d', path);
},

When I use a LineString GeoJSON the variable "path" from _setPath (in leaflet-src.js) is: M21.6875 32.4375L21.8125 39.625

With the points GeoJSON the variable "path" from _setPath (in leaflet-src.js) is: MNaN,47.5aundefined,undefined 0 1,0 NaN,0 aundefined,undefined 0 1,0 NaN,0

It looks like that value is coming from the _updatePath function in Leaflet.VectorGrid.js. This is the full funciton:

_updatePath: function () {
	if (this.options.icon) {
		this._renderer._updateIcon(this);
	} else {
		L.CircleMarker.prototype._updatePath.call(this);
	}
},

Adding a console.log(this); under the else part of the function returns an object that does have a value MNaN,47.5aundefined,undefined 0 1,0 NaN,0 aundefined,undefined 0 1,0 NaN,0.

For what that troubleshooting is worth... I'll continue poking around to try and figure out how to get that variable to have the correct value.

[IvanSanchez]

@evantdailey If you're debugging Leaflet, please use leaflet-src.js instead of leaflet.js. That'll give you proper file names and line numbers.

[evantdailey]

Thanks @IvanSanchez for the tip, and sorry for the confusion, this is all new to me. I updated my comment to reflect leaflet-src.js.

[IvanSanchez]

@evantdailey No problem, we've all been there. :-)

By your comments, it seems that f242e7a already fixes part of this, but that code is not shipped with 1.2.0. We must look into a new release.

[IvanSanchez]

This is partly a duplicate of #32.

[evantdailey]

Yes, it seems https://github.com/Leaflet/Leaflet.VectorGrid/commit/f242e7ac4f0e58dfd0d1bda3b8a9848c722ee75d addressed the GeoJSON points issue. Since that hasn't been released I just changed the source script on my computer with the changes shown there, and that did resolve a prior error. I just can't figure out where this new error is coming from, but it seems like that bit of script is involved.

[evantdailey]

Tracing the errors back, it looks like this is originating from line 9598 in leaflet-src.js, in the _updateCircle function: changing r = layer._radius to r = 1 allowed the points to be drawn on the map. After figuring that out, I found that the radius value can (or must, I suppose) be defined when creating the L.vectorGrid.slicer object:

var layer = L.vectorGrid.slicer(geoJSON, {
    vectorTileLayerStyles: {
        sliced: {
            radius: 1
        }
    }
}).addTo(map);

I guess that's a pretty easy fix! Makes my problem seem trivial, but maybe it will help someone else avoid hours of troubleshooting. If that's really the solution to the GeoJSON points problem, it'd be great to include that in the documentation. I didn't even realize radius was an option. Thanks again for the help.

[VictorVelarde]

Hi,

I'm trying to build a local 'prepare-1.3.0', to avoid this error, but gobble throws an error on npm run build.

It says:

gobble: 05-rollup transformation failed
                                                                                
input:  /home/victor/Documents/github/Leaflet.VectorGrid/.gobble-build/03-merge/1
output: /home/victor/Documents/github/Leaflet.VectorGrid/.gobble-build/05-rollup/1
>>>
Could not resolve './slicerWebWorker.js.worker' from /home/victor/Documents/github/Leaflet.VectorGrid/src/Leaflet.VectorGrid.Slicer.js

It happens to me also on master. Any help?