Add workaround for fill-pattern by using a case expression

[planemad]

Workaround to styling polygon fill-paterns using a case expression targeting feature_id.

This is due to the limitation in Mapbox GL that does not allowing changing fill-pattern using the feature state https://github.com/mapbox/mapbox-gl-js/issues/9733

@aherreDev

[planemad]

Possible improvements:

• This will build a rather long fill-pattern expression with a condition for each row in the lockdown data. This is probably not needed since most of the rows don't need any pattern and can just use the fallback pattern

Limitations:

• Since the feature state limitation exists, it wont be possible to change the pattern based on dynamic user interactions like hover or click.

[merchantweb]

Possible improvements:

• This will build a rather long fill-pattern expression with a condition for each row in the lockdown data. This is probably not needed since most of the rows don't need any pattern and can just use the fallback pattern

Limitations:

• Since the feature state limitation exists, it wont be possible to change the pattern based on dynamic user interactions like hover or click.

The stripes are set to show on countries that have new covid cases reported, correct? There is no reason for the pattern to change on hover or click. It should only change when the time slider moves and the state of covid cases for any particular territory changes from new cases to no new cases. The pattern is meant to inform the user if covid is still around. Basically all the countries would be striped currently bc we all still have covid. As it goes away more territories will be solid. Just want to make sure we are applying the stripes according to the correct set of rules.

[planemad]

Just want to make sure we are applying the stripes according to the correct set of rules.

This PR mainly implements the functionality to set an overlay image pattern for each lockdown state.

It looks like its currently setting the hatch pattern only for lockdown status unknown (=4). The logic can be tweaked as per the needs here https://github.com/Code-for-All/lockdown/blob/8564c58b5ede743aba2d878383200543e1ca5c3c/src/components/WorldMap.js#L67-L85

[aherreDev]

@merchantweb We don't have a right implementation because the api don't give us that data, The current code just take a unused lockdown_status value (The 4) and think that means active cases, It's just a simulation

[aherreDev]

And as @planemad said we can use the click callback of the fill layer

[merchantweb]

Gotcha, I know the logic is different now with the new legend