Leaflet / Leaflet.VectorGrid

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

Cannot determine geometry type in style function #125

Closed tomchadwin closed 6 years ago

tomchadwin commented 6 years ago

Use case: some vector tile providers have multiple VT layers with the same name, which differ by their geometry (point, line, poly). The current styling syntax doesn't provide any means to differentiate between these layers, since they have the same name, and I don't believe any object which indicates geometry type is passed to the styling function.

I imagine this could be solved by #76, but I don't know if there's a way of achieving what I need in the current codebase.

tomchadwin commented 6 years ago

An example is Mapzen (http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=XXXXXX), which has separate point, line, and poly layers called "water", so styling like this obviously fails:

water: // point
    function style_water_6_0() {
        return {
            radius: 4.0,
            color: 'rgba(0,0,0,1.0)',
            weight: 1,
            fill: true,
            fillColor: 'rgba(255,0,0,1.0)',
        }
    },
water: // line
    function style_water_7_0() {
        return {
            color: 'rgba(210,91,200,1.0)',
            weight: 1.0,
        }
    },
water: // poly
    function style_water_8_0() {
        return {
            color: 'rgba(0,0,0,1.0)',
            weight: 1.0, 
            fill: true,
            fillColor: 'rgba(166,190,139,1.0)',
        }
    }

The different geometry types overwrite one another.

IvanSanchez commented 6 years ago

Have you tried something like... ?

water: function style_water() {
  return [
    { radius: 4.0, color: 'rbga(0,0,0,1)' },  // point
    { weight: 1.0, color: 'rgba(210,91,200,1.0)' },  // line
    { fill: true, fillColor: 'rgba(166,190,139,1.0)' },  // poly  
  ];
}
tomchadwin commented 6 years ago

I'll try, but I don't see in that function how eg color can tell whether it is applying to a line or a point.

IvanSanchez commented 6 years ago

The styling function only receives the feature properties and the zoom level:

https://github.com/Leaflet/Leaflet.VectorGrid/blob/dfe447246682caeb3fb7de5d29e4edde1db92b9d/src/Leaflet.VectorGrid.js#L98

I think the right approach is to also pass feat.type as a third argument (third just for the sake of backwards compatibility). That'll be the dimension of the feature: 0 for points, 1 for lines and 2 for polys.

tomchadwin commented 6 years ago

I understand. I'll try it now. Thanks!

tomchadwin commented 6 years ago

OK, confirmed the value is passing in correctly (I think). I don't understand how it is using that third argument as the index of the array.

tomchadwin commented 6 years ago

So I think @IvanSanchez's suggestion works for me, so closing.