styling check only sometimes called?

[JulieGoldberg]

I have a very weird issue. It seems like the styling of all my features is done using one of the styles I have, but a significant amount of the time, it doesn't do the check for how to style it.

I can use a tileset with a small number shapes and put in a breakpoint in the styling function. It'll hit the breakpoint the majority of the time but definitely not all the time. Likewise my console log only happens some of the time.

It's as if there's a multi-threading issue but only one thread will log to the console or do the check properly. Sometimes the same district gets partially shown with each format, so maybe certain tiles are processed correctly and others are not?

I'm using ajax to pull a list of all the districts ids I should show. After it returns, I make a list of all the districts ids I can show. And then I create an overlay with a styling function that checks that list.

Most of the time it checks the list but not always. For debugging purposes only, I'm telling it to make bold red lines for the borders I actually want to hide. A handful of the districts I do want shown show up in red & blue, and many of the districts I don't want shown show up with my standard overlay.

` getDistrictGroupLayerStyle = function(feature) {
var style = {};
is_shown = districtsToOverlay[Number(feature.properties.district_id)];

    if (is_shown) {
        style.color = 'rgba(255,255,255,0)'; //clear
        style.outline = {
            color: 'rgb(20,20,20)',
            size: 2
        };
        console.log("displaying district: " + feature.properties.district_id);
    }
    else {
        console.log("No overlay for district: " + feature.properties.district_id);
        style.color = 'blue';
        style.outline = {
            color: 'red',
            size: 4
        };
    }
    return style;
};

showDistrictGroupLayer = function(boundaryId, districtGroupId) {
    districtsToOverlay = {};
    districtGroupLayer = null;
    var tileUrl = getTileUrl(boundaryId, districtGroupId);
    var districtsToShow = getDistrictsToShowUrl(boundaryId, districtGroupId);
    console.log("URL: " + districtsToShow);
    $.getJSON(districtsToShow, function (data) {
            $.each(data, function (index, district) {
                districtsToOverlay[Number(district.id)] = true;
                console.log("Can show district: " + district.id);
            });
            console.log("All visible district overlays: " + Object.keys(districtsToOverlay).sort());
            districtGroupLayer = new L.TileLayer.MVTSource({'url': tileUrl,
                                 clickableLayers: null,
                                 style: getDistrictGroupLayerStyle,
                                 subdomains: eeSubdomains,
                                 zIndex: 20000});
            map.addLayer(districtGroupLayer);
            districtGroupLayer.setStyle(getDistrictGroupLayerStyle);
        }
    )
};

`

[apollolm]

Hi Julie - I haven't looked at this code in a very long time. It could be a threading issue, but it may also be a caching issue? For example (if memory serves me), once a particular feature has been styled, it will hold on to that style unless you specifically force it to refresh the style (I think using setStyle()).

Sorry I'm not more help - I'm just an old manager nowadays...!

[JulieGoldberg]

I am calling this on every feature. It just seems like it's skipping features. As if the check only got called only in one thread or something like that. But that doesn't really make sense either, because I get the same behavior every time I reload a page.

Is anyone else still actively using this library?

[Iguane42]

Hello,
I just encountered the same issue, and found a solution. Actually, the style function is meant to be called only time per feature. In order to do this, MapboxVectorTile saves the id of the feature to remember the styles were already applied to it. To get the id, it uses this default function :

Util.getIDForLayerFeature = function(feature) {
  return feature.properties.id;
};

In my case, there is no "id" property in my feature. You might have the same problem.
You can override this function by adding it to the options. In your case :

new L.TileLayer.MVTSource({
    'url': tileUrl,
    clickableLayers: null,
    style: getDistrictGroupLayerStyle,
    getIDForLayerFeature: YourValidIdGenerationFunction,
    subdomains: eeSubdomains,
    zIndex: 20000
});

Where "YourValidIdGenerationFunction" is a function that produces a unique id for each feature, but always the same for a given feature.

Hope this helps someone, I guess Julie Goldberg must have found a solution now...