Weather Fronts in deck.gl

[nzahasan]

I was trying to build a composite layer to draw warm weather front, which essentially looks like this

I am using pathLayer (to draw the line) and iconLayer (to draw the half circles), I have tried the following implementation for each segment of the path

• generate icon position at a specific intervals
• calculate icon angles so that it aligns with the path

this works at high zoom level but at low zoom level the icon overlaps with each other and looks ugly;

at high zoom

at low zoom

I have tried to use the collision filter but cant get it to work properly; I am attaching the codes; help is much appreciated

package versions
"@deck.gl/core": "^8.9.36",
"@deck.gl/extensions": "^8.9.36",
"@deck.gl/layers": "^8.9.36",
"@luma.gl/constants": "^8.5.21",
"@luma.gl/core": "^8.5.21",
"@luma.gl/webgl": "^8.5.21",

codes

https://drive.google.com/drive/folders/1TToOjeMOMvwNzCVaDtm21AZhTBU7WDjT?usp=share_link