Note: this tutorial has been updated to reflect the change to the ‘on Marker Click’ event block of June 2020.
This tutorial will show you:
- How to display markers in your app based on Airtable spreadsheet data
- 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.
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 2 variables for this app: thisLat and thisLong.
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.
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.
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!