📍 New Plugin: Beautiful Maps - Mapbox

[jake.berry]

@alexcooney5

Hey Alex,

Does the plugin have ability to draw a line as the crow flies from point to point?

Jake.

[alexcooney5]

Hi Jake, yes absolutely. You can check this out for yourself ‘Drawing on a map and saving coordinates’ section of the plugins demo app.

Hope that helps and if you’ve any other questions just let me know.

Alex

[francesca]

I would love to learn how to use the drawing mode. Do you have any tutorials for it?

[alexcooney5]

Hi @Francesca, thanks for your interest in my Beautiful Maps - Mapbox plugin!

The plugin’s demo app has a pretty detailed section on how to use drawing mode - it’s the section called Drawing on a map and saving coordinates.

The plugin documentation also has a section that goes through drawing mode.

I recommend checking out both of those resources first. If you have any specific questions after that I’m happy to help

[francesca]

Hi Alex,

Thank you for your quick response. I’ve managed to look at the map and somewhat built a first version of the map which allows the user to draw and shape and save the GeoJSON coordinates to my database. What I am struggling to do is to translate these coordinates into square meters and meters the same way you have it in the demo (i.e. once the user has drawn the shape, how do I show the square meters of the polygon area or the meters of the line drawn?)

Please let me know if you have any information to help me do this.

Thank you

Fran

[alexcooney5]

Hi @Francesca, the MapboxMap element that comes with the plugin has 3 exposed states:

• Area (Meters) - for Polygons
• Last Line Drawn Length (Meters) - for the most recent line
• All Lines Drawn Length (Meters) - for all lines drawn

You can access these exposed states via the 'Insert Dynamic Data button.

Hope that helps

[goods2map0415]

Subject: Feature Request: Support for Marker Clustering in Beautiful Maps Plugin

Hi @alexcooney5 ,

First of all, thank you for building the Beautiful Maps plugin—it’s been a great addition to our Bubble project.

We were wondering if you would consider adding support for marker clustering in a future update. This feature would allow markers that are close to each other to be grouped into a single cluster icon, showing the number of markers in that group. It would greatly improve the visual clarity and user experience when displaying a large number of map points.

A possible implementation could follow the approach used in Mapbox GL JS with cluster: true and point_count properties.

We believe this enhancement would be very valuable for many users managing multiple markers on the map.

Thanks again for your great work, and looking forward to your thoughts!

Best regards,
Moby

[alexcooney5]

Hi Moby, thanks for using my plugin and for the kind words.

I’ll be honest I’d love to add in the clustering feature, but it’s quite a complex feature (given it interacts with other actions) and isn’t as simple as adding a few extra parameters. I’ve a pretty jammed product roadmap for the next while so I’m unlikely to be able to add it in the near-term.

Sorry about that.

Not ruling out adding it in the future, but I just won’t have time in the near-term.

[azarroyodev]

Hi, Alex!

Is there a way to when a marker drag ended action happens and latitude, longitude and unique id is captured it also retrieves the address (street name, number, city…)?

[goods2map0415]

Hi Alex,

Thanks so much for the quick and honest reply — I really appreciate it!

Totally understand that clustering is a complex feature and that your roadmap is full right now. I’ll keep an eye out in case it becomes available in the future. In the meantime, thanks again for creating and maintaining such a great plugin!

All the best,
Moby

[alexcooney5]

Appreciate the understanding Moby.

Will be sure to keep you updated and if you’ve any other questions just let me know.

[alexcooney5]

Hi @azarroyodev, yep I’ve just released a new version of the plugin that lets you do this.

1. Add a custom state somewhere on your page where you can set the address

2. Use the ‘MapboxMap Marker Drag Ended Event’ to trigger setting the custom state

3. Set the custom state value using the ‘Mapbox - Get Address from Coordinates’ API Call (found under ‘Get data from an external API’)

IMPORTANT NOTE: When creating your Mapbox Access Token I always recommend restricting it to the URL that you’re using for app. However, this won’t work for the ‘Mapbox - Get Address from Coordinates API Call’ as it’s effectively being made from Bubble’s own server. You’ll need to create a separate access token for this specific call and add it to the ‘API Key’ and ‘API Key - dev.’ fields:

I’m showing the Token above because it’s restricted to my app’s URL. I’m not showing an API Key as it is not - but you will need to add an unrestricted access token to the API Key fields to use the Get Address from Coordinates call

At the end of all that, you should be able to get the location of any marker you’ve dragged:

cc @baxt.be and @zico.gaeffke I know you guys enquired about this feature before

[azarroyodev]

Hello! Thanks for the explanation, I’ve done everything and it worked. Just need help with something that is happening with me.

I’m from Brazil and the address it retrieves from latitude and longitude appear to be wrong. Every time I dragged the pin in my city, it fills the state with totally wrong address, another city, another number, etc.

When I move the pin to São Paulo - Brazil, in any street, it just fills the state with São José dos Campos, Brazil that is completely different city.

I noticed that the longitude and latitude numbers are right, but the address does not have relation to them

[alexcooney5]

Would you be able to share some screenshots of your setup @azarroyodev?

Specifically, would you be able to take a screenshot of the ‘Get Address From Coordinates’ API Call?

[alexcooney5]

Minor change to ‘Fly to Location’ action - May-25
Released a small update today (based on user feedback) for the ‘Fly to Location’ action. Previously, if you ‘flew’ to a marker and showed a popup you would have to close the popup via the close button.

You could not close the popup by clicking elsewhere not the map.

Today’s update means the popup will now be exited if a user does indeed click elsewhere on the map:

This feels like the more natural behaviour and it also makes it consistent with the ‘Add List of Markers’ action.

Any questions just let me know

[azarroyodev]

Hello, Alex! There’s the screenshots:

Custom State created:

Custom State configured

Moved a Pin to another road on the same city: “Analândia, São Paulo (SP) - Brazil”. It retrieves the latitude and longitude right.

Searched for coordinates on Google Maps and they are right

But the property full address found is wrong. Aguaí, São Paulo (SP) - Brazil is another city!

[francesca]

Hi Alex,

Thank you for your help below, the plugin has been working really well. I have a question though regarding the controls UI. I am using the map to allow users to draw areas and calculate the sqm. At times the users have to draw different areas within the same map so they have to select the polygon tool multiple times. It is very hard to tell whether the polygon tool is selected or not as the selected state is a very subtle shade of darker grey compared to the unselected one. So a lot of times users cannot draw and drop out because they don’t understand that the polygon tool is not selected. Would it be possible to edit the controls colours so I can make it very obvious whether the polygon tool is selected or not?

Thank you

Francesca

[alexcooney5]

Thanks for this @azarroyodev - will try and recreate this on my side tomorrow and get back to you with an update.

[alexcooney5]

Hi @Francesca, good point.

I agree that the default ‘selected’ color is not very obvious

The easiest way to edit the control color is by using some custom CSS. You can add a HTML element anywhere on your page and then add the below snippet:

<style>

.mapbox-gl-draw_ctrl-draw-btn.active {
    background-color: #0070D7;
}

</style>

You can change the #0070D7 to whatever hex code you want. You’ll end up with something like this:

Hope that helps.

[francesca]

Thank you so much!