📍 New Plugin: Beautiful Maps - Mapbox

[a.villabruna]

Hi Alex - me again! I wanted to check if you have any ETA on the “Change Icon for Clicked Marker” event (no pressure )

And then secondly, I would love a state to know which Marker IDs are in the viewport of the map. I would like to build something like an “Airbnb-style” map and then filter based on what the users sees. I know that the Zeroqode plugin has that state, but I just like your Plugin better

Cheers,
Adrian

[alexcooney5]

Hey @a.villabruna - thanks for checking in!

@a.villabruna

I wanted to check if you have any ETA on the “Change Icon for Clicked Marker” event (no pressure )

I did start this and made a good bit of progress, but there’s quite a few edge cases that I need to make sure the action works with. I can’t guarantee a specific ETA, but hopefully I’ll get it out sometime over the next 1-2 months.

@a.villabruna

And then secondly, I would love a state to know which Marker IDs are in the viewport of the map. I would like to build something like an “Airbnb-style” map and then filter based on what the users sees.

You can figure out which markers are visible on the map (and get their associated marker IDs) by using the 4 exposed states outlined in the below post:

New Plugin: Beautiful Maps - Mapbox

Hi @melqar, I’ve released a new version of the Beautiful Maps - Mapbox plugin (version 1.15.0). The Mapbox Map element now has 4 new exposed states that allow you to get a Map’s bounds: North East Lng North East Lat South West Lng South West Lat These exposed states get updated each time a map shifts - EG see below: [Mapbox - Bounds] You should be able to use the bounds to determine which of your markers are currently visible on the map itself. You can also see an example in the ‘Getting a…

You basically need to do a search for all locations where the lng/lats fall within the bounds given by these custom states. Let me know if that makes sense or if I can clarify further

[a.villabruna]

Thanks for the update, looking forward! I got the search within bounds to work as well

[alexcooney5]

Beautiful. Thanks for confirming @a.villabruna and will keep you posted on progress with the ‘Change Icon for Clicked Marker’ update!

[a.villabruna]

It might be interesting for others to know how I implemented this. There is some complexity due to the crossing of international date lines. See below screenshots with the scenario where the Map bounds are crossing datelines (with the advanced filter), and where it doesn’t cross datelines.

[alexcooney5]

This is great @a.villabruna! Thank you for sharing

[alexcooney5]

‘Remove Single Marker’ action - November-24 update
Just released a new version of the Beautiful Maps - Mapbox plugin that lets you remove a single marker from the map:

You can do this via the new ‘Remove Single Marker’ action.

Any questions just let me know

[franaccess.ksa]

Hi, thank you @alexcooney5 for this plugin
I am facing an issue with the directions functionality. I need the starting point (A) to remain fixed on the user’s location on the map, while allowing the user to control the endpoint (B) and set it on the marker of their choice. Is it possible to make this feature work as described

[alexcooney5]

Hi @franaccess.ksa, thanks for using my Mapbox plugin and welcome to the Bubble forum

I’m afraid my plugin doesn’t currently support this functionality. Sorry about that.

I may look to add it in the future, but I can’t promise when or if I’ll be able to do that.

[franaccess.ksa]

Thank you so much for your response and for your great work on this plugin! I truly appreciate your engagement and efforts.

I sincerely hope you can consider adding this functionality in the future as it would be a fantastic upgrade to the map and take it to the next level. I was planning to use this plugin for a large project since it has all the features I need. Unfortunately, due to the current limitation with dynamic marker interaction, I’m unable to proceed with it.

It would mean a lot if you could add this feature, as it would make a huge difference for projects like mine. Thank you once again for your amazing work, and I’m hopeful you’ll be able to implement this in the future!

[alexcooney5]

Thank you for the feedback @franaccess.ksa - I appreciate it would be a useful feature for your project.

I’ve made a note of your request and will let you know if I decide to add it to the plugin.

PS - you can also keep up to date with our plugin product releases by signing up for our monthly newsletter. It’s where we announce all product releases/updates

[alexcooney5]

I’ve wanted to add a ‘Selected State’ functionality to the Beautiful Maps - Mapbox plugin for a while now, but was trickier than anticipated.

Had a bit of a breakthrough today and realised it should be possible to implement this without any actual plugin update!

I’ll do a full write-up of it next week, but you can check out the editor for the above example here if you’re interested in the meantime

Still have a bit of work to do on what happens when users double-click icons, but it’s coming together!

