[BUG] Legends on map widgets can stack infinitely, when changing map types in editor mode.

[UniquesKernel]

Describe the bug When creating a map widget in OpenSearch Dashboard, the legend on the map can stack infinitely high by changing an updating the map type repeatedly.

To Reproduce Steps to reproduce the behavior:

1. Go to a dashboard (I used the sample data Ecommerce Dashboard)
2. Click on 'Edit'
3. Click on 'Create new'
4. Click on 'Coordinate Map'
5. Click on a dashboard in the dialog menu
6. Click on Options
7. Switch Map type
8. Click Update
9. Repeat Step 7 and 8
10. See the legend in the lower right corner of the map begin to stack on to itself

Expected behavior Expect legend to be updated, and not starting to stack on top of itself.

OpenSearch Version OpenSearch 2.14

Dashboards Version OpenSearch Dashboard 2.14

Plugins No plugins are enabled. Simply run an instance using npm start and npm run opensearch snapshot on the 2.14 release branch.

Screenshots

Before step 7 and 8:

After step 7 and 8:

Host/Environment (please complete the following information):

• OS: Windows
• Browser and version: Chrome Version 126.0.6478.62

[joshuali925]

Thanks for reporting the issue, i can reproduce on main and 1.3 versions

when map type changes, it first removes and adds the new geohash layer here, but then seems there's some race condition in calling this function

https://github.com/opensearch-project/OpenSearch-Dashboards/blob/f443f006580808a6fa5ba40360bef3f11d893f54/src/plugins/tile_map/public/tile_map_visualization.js#L191-L208

it is called again during its async execution, resulting in appending a new layer rather than replacing it when option updates. I converted the await import to sync imports and it worked ok.

will need more research on the correct implementation with lazy loading