Customize Marker in Map (Solved with HTML)

I´d like to customize the marker in the map. The markers are dynamics and are showing the profile picture of a user but I need to customize the size and shape of this marker.

I can´t upload the profile picture as a circle or rounded because this image is used to others purposes. Any idea how can I do this customization?

1 Like

Hmm :thinking:

Not sure if this is what you were looking for. Just one idea. I’m sure there might be others. Maybe just create another field that holds the small quality circle photo separately. :man_shrugging:t2:

I did it already. I tried to copy the profile picture with a rouded shape but still gets the squared picture because in the data ir squared.
I use the croppie plugin to upload the images. I´m trying to figure out if I can upload the same picture with two different shapes.

Does anyone know if this is possible?

1 Like

Hey @ezduriez :wave:

Not sure if you figured this out yet but I wanted to show you an example of what this would look like. I hope this is what you were going for.

Editor: 805testapp42 | Bubble Editor


Hope that helps! :blush:


For All Your No-Code Education Needs:

I already figure it out. But I´ll take a look at your solution.

Thank you!


I’m having the same issue.
How did you make the images round?

Thank you

For some reason it´s not saving circled. It saves, but there´s a white background. And all my backgrounds are none.

Sem título5

1 Like

I´m trying to use the J805´s solution. I think it´s gonna be easier for you.
I used a HTML to solve but somebody helped me with this.

1 Like

I found a solution. Change format to png.

1 Like

Yeah. Just change the format to png like @pedrodsabugueiro said. Check out the demo again. :blush:

1 Like

You´re right! Thank you all folks!

1 Like

Btw, have you found a way to resize the images on the map?
The default mode seems too large, specially when the app is accessed through mobile.

I did using a HTML element but my markers are clickable and it´s not working properly. The clickable area gets out from the marker when zoom in or out. I need to find another solution to resize.
If your markers aren´t clickable it might work for you.

1 Like

Try this to resize and let me know if it works?

  1. Set an ID attribute to the Map
  2. Insert an HTML element with this code: check the image below (you need to open and close the code with style)
div#Meumapa>div>div>div>div>div>div>div { width: 35px !important; height: 35px !important; } div#Meumapa>div>div>div>div>div>div>div>img { border-radius: 35px !important; width: 35px !important; height: 35px !important; }

1 Like

Thank you, will try it!

It does make the icons smaller, but when the map is zoomed in or zoomed out, the icons move out of place.

Could there maybe be a way to resize images on upload and not on the actual map?

Check this link. It seems the markers gets smaller when you run outside the test mode.

It´s still not working for me. I removed the HTML because it was not getting the right position in map.
Just released the live version and the markers are sooooo big as you can see below.
Any idea to solve?

Yo @ezduriez - just wrote up a quick post on formatting custom map markers!