Is it possible to use a custom Mapbox style in Bubble?

[jakem1331]

Hey guys, I have the Mapbox plugin from Zeroqode and have gotten it to work well using the present templates of Streets, Outdoor, Light, Dark, etc:

However, there is also a “custom” option, to which I am not sure how to implement.

When creating a custom Mapbox in their studio, once it is published, they give you a custom access token and also a style URL.

I assumed the token is supposed to be added in Bubble’s plugin settings, so I have my own token as the first API key, which worked when I wasn’t customizing anything, then the new custom token in the “API Key - dev.” category…

However, it isn’t working. The map is no longer loading as it was with a preset style. Do you guys know if custom styles are possible with the Zeroqode plugin?

adding @levon, thanks!

[jakem1331]

PS, there is an option within the workflow to add what I assumed was the “style URL” Mapbox provides, but that didn’t work either:

[ZeroqodeSupport]

Hello @jakem1331

Thanks for reaching out!

To answer your question, yes it is possible to create a custom style using MapBox Studio and use it with Mapbox plugin.

Here’s a quick guide:

1. Go to Mapbox Studio (https://studio.mapbox.com/) and create your style.

2. Make the style public, by accessing the menu

3. Copy the Style Url in the clipboard to use inside the workflow action

4. Paste the URL inside the Custom Style field, and be sure to choose the Style Move for the Mapbox element map

Add a small pause before the action to set the style.

Now with this action you can change the style of your Mapbox element map.

Here’s a video demo: https://www.loom.com/share/f7cad90d06d64631bcff8fda43801e1b

Hope this helps.

Regards,
Zeroqode Team.

[jakem1331]

Thank you so much! The pause did the trick! I had no idea that was a workflow option. I appreciate it.

[philledille]

Hi @ZeroqodeSupport,

I’m having trouble getting the style to work. I do the style change on a button click and I have a delay before setting it. I seem to load the style (the map colour changes), but the roads are gone. In the MapBox style editor, the roads are there.

Thoughts I’m having:

• Do I need to in MapBox choose more options when setting up the key? (There are public and secret ones.)
• We use different keys for the MapBox plugin and the style.

Thanks, Peter

[ZeroqodeSupport]

Hello, @philledille
Thanks for using our plugin.

Firstly, please allow us to provide you instruction for creating a custom style:

1. Go to Mapbox Studio (https://studio.mapbox.com/ ) and create your style.
   

   

2. Make the style public, by accessing the menu.

3. Copy the Style Url in the clipboard to use inside the workflow action.

4. Paste the URL inside the Custom Style field, and be sure to choose the Style Move for the Mapbox element map.

Add a small pause before the action to set the style.

@philledille

• Do I need to in MapBox choose more options when setting up the key? (There are public and secret ones.)
• We use different keys for the MapBox plugin and the style.

Please note that you should use the API Key: https://docs.zeroqode.com/plugins/mapbox-maps-plugin#docs-internal-guid-26b405d8-7fff-2328-8d37-d2ab27f11247

Also, in case if this instruction will not help you, can you please share with us the screenshots of your current settings or the screencast, where you reproducing the issue.

Looking to hear you soon.
Regards,
Zeroqode Support Team

[sjeftijssen]

Hi @ZeroqodeSupport ,

Very cool plugin. I am excited about the potential. Unfortunately I am running into a few issues (I wrote directly to your support email as well but figured maybe here it is better so it helps the community as well):

1. It would be amazing if the following states could be exposed to be able to store them in my database: Zoom, Pitch, Bearing (I realise that Zoom might not be possible and that one is ok since I can create my own UI for that to make sure it is always in line with the map, but for Pitch and Bearing I can’t disable it on the map it seems with the plugin so I have no way to know the value of that after a user interacts with the map is that correct?)

2: Set Center of the Map action seems to misbehave a bit. The latitude I am feeding in is 37 but on page load with only action being to set the center of the map it sets the latitude to 8?

3: Adding a list of markers action doesn’t seem to work. To test I added a BDK map on the same page with the same exact list and that works as expected so the data should be ok. I also just tried it on your own demo page and even there adding a list of markers throws an error: https://zeroqode-demo-08.bubbleapps.io/mapbox-map

With the above 3 points sorted this will be absolutely amazing.

Look forward to hearing from you and for now wishing everybody a great weekend,

Sjef

[ZeroqodeSupport]

Hello, @sjeftijssen
Thanks for this request and details.

Please find below our responses to each of your questions:

@sjeftijssen

It would be amazing if the following states could be exposed to be able to store them in my database: Zoom, Pitch, Bearing (I realize that Zoom might not be possible and that one is ok since I can create my own UI for that to make sure it is always in line with the map, but for Pitch and Bearing I can’t disable it on the map it seems with the plugin so I have no way to know the value of that after a user interacts with the map is that correct?)

Please allow me to note that the Zoom, Pitch, and Bearing are the parameters of the "Fly to " action. So, unfortunately, they can not be saved separately in the DataBase.
You can enter them through required action, but can not output and save them.

In order to be more precise, can you please let us know for which needs you are willing to store these parameters? It will help us to deeply analyze this request.

@sjeftijssen

: Set Center of the Map action seems to misbehave a bit. The latitude I am feeding in is 37 but on page load with the only action being to set the center of the map it sets the latitude to 8?

Please let us know where exactly you try to run this action? It will be perfect if you will share some screenshots for this case with us for better understanding.

@sjeftijssen

Adding a list of markers action doesn’t seem to work. To test I added a BDK map on the same page with the same exact list and that works as expected so the data should be ok. I also just tried it on your own demo page and even there adding a list of markers throws an error: https://zeroqode-demo-08.bubbleapps.io/mapbox-map

Thank you for reporting this issue! Our developer team already checking it and we will let you know once it will be done!

Looking to hear you soon.
Best regards,
Zeroqode Support Team

[sjeftijssen]

@ZeroqodeSupport thanks so much for taking the time for a detailed response.

Below my thoughts item by item:

1. Zoom, Pitch, Bearing. I would like to be able to turn the interactive map into a static image after the user makes their changes. For that, I was planning on calling the Mapbox Static API when the user saves the edits. To make the map look the same I would need to know these settings. From their documentation (and playing around with javascript) it doesn’t seem very complex to pull these parameters (using getBearing() for instance). I am not sure what the Fly to has anything to do with this? It might use those inputs as well but why is that preventing these methods?

2: Really the one thing I am looking for is to just show the map at a certain location when the page loads instead of now having to navigate to that on-screen first (by using Fly To). If you have an example of this working with your plugin on a page I can just copy that (but the one on your demo page also navigates to the point that is set as part of navigation instead of loading on the center of the map). If you can set it with center map action and share that set up I can easily copy.

3. Thanks.

For my use case I basically won’t be using any of the navigation tools. Main features:

1. Have users be able to switch style of the map.
2. Have users be able to add locations with a custom icon.
3. Have users be able to drag icons on the map.
4. Have users be able to change zoom, pitch and bearing.
5. Have users save that map as an image after they are done.

Thanks,
Sjef

[sjeftijssen]

@ZeroqodeSupport

The other thing that would be amazing and would make the plugin immediately many times more valuable imo would be if somehow we could address the plugin map in javascript?

That way we could use the standard mapbox documentation and capabilities to do all the things that the plugin might not yet support.

I tried to have a go at this but it seems that the div ID keeps changing every time the page loads.

This is definitely above my level of technical knowledge but it would be very cool if that somehow would be possible.

Sjef

[ZeroqodeSupport]

Hello, @sjeftijssen
Thanks for the provided details

@sjeftijssen

2: Really the one thing I am looking for is to just show the map at a certain location when the page loads instead of now having to navigate to that on-screen first (by using Fly To). If you have an example of this working with your plugin on a page I can just copy that (but the one on your demo page also navigates to the point that is set as part of navigation instead of loading on the center of the map). If you can set it with center map action and share that set up I can easily copy it.

As I have understood your request (hope I have the correct understanding), you would like to be able to freeze the map on a certain address/point on the page/map load.

I’m happy to let you know that currently, we are working on the plugin improvement that will enable the freeze feature in the map- freezing of the map, which disables zoom, scrolling, etc, and displays only one address as the center of the map. Users will be able to change the map’s Address/Zoom, etc by using the “Fly to” action.

Answering your previous question, on how to save the Zoom, Pitch, and Bearing values into the Bubble DB (returned as the plugin’s state) - as per the fact these values you have to identify manually while using the Fly To action, you can create a custom state that will include the dynamically entered actions from the UI side (using inputs elements, etc), and use it as per your user case (save into DB, use in the Fly To action, etc).

At the moment no plugin state will return the Zoom Pitch and Bearing parameters, because the current plugin setup was not designed to use these states as returned values. Apologies for this inconvenience.

@sjeftijssen

The other thing that would be amazing and would make the plugin immediately many times more valuable imo would be if somehow we could address the plugin map in javascript?

I’m afraid, at the moment we were not planning to redo the entire plugin to work that way. But still, thank you for your suggestion.

@sjeftijssen

That way we could use the standard mapbox documentation and capabilities to do all the things that the plugin might not yet support.

Indeed, there are some options which not been implemented yet in our plugin.
However, please note that we add many of them and always working on improvements, which could be useful for all our users.

Thanks for your interest and impact.
Best regards,
Zeroqode Support Team

[sjeftijssen]

@ZeroqodeSupport

That all makes sense.
Thanks for the quick and detailed response as always.

Sjef

[ZeroqodeSupport]

Hello, @sjeftijssen

You are always welcome!
Please be free to contact us in case of additional questions will appear.

Best regards,
Zeroqode Support Team