Develop a custom geo-/heatmap as react/bootstrap component

Develop a custom geomap component with React 16 and Bootstrap 4 as part of our client application. Our corporate design, all necessary color gradations as well as a standard react/bootstrap structure are provided. For test purposes we will send you a set of sample data. You are free of choosing a suitable React 16.x compatible library to enable geo-/heatmap specific features. The component itself should look similar to the appended low-fidelity mockups. There should be two different views. Geomap with Circles - 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] / purple for the negative ones [0 to -99]) are defined for this purpose (The values will control the HSL lightness parameter). - 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. Except at the highest (most detailed) zoom level. At this zoom level all available circles should be shown. Geographical Heatmap Instead of circles the values (related to the geopoints) should be aggregated and shown as heatmap above the geomap. It should be from the concept look like the attached example. General requirements: The code should be able to handle up to 10.000 geopoint/value pairs efficiently. But as mentioned on A. the map doesn’t have to draw all these points at once. Only a specific selection depending on density and zoom level has to be visualized. With these approach scrolling through the map should be able without any noticeable delay on rendering. Navigation Elements: A single button where the user is able to switch from geomap to heatmap +/- buttons to zoom-in and out (should also triggered by mouse scroll wheel) Map Design: The geographical map itself should have simple and tidy look. Only borders and names of countries, states and on higher zoom levels cities are necessary. The map should be in the background in color. (For further customization work on our side, colors, borderwidth, text and other map properties etc. should be accessible in code) The circle color ranges (see A.) are attached. They should also have some transparency (~60-80%) so that the map behind can shine through a little bit. The whole appearance should preferably fit to our corporate design. What skills are required? – React 16.x – Bootstrap 4 – TypeScript / HTML / CSS – Some experience with geo-/heatmap libraries