Airtable Map (show image when Marker pressed)

This tutorial will show you:

  1. How to display markers in your app based on Airtable spreadsheet data
  2. How to display images from an Airtable spreadsheet in your app when a marker is pressed

The technique used in part 2 of the tutorial can of course be used to retrieve all kinds of data from a spreadsheet based on the marker pressed, but images are a popular request.

Setup

Create an Airtable spreadsheet and add it to your app.

It will need Columns for:

  • Latitude and Longitude
  • Title and Description (optional but recommended)
  • Image or other data to be shown when the marker is clicked

The order of the Columns doesn’t matter.

Here is what my spreadsheet looks like, as an example.

To create your app, you need to add a Map and a Button to your screen, and add a Spreadsheet component to your app project.

This app uses a Button to display the image from Airtable. You can use any component with an Image property, including an Image component!

Learn how to add a Spreadsheet component to your app project here.

We only need to initialize 3 variables for this app: thisLat, thisLong and obj

airtablemapinit

1. Display Markers from Spreadsheet

These blocks demonstrate how to add markers to your map based on the data in your Airtable spreadsheet.

You get all of the rows from your spreadsheet, then get the properties of each of these rows (latitude, longitude, title, description) to add markers to your app. If your Airtable spreadsheet doesn’t include Title and Description data, you can leave those fields blank in the ‘Add Marker’ block.

airtablemapready

The block ‘for each item j in list’ can be found in the control blocks.

You can learn more about working with Objects in your Thunkable X project in the Objects docs.

2. Display Image when Marker Pressed

These blocks demonstrate how to display an image in your app based on the marker the user has pressed.

We will look at these in two parts.

First, we isolate the latitude and longitude of the marker that was pressed and save these as our thisLat and thisLong variables.

airtablemappress

Then, we get all of the rows of our spreadsheet again. This time, for each row in our spreadsheet, we are checking if its Lat property equals the latitude of the marker we pressed, and if its Long property equals the longitude of the marker we pressed.

If it does, we get the image from that row and display it as the background image of our Button. The image property will be retrieved as a URL.

Here is a closer look at the blocks for setting the background image.

And that’s it!

Here is a link to the project.

2 Likes

Thanks, @Jane! :blush:
Nice Tutorial! :+1:


@Fernando_Matos, this will help you with your latest question :wink:
Am I right?

1 Like

Yes! I Will try later

1 Like

@Jane hello i replicated the example in my project and when i marker press the app restarts

Does the sample app I provided work for you?

If so, what is different between the sample app and how this method is implemented in your app?

Jane

2 Likes