Airtable Map (show image when Marker pressed)

[jane]

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:

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 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!

Here is a link to the project.

[kartik14]

Thanks, @jane!
Nice Tutorial!

---

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

[Fernando_Matos]

Yes! I Will try later

[Fernando_Matos]

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

[jane]

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

[actech]

Hi Jane,

In your example used Map1.addMarker unit. This block requires a latitude and longitude values ​​of parameters of a numeric type. If these parameters are passed to the numbers in string form, the Live on Android arises crash. This is a very old problem.

[team.cyb3rgirlzqh]

Hi Jane,
We are a team of girls that are working on app called BusIT it is an app for public transportation. When we thought about the app we though of a map with a lot of markers that represent the stations and the markers getting connected by poly-lines to create the bus lines. As we started to create the app with thunkable we have had a lot of problems because the live app with not show any of the poly-line or polygons. We were thought of creating a database in the air table component and that is what we did.
We created the table of the bus lines with the coordinates of the stations. we followed your steps and blocks but it did not show anything in the map. We would really like for you to help us because this app really means a lot to us and the deadline we have to finish this app is the 4th of may and the time is going super fast.
Thank you for your time!!
Quartet team

[jared]

Can you show the blocks you are using to produce the map markers? If you follow the code exactly, the markers will appear. When they don’t, there is an error in the code or the database you are getting the coordinates from.

[team.cyb3rgirlzqh]

Here it is:
(It is literally the same code with Jane’s.)

The thing is that we don’t even want to create a button that shows a picture when we press a marker, we just want to figure out how to make the markers show on the map so we can modify it, and continue with our work.
Here is also a part of the database we are using:

We would be really grateful if you could help us…
Thank you for your time and effort, we really appreciate it!

[jared]

@team.cyb3rgirlzqh

create a button that shows a picture when we press a marker, we just want to figure out how to make the markers show o

can i share some code here?

look at this. imagine that instead of filtering an flight tracking API , you are filtering your airtable data.

create a list for each item. lat, long, data, photo url, info, info, info.

these are what you use to create your markers
here i use a loop

here i use the count by block to reference individual indexed pieces of info
you can ignore the bottom half of this related to lines. but it could also be useful.

[leen204c2]

Hi,
I did the exact same blocks as the Airtable Map image press, except I changed it to setting a label to the same description in Airtable. Here are my blocks:

My question: Why isn’t it working?!!!
Thanks,
Nicole

[jared]

Hey @leen204c2,

i think the error is at the beginning of the code when you start your loop.

on each run through
you check if the property ‘Lattitude’ of object i is empty.

tell me, what is i?
(answer: it’s simply a local variable that increments each time the loop runs)

You want to use i as the index of an object in an array of objects not as the object itself.
use I, in that case, to reference an object in an array of objects

what should go there now?

[leen204c2]

Thanks a lot @jared , but I still don’t understand what you are saying. Do you mean that I should use another variable in my blocks? Or should I replace the variable ‘i’ with the name of the column in the spreadsheet? I’m quite new to dealing with this, could you help me understand it better?
I deleted the empty row blocks as it seemed unnecessary, but it still doesn’t work.

Thanks,
Nicole

[jared]

in the original, you were asking for a property of object i.

the variable i is not an object, is it an integer variable used for counting.

i is not an object, so when you look for a property of an object that doesn’t exist (because i is not an object), it will always return true and therefore continue with the next iteration of the loop. that means that each object(row) in your list will be ignorred.

an object is a way of groupiinig data and data lables. a JSON object, how these data come, looks like this

{
   "clients":[
      {
         "name":"jared",
         "age":10
      },
      {
         "name":"sally",
         "age":20
      }
   ]
}

this at a basic, would be an object that holds a list of client info

i only ever looks like this 1,2,3,4,5,6,7,8

[leen204c2]

So how do I solve this problem? How do I put JSON into my project?
Do I change i into j instead and ask for object of JSON?
Here is the link to my project, you can see the blocks in “Place Details Screen” : https://x.thunkable.com/copy/f6dc7af5a6a3acc4a046ceea41d08c65

Thanks,
Nicole

[leen204c2]

I just realized…we might be doing the same competition! My deadline is also May 4th, so perhaps you are doing Technovation Girls as well? Haha

[altsoftcode]

Hi @jane ,

I am developing an application that where it is necessary to happen precisely what is described here: the user clicks on a marker and something happens based on other information.
And I had precisely this reasoning, even before I saw this topic … because there are no other options.
The problem. is that the coordinates that I assign to the markers, are in a database and are of high precision. That is, they have a great length: “-8.686983500000000191221261047758162021636962890625”.
It turns out that when the user clicks on the marker, the values returned from the coordinates are rounded.
Because of this, the values will never match the initials.

The question is simple: Wouldn’t be simpler to be able to associate a value (an ID for example) with the marker and then obtain that value when the marker is clicked.

When working with maps it is obvious that an interaction with the markers is intended.

Thank you.

[manyone]

you can avoid this discrepany about precision by doing this: during initialization map markers , round the latitude and longitude to a fixed number of decimal points and STORE them in the table in additional to the original values if you need those. then when it comes time to identify a clicked marker, you can find the exact matching location in the table using the rounded values.
furthermore, anything beyond 6 decimal digits of precision has impractical usage as this wiki page shows:

Decimal degrees

[altsoftcode]

Hi @manyone,

Thank you for your answer.
I realized that it is not necessary to round the value beforehand. Apparently the value is automatically rounded when used. Which is great because it works the way @jane shows .

Even so, the possibility of adding an ID (for example) to the marker and then being able to get it back when it is clicked, would be ideal.

Thank you.

[Fernando_Matos]

hello @jane . I copied exactly your example is nothing works the application continues to restart