Map element, using customized icon based on data field?

[handsfree]

Hello,

I want to show three different icons as map markers.

For example:

Cars
Motorcycles
Gas stations

Upon registration on the website, every user have to click on a radio button. They have to check either if they have a car, motorcycle or Gas station.

The map will then display markers as either Car, Motorcycle or Gas station. Is this possible using the Data dependent field?

Or is it possible to have multiple customized icons, based on data field?

[fayewatson]

Yes, this is definitely possible in Bubble.

To set this up, after a User selects a car, motorcycle, or gas station in the registration process, the workflow would also need to save that icon image file, as the value for the Icon image field (type: image, list: no). It would be best to have these images be .svg. Here is an example of the data structure (if the Users were registering a Place)

Then in the map, you would have similar settings to:

In the above property editor, I selected that the Icon is data dependent. This tell Bubble to dynamically display the icon marker which is associated with that Place.

If any of this was confusing, feel free to share a link to your app in the editor and I can definitely assist with setting this up.