Register Trees - Drawing mode does not work on local system

[mohitb35]

#1856 (comment)

Reproducing the Issue

1. Run the project locally (develop branch).
2. Go to Register Trees, and enter a treecount greater than 25.
3. Click on the Draw Map button that appears over the map.
4. Drawing controls are not visible on the map, and the user is unable to draw a polygon.
5. What it should appear like - https://www.loom.com/share/77e4ff8b61844c32b4ce524e1965bbaf?sid=a36851c7-23e6-4fe9-9a6d-4a384f803d1c

This issue is seen only while running on the local system, once deployed the code works fine.

[mohitb35]

I did a bit of digging, and I'm not sure if the react-map-gl-draw package is working correctly any more. It has not been updated for 4 years, and some of the issues we're facing may be related to it not playing well with react 18.

The functionality seems to work while deployed, but not locally suggests this as well - I checked if it worked with reactStrictMode=false in next config and the draw controls were seen (and worked properly)

We may want to find an alternative.

These comments can also get addressed at that time

• feat:types for map #1856 (comment) > avoid casting drawControl as any
• feat:types for map #1856 (comment) > Resolving warning Property 'changeMode' does not exist on type 'Control'.ts(2339)
• feat:types for map #1856 (comment) > Draw controls do not work

[norbertschuler]

Best of course would be to have it replaced, but that would need some refactoring work. There is a thread in Slack about using and replacing https://github.com/alex3165/react-mapbox-gl at https://planetfoundation.slack.com/archives/C02393H3GDC/p1687670228689869 as well which is related to this:

As it still seems to get actively supported and developed I would of course suggest using only more https://visgl.github.io/react-map-gl/docs which maybe also allows to use https://github.com/MapLibre/maplibre-gl-js below. But I assume refactoring the current usage of https://github.com/alex3165/react-mapbox-gl will require quite some work.