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

Set up database

A place to store the data is like a cozy fire place at a home, it’s a must!

⁠

Why to do it?

Mapbox together with bubble works in a set and specific way. Therefore everything needs to be set up well to avoid unwanted and unneeded issues. First step is having a good database to be able to store your data properly for later use.

⁠

How to do it?

There are currently 4 main database tables needed to connect to the map to be able to save and store markers, lines and polygons.

All of the tables need to have exact fields and their names, the name of the tables themselves can be anything.

Database tables in bubble system are called “Data types”. To add a new field to database go to “data” tab on the left hand side of the screen:

⁠

⁠

After that, thoose “Data types” in the upper navigation menu:

⁠

⁠

From there you can add the needed tables to the database.

⁠

Table 1: Marker Image

The plugin allows you to use any images for your markers on the map, that being from any generic marker images to any memes or cat pictures of your wish.

Mapbox loads images separately to get them ready to use on markers, for this reason a table is needed to store any needed images for loading.

This table needs one extra field to work. The name of the field needs to be “image” with the type “image”.

The table should look like this in the end:

⁠

⁠

Table 2: marker

Markers in mapbox are determined by the image the marker uses, it’s coordinates and an optional title text.

After creating this table, you need to add 4 extra fields.

● Field “image” with a type of “Marker image” (a link to the table 1 created that lists all the images)

● Field “lat” with a type “number” for noting the latitude of the marker

● Field “long” with a type “number” for noting the longitude of the marker

● Field “title” with a type “text” for noting the title of the marker. The title can be optional and left empty, but the field needs to be there.

The final table should look like this:

⁠

⁠

Table 3: line

The lines in the map are determined by their coordinates and the color of the line.

After creating the table, 2 extra fields are needed.

● Field “color” with a type “text”, to note out the color of the line. The colours are taken and read in HEX coding, for example: #FFFFFF. The field will be able to take in any text, but it should be assured that it only saves noted HEX values of colours.

● Field “coordinates” with a type “text”, to note out all coordinates of the line points. These coordinates are taken in as a list, for example: [0,0],[1,1],[2,2],[3,3],[4,4]. The field will be able to take in any text, but it should be assured that it only saves values in the exact format noted in the example, so mapbox could read and parse those coordinates properly.

The final table should look like this:

⁠

⁠

Table 4: polygon

The polygons in the map are determined by their coordinates, outline and fill color and the fill opacity.

After creating the table, 4 extra fields are needed.

● Field “color” of the type “text”, to note out the color of the polygon’s outline. The colours are taken and read in HEX coding, for example: #FFFFFF. The field will be able to take in any text, but it should be assured that it only saves noted HEX values of colours.

● Field “coordinates” of the type “text”. Same as line these coordinates are taken in as a list, for example: [0,0],[1,1],[2,2],[3,3],[4,4]. The field will be able to take in any text, but it should be assured that it only saves values in the exact format noted in the example, so mapbox could read and parse those coordinates properly.

● Field “fill color” with the type “text”. The colours are taken and read in HEX coding, for example: #FFFFFF. The field will be able to take in any text, but it should be assured that it only saves noted HEX values of colours.

● Field “opacity” of the type “number”. This value is a decimal value with values between 0 and 1, 0 being invisible fill and 1 being fully filled. This value will be able to take any negative and positive numbers, but should be assured to save only values from 0 to 1 (for example 0,5 0,6 or 0,85).

⁠

⁠

Having these 4 tables will have you ready to save and load your data on the map.

As a reminder the name and type of the field needs to be exactly the same as noted in this tutorial, otherwise the markers, lines or polygon will not appear on the map.

The extra added fields are neccesary for the map to work, but there are be any other extra fields of your choice if more data is needed.

⁠

Recommended next step -

Set up the map⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.