Advanced Mapbox Plugin Documentation

Set up database

Set up the map

List of workflows and events

Prepare app for geojson data adding

Prepare app for interactive use

Developer FAQ

Explore

Prepare app for geojson data adding

With all information discussed, it’s time to start working with the plugin

⁠

Due to how Mapbox and Bubble work separately they have quite a specific way to work together.

But nothing to worry about! Everything is pretty simple and straight forward when you get the hang of it.

We’ll considered that you already have your database set up and have the map ready and begin from there.

If you haven’t done that already you can learn how to do that in

Set up database⁠

and

Set up the map⁠

⁠

Preparation

To prepare the app with the ability to add any element on the map and save it into bubble database, we will need input fields for the data (coordinates and image) and a button that starts a workflow, triggering the actions.

In this example we will use simple input fields for coordinates, a dropdown menu to choose the marker image and 3 buttons to add a marker, a line and a polygon.

Note: You are free to use any way to input the data in actions and any way to trigger those actions. This tutorial is one example to get you to know how the actions work and in what order they need to be triggered in.

⁠

Tutorial

First we will set up all the needed inputs and buttons:

⁠

Every button text and input description talks for themselves.

For this example we use:

● Simple inputs for coordinates or colors

● Dropdown menu to choose the image for the marker with there options:

⁠

● A special input for polygon fill to only allow decimals from 0 to 1:

⁠

● 3 buttons to add each element.

Next we’ll add 2 images straight into the database, to be able to choose one of them for the markers:

⁠

Now we’ll start the main part: workflows!

Create an event for each button:

⁠

In each event we’ll add 2 actions - one to take data from inputs and create a copy of the element in the database and the other to add that element onto the map.

First we start with a marker, add 2 actions, one to create a marker with input values and the other to draw marker on the map, you can find the custom actions of the plugin under “element actions”:

⁠

On step one, add all the values taken from input fields into the marker creation:

⁠

We are using a fixed title, but you can also have a dynamic value there.

On step 2, where the marker is actually added on the map, we’ll insert values from the result of marker’s creation:

⁠

It is important to use the unique ID of the marker as the map marker’s ID, to be able to link them together later for deletion or any other use case inside the bubble app. Currently there is no other way to link database values to elements of the map.

We repeat the same things for polygons and lines:

Line actions:

⁠

Line creation in the database and line addition to the map:

⁠

Polygon actions:

⁠

Polygon creation in the database and addition to the map:

⁠

And that’s it! as long as you have the element’s creation in the database and addition to the map right next to each other and set up in this way, you’re good to go!

Let’s try adding something to the map:

We’ll add a marker with chosen image in the coordinates of [0,0]:

⁠

After pressing the “Marker image” button a marker appears on the map with our set values:

⁠

Also the marker is added in the database:

⁠

Let’s try adding a line:

⁠

We fill the appropriate input fields with the needed info

NOTE: there is currently no error handling, so the coordinates have to be written in the exact way shown in the picture, being 2 numbers inside [] separated by commas like shown in the picture. The color also has to be written exactly in a HEX color of the code (unless you use a plugin that does that for you). If these values are incorrect, they will be saved in bubble database and you’ll get a pop up error each time you reload the page, also the element will not appear.

After pressing “add line” button we can see a line appears with chosen coordinates and color:

⁠