setStyle diffing does not work if source gets clustered on the fly

[bartvde]

mapbox-gl-js version: 0.42.1

Steps to Trigger Behavior

1. have a map with a source with cluster false
2. set the source to cluster true on the fly after the map is initialised
3. apply the new style on the map with setStyle

Expected Behavior

The points should appear clustered

Actual Behavior

The points do not appear clustered

If I start with cluster: true from the beginning all is fine. Also disabling the style diffing kind of works (ofcourse I get flashes on the map, but the clustering behaviour is as I would expect).

[jfirebaugh]

I'm not sure I understand the description here. There's no API method called applyStyle, did you mean setStyle? If so, this is likely expected behavior; setStyle does not preserve any state from the existing style. If you want the source to remain clustered, ensure that clustering is enabled in the source you pass to setStyle.

[bartvde]

sorry @jfirebaugh so indeed I meant setStyle. So initially, I have config like this passed as the style key in the map constructor:

{
  map: {
    version: 8,
    name: 'default',
    center: [
      -94.90107054659973,
      44.648285066778044
    ],
    zoom: 4.601874598743312,
    bearing: 0
    sources: {
      osm: {
        type: 'raster',
        tileSize: 256,
        tiles: [
          'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
        ]
      },
      points: {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [ /* feature data here */]
        }
      }
    },
    layers: [
      {
        paint: {},
        metadata: {},
        id: 'osm',
        source: 'osm',
        type: 'raster'
      },
      {
        paint: {
          'circle-radius': {
            type: 'interval',
            'default': 3,
            property: 'point_count',
            stops: [
              [
                0,
                5
              ],
              [
                2,
                8
              ],
              [
                5,
                13
              ],
              [
                10,
                21
              ]
            ]
          },
          'circle-color': '#feb24c',
          'circle-stroke-color': '#f03b20'
        },
        metadata: {},
        id: 'clustered-points',
        source: 'points',
        type: 'circle',
        filter: [
          'has',
          'point_count'
        ]
      },
      {
        paint: {
          'circle-radius': 3,
          'circle-color': '#756bb1',
          'circle-stroke-color': '#756bb1'
        },
        metadata: {},
        id: 'random-points',
        source: 'points',
        type: 'circle',
        filter: [
          '!has',
          'point_count'
        ]
      }
    ]
  }
}

Later on the cluster config for the points source is set to true, and setStyle is called on the map with the updated style. In this case the points layer does not show clustered, hence my assumption that the style diffing option of setStyle is not working properly here to detect the change.

This is the change I'm making to the source to be more explicit:

        cluster: true,
        clusterRadius: 50

Hope it's more clear now.

[jfirebaugh]

Ok, can you please put together a minimal self-contained demo on JSFiddle that demonstrates the issue? Thanks!

[bartvde]

@jfirebaugh sure see: https://jsfiddle.net/bartvde/0mknjj30/2/

Press the button and no redraw will happen.

Change the fiddle to use diff: false and it works:

map.setStyle(style, {diff: false});

[jfirebaugh]

Thanks! Looks like this was a regression in #5332.