Develop component of Geo Map with Circles with React.js Typescript

Project Descriptions are following. Circles with given geopoints (longitude/latitude) as central point and a color-filled fixed radius should be drawn on a geographical world-map. Within the circles numerical values ​​are displayed. Depending on these values a linear color gradient should be applied to the circle background color. Two HSL color ranges Turquoise for positive values range [0 to 900] (from light to dark) Purple for the negative ones [-99 to 0] (from dark to light) are defined for this purpose. The values will control the HSL lightness parameter. The circles should be slightly transparent (e.g. 60%/80% opacity). The density of all visualized circles (geopoints) in a view should be based on the zoom level. Close geopoints are to be hidden or better not to draw at all on the map. Another alternative might be to combine them and build average values. Except at the highest (most detailed) zoom level. At this zoom level all available circles should be shown. My budget is $50. If you are over that, it will be ignored.