Esri/esri-leaflet-vector

L.esri.Vector.vectorTileLayer: setting `style.layers` in the `style` property not working

Closed this issue · 4 comments

Describe the bug

When setting the style layers in the following format, at esri-leaflet-vector v4.2.1 it does not work anymore:

L.esri.Vector.vectorTileLayer(
        myUrl,
        {
          style: function (style) {
            style.layers[0].paint = ...;
            return style;
          }
        }
);

Reproduction

  1. Go to https://jsbin.com/xohapiz/2/edit?html,output which uses esri-leaflet-vector v4.2.0.

    • Expected: parcels have different colors: yellow, green, red, blue.
    • Actual: parcels have different colors: yellow, green, red, blue ✅ image
  2. Go to https://jsbin.com/xohapiz/3/edit?html,output which uses esri-leaflet-vector v4.2.1.

    • Expected: parcels have different colors: yellow, green, red, blue.
    • Actual: parcels are not styled - all blue: image

Logs

No response

System Info

leaflet@1.9.4
esri-leaflet@3.0.12
esri-leaflet-vector@4.2.1

Additional Information

v4.2.1 was an update to Maplibre v3, #201 ... so that is most likely the cause of this. Here is the changelog for that: https://github.com/maplibre/maplibre-gl-js/releases/tag/v3.0.0

It seems like a workaround is to clone the JSON style object instead of just modifying it directly:

L.esri.Vector.vectorTileLayer(
        myUrl,
        {
          style: function (style) {
            const styleClone = JSON.parse(JSON.stringify(style)); // < ADDED LINE!
            styleClone.layers[0].paint = ...;
            return styleClone;
          }
        }
);

Here is a sample showing it working at esri-leaflet-vector@4.2.1:
https://jsbin.com/xohapiz/7/edit?html,output

We think this may be an issue with maplibre-gl ... so we may need to log a bug over there if we can pull together a replicable test case. Until then, we will use this workaround.

I logged a bug for this in maplibre-gl-js: maplibre/maplibre-gl-js#4472

A fix for this in maplibre-gl-js was merged: maplibre/maplibre-gl-js#4488 .. so this should be fixed once that is released. I'll leave this open until I'm able to verify with the new version, then I'll close this item.

This is fixed in esri-leaflet-vector v4.2.5, see here: https://jsbin.com/pulocim/2/edit?html,output