Customize Marker in Map (Solved with HTML)

ezduriez · 2022-07-29T19:22:56.914Z

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.

Sem título407×635 88.6 KB

Sem título1355×859 17.5 KB

Sem título2341×853 16.1 KB

Sem título3349×863 16.3 KB

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?

J805 · 2022-07-29T19:28:13.461Z

Hmm

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.

ezduriez · 2022-07-29T19:33:45.175Z

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?

J805 · 2022-08-04T21:53:39.824Z

Hey @ezduriez

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

Preview: https://805testapp42.bubbleapps.io/version-test/image_uploader_double?debug_mode=true

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Coaching
eLearning Hub Now FREE Access Too!
Video Tutorials
No-Code Blog
Subscribe to Free Videos on YouTube

ezduriez · 2022-08-05T18:43:41.743Z

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

Thank you!

pedrodsabugueiro · 2022-08-07T09:13:02.153Z

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

Thank you

ezduriez · 2022-08-07T22:07:49.894Z

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

Sem título41399×821 49.1 KB

ezduriez · 2022-08-07T22:09:31.838Z

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.

pedrodsabugueiro · 2022-08-07T23:11:59.628Z

I found a solution. Change format to png.

J805 · 2022-08-08T00:24:42.693Z

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

ezduriez · 2022-08-08T00:31:10.491Z

You´re right! Thank you all folks!

pedrodsabugueiro · 2022-08-08T14:51:34.897Z

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.

ezduriez · 2022-08-09T03:05:45.700Z

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.

ezduriez · 2022-08-18T17:22:46.947Z

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

Set an ID attribute to the Map
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; }

Sem título1369×883 16.3 KB

Sem título2363×879 15 KB

pedrodsabugueiro · 2022-08-19T10:30:19.107Z

Thank you, will try it!

pedrodsabugueiro · 2022-08-19T11:06:56.047Z

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

pedrodsabugueiro · 2022-08-19T11:14:14.591Z

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

ezduriez · 2022-08-19T14:06:30.825Z

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

Smaller Map Markers? Need help

Has anyone figured out how to make the markers smaller when you upload your own icon? Right now, they are pretty massive - possibly an issue with the map zooming? Thanks! [image]

ezduriez · 2022-08-30T03:50:43.460Z

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?

Sem título765×808 174 KB

callen.hedglen · 2022-09-22T13:53:44.409Z

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

Formatting Custom Map Markers Correctly (Even Circles) Tips

Hey all, I wanted to share how I was able to save my custom map markers in a dynamic way! Problem I have business users in my app, where I wanted to show their logos on a map. These are logos they upload, so I can’t control the dimensions they upload it in. As a result, almost all of the map markers were appearing GIANT on the map. Example of this problem from an image I found in the forum: [image] Solution The key to fixing this problem is to resize your map marker image at the point whe…