Skip to content

How to Set Up Leafy Maps to use Stadia Maps on Bubble.io

This tutorial will walk you through the process of building a simple route drawing application using Bubble.io, the Leafy Maps plugin, a table of geographic coordinates (latitude and longitude) representing locations, and the routing functionality of Stadia Maps.

Note

Before getting started, if you don't already have one, you will need to sign up for a Stadia Maps account.

Later in the tutorial, you will add your Bubble.io app's domain to your account in the client dashboard and also copy your API key.

You can find out more about how we authenticate requests in the Authentication & Limits documentation.

Creating an application in Bubble.io

  1. Navigate to your Bubble.io Apps tab and click Create an App.

    Leafy Maps on Bubble.io Screenshot 01

  2. After you give your application a name, your Bubble.io URL is generated. This URL will be added to a property in your Stadia Maps account. In our example, the URL is stadia-maps-tutorial.bubbleapps.io.

    Leafy Maps on Bubble.io Screenshot 02

  3. Click Create App to finalize the creation of your new Bubble.io app.

Adding your Bubble.io App URL to Stadia Maps

  1. Log in to Stadia Maps and click Create a Property

    Leafy Maps on Bubble.io Screenshot 03

  2. Give your new property a name and click Create

    Leafy Maps on Bubble.io Screenshot 04

  3. With your new property created, scroll down until you see the Authentication Configuration section. You will need to add a Domain and copy your API key for this tutorial.

    Leafy Maps on Bubble.io Screenshot 05

  4. Click + Add Domain, enter the URL you generated for your Bubble.io app above, and click Save Domain.

    Leafy Maps on Bubble.io Screenshot 06

  5. Click + API Key and a new API key will be generated instantly. You will be copying and pasting this key into the Leafy Maps configuration later on in the tutorial.

After everything has been set up, your Stadia Maps Property Authentication Configuration page should look something like this:

Leafy Maps on Bubble.io Screenshot 07

Installing and Configuring the Leafy Maps Plugin

With your Bubble.io App created and your property added in your Stadia Maps account, you can now begin the creation of our routing app. The first thing you need to do is install the Leafy Maps plugin.

  1. In Bubble.io, click on the pencil icon to begin editing your application

    Leafy Maps on Bubble.io Screenshot 08

  2. In the left-hand sidebar, click Plugins and then click + Add plugins

    Leafy Maps on Bubble.io Screenshot 09

  3. In the search text box, type Leafy Maps and the plugin should display. Click Install.

    Leafy Maps on Bubble.io Screenshot 10

  4. If successful, the button's name will change to Uninstall. Click Done to return to the main Plugin page. Leafy Maps should be selected to bring up its configuration page.

  5. Scroll down until you see the Get route - key (path) - dev. labeled text box. Copy and paste your Stadia Maps API key here.

    Leafy Maps on Bubble.io Screenshot 11

The settings are automatically saved. You have now installed and configured the Leafy Maps plugin.

Creating your Table of Locations

Next, you'll need to create a table of locations to use in our route. We specify these by latitude and longitude. In this example, you'll be entering a static list of coordinates manually, but any method of getting these locations into your Bubble database will work.

  1. Navigate to the Data area from the left-hand sidebar. Under the New type section, give your new type a name. In this tutorial you will name it route. Click Create.

    Leafy Maps on Bubble.io Screenshot 12

  2. You now need to create two fields for the route data type: one for latitude and another for longitude. Click Create a new field and use lat as the Field name and text as the Field type. Click Create. Repeat this process, but name this field long for longitude.

    Leafy Maps on Bubble.io Screenshot 13

  3. Now you can populate the data type with coordinates. Navigate to the App Data section and click Add Entry.

    Leafy Maps on Bubble.io Screenshot 14

  4. Enter in your coordinates and click Create for each one.

    Leafy Maps on Bubble.io Screenshot 15

    This tutorial is using the following set of coordinates to create a route near Indianapolis, Indiana in the United States:

    lat long
    39.7684 -86.1581
    39.8098 -86.3225
    39.8434 -86.3978

    You will receive a confirmation after each one.

With the coordinates entered, you can now prepare the graphical elements for the routing app.

Drawing Your Elements

In this tutorial, you will only need two UI elements: a Leafy Map and a button.

  1. Navigate to the Design area from the left-hand sidebar. You can either search for Leaf Map by typing in the Search for new elements... or locate it underneath the Visual elements section. Leafy Maps is listed near the bottom. Left-click and drag the element onto the canvas. Repeat this process for a button element as well.

    Leafy Maps on Bubble.io Screenshot 16

  2. Double-click on the newly created button. Its properties panel will appear. Update the ...edit me... text to Draw Route with Stadia Maps.

    Leafy Maps on Bubble.io Screenshot 17

Configuring Leafy Maps to use a Stadia Map Style

  1. Navigate to the Workflow area. Make sure you are on the When Page is loaded event. Press Click here to add an action and search for show map. Select the Show map on a Leafy map option.

    Leafy Maps on Bubble.io Screenshot 18

  2. A properties panel will appear. You will need to update the following settings accordingly:

    Setting Name Value
    Unique map name tutorial-map
    Tile provider Stadia
    Initial view latitude 39.7684
    Initial view longitude -86.1581
    Zoom level 10
    Stadia tile Alidade Smooth

    Your final properties panel should look something like this:

    Leafy Maps on Bubble.io Screenshot 19

Route Drawing Button

  1. Navigate to the Workflow area. Make sure you are on the When Button Draw Route with Stadia Maps is clicked event. Click on the Click here to add an action and search for stadia. Select the Create stadia route request option. The new action will be created.

    Leafy Maps on Bubble.io Screenshot 20

  2. Click on the new action and update its settings accordingly:

    Setting Name Value
    List of latitudes Insert Dynamic Data->Search for routes->each item's lat
    List of longitudes Insert Dynamic Data->Search for routes->each item's long

    Leafy Maps on Bubble.io Screenshot 21

  3. Next, you'll add the drawing action. Click on the Click here to add an action and search for draw line. Select the Draw line on a Leafy map option.

  4. Click on the new action and update its settings accordingly:

    Setting Name Section Value
    Use encoded shape? Main Checked
    Encoded shape Main Insert Dynamic Data->Get Data from an external API
    Encoded shape API Provider Get route from Stadia - Get route
    Encoded shape (path) JSON Insert Dynamic Data->Leafy Map A->Stadia route request body
    Encoded shape Main Get route from Stadia - Get route->body trip legs->each item's shape
    Line color Main #EB9900
    Weight Main 3

    Leafy Maps on Bubble.io Screenshot 22

Test the App

You are now ready to test the app.

  1. Click on the Preview option in the upper right-hand corner.

    Leafy Maps on Bubble.io Screenshot 23

    A new tab will open, showing you an application based on your element layout from the Design section.

  2. Click Draw Route with Stadia Maps.

  3. Watch your route draw on the map.

    Leafy Maps on Bubble.io Screenshot 24

Congratulations! You have now successfully created a route drawing app with Leafy Maps and Stadia Maps using Bubble.io.