Interactive Map Selection

[nevetssteven120]

Hey Everyone,
I’m working on an interactive map-based selection system in Bubble, where users can click on buildings (like “Car Showroom” or “Repair Shop”) to select and highlight them (please see attached image). Here’s how I want it to work:

1. Users click on a building (a shape on the map).
2. The building highlights visually (e.g., background changes color).
3. A custom state updates with the name of the selected building.
4. Clicking the same building again unselects it (removing the highlight and clearing the custom state).

Here’s my current setup:

1. Custom State:
   Name: SelectedShape
   Type: text
   Attached to: The parent element containing the map and shapes.
   Default Value: Empty ("").

2. Workflows:
   Workflow 1 (Selecting a Building):
   Trigger: When a shape (e.g., Car_Showroom) is clicked.
   Action: Set SelectedShape to "CarShowroom".
   Only When: SelectedShape is not "CarShowroom".

   Workflow 2 (Deselecting a Building):
   Trigger: When the same shape is clicked.
   Action: Set SelectedShape to "".
   Only When: SelectedShape is "CarShowroom".

3. Conditional Formatting:
   Condition: When SelectedShape is "CarShowroom".
   Appearance: Background color changes to blue, and opacity is set to 100%.

The Problem:

1. The custom state doesn’t seem to update consistently when clicking the shapes.
2. The conditional formatting doesn’t trigger reliably.

I’ve double-checked the workflows and conditions, but it still doesn’t work as expected.

Questions:

1. Are there any common issues or conflicts I might be missing in setting custom states and conditional formatting for shapes?
2. Is there a better way to handle selection and highlighting of multiple shapes on a map?
3. Has anyone built a similar system in Bubble? If so, can you share any tips or resources?

Any help or guidance would be greatly appreciated! Thanks in advance.