cc @a.villabruna @zico.gaeffke

[farouk.zemmouri]

Hello,

Thank you for this great plugin

Befor going through all the great content, i assum it is possible to add markers for differents adresse plus the current position of the user ?

Thanks in advance for your answer

[alexcooney5]

Hi @farouk.zemmouri, thanks for the kind words!

Yep, you can absolutely add markers for different addresses.

For the current position of the user you can either:

• Add a marker to represent the user (using the ‘Add Single Marker’ action) - this will not update automatically if the user changes location
• Or use the ‘Add Geolocation’ action on page load to trigger a beacon that will update with the current user’s position - see below
  

Any other questions just let me know

[yash.modi]

Great!

I’ve successfully used the Mapbox plugin, and it works perfectly. However, when I wrap the app using Natively BDK, the map fails to load. Can you help me find a solution?

[alexcooney5]

Hi @yash.modi, I saw you also posted this question on a thread related to another Mapbox plugin.

Just to confirm, is it my Beautiful Maps - Mapbox plugin you’re using?

Quite a few people who use this plugin have successfully used it in wrapped apps, so I’m surprised you’re having issues with it (if it is indeed my plugin )

[alexcooney5]

How to add markers to a map (video tutorial) - January-25 update
Just released a video tutorial on how you can add markers to a map using the Beautiful Maps - Mapbox plugin.

How to add markers to a map - Bubble.io tutorial

Any questions just let me know

[alexcooney5]

Detailed Documentation - February-25 update
Just released new detailed documentation for the Beautiful Maps - Mapbox plugin.

The plugin already came with a pretty comprehensive demo app, but hopefully this documentation is also of use to people

Any questions just let me know.

Welcome | Beautiful Maps - Mapbox

[thesaltiestsalsa]

Greetings!

I’m building what I assumed would be a straightforward GIS app for one of our customers, but I feel like I’ve hit a wall. What I’m trying to do is simple -

1. User draws a new feature while in draw mode. This can be either a polygon or a point.
2. Once the feature has been drawn, a workflow is triggered, setting the value of a custom state that determines the visibility of a form overlay. In this step, the value is set to “true” thus making it visible to the user. With the form visible, the drawing controls should be disabled so that there can be only one geoJSON per record.
3. Once the user completes the form, they click a button and a new record or “thing” is created that contains the form data along with the point/poly geoJSON.

I’m currently held up on step 2.

Attempted workarounds:

Using the “standard” Mapbox plugin, I was able to accomplish this by using the “A MapBox Map Polygon is Drawn” event as a trigger. However, that doesn’t appear to be an option in this plugin. I eventually came up with what I thought was a clever workaround - I would create a “listener” for each of the two feature types that trigger when the user creates a new feature. The idea was to check whether the map’s geojSON state (s) were empty, and use the “Clear geoJSON” event to reset the states between each iteration. While implementing this, I quickly learned that the geojSON map states hold data from the most recent drawing of that type and the data can’t be “reset” so to speak, only overwritten. Clear geojSON only appears to remove drawn features on the map, but doesn’t clear the actual states. The result is that my implementation worked flawlessly… once.

I also tried setting the initial value of an input to reflect the map’s geojSON states to trigger a workflow when the value changed. This would typically indicate that a new feature has been drawn on the map so it seemed like a good plan, but… for some reason I couldn’t get the event to trigger even though my inputs were updating without issue. The only way I could get this to work was by manually changing the values myself.

If all of that sounds like a mess, it’s because it is! I could elaborate further, but this post is already starting to look like an essay. And besides, the word “geoJSON” has to be the most annoying word to type, and I’m not sure I can take much more of it. It’s entirely possible that these hurdles stem from user-error on my part, so if any experienced bubble/mapbox devs out there can tell me that I’m an idiot and that there’s an existing solution, I would welcome any input!

Thanks in advance and let me know if I need to clarify anything.

Cheers.

[alexcooney5]

Hi @thesaltiestsalsa, thanks for your interest in my plugin!

The Beautiful Maps - Mapbox plugin has an event called ‘Map is Drawn’ that gets triggered whenever a user draws on the map.

@thesaltiestsalsa

Using the “standard” Mapbox plugin, I was able to accomplish this by using the “A MapBox Map Polygon is Drawn” event as a trigger.

I’m not familiar with the inner workings of the other Mapbox plugin you tried, but I suspect it works in the same was as their ‘A MapBox Map Polygon is drawn’ event.

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