Cartographr: How to work with the Map Component

Click to Add Markers

One request we hear from Thunkers is the ability to tap on the map component and then add a marker to the location that was just tapped. In this first example we’ll learn how to do just that.

Map1.onPress

This is the event we need to understand to make everything work. The onPress event has two outputs, coordinate and position - but other than the names of these outputs we don’t know much more about them. Since coordinate seems like the most promising, let’s take a closer look.

step1


Simply trying to display coordinate in a label isn’t much help. If you try this yourself all you’ll see is [object Object]. It mightn’t seem like much, but this clue tells us that coordinate is an object. Thunkable has a whole category of blocks for working with objects so let dig a little deeper.

1point5


The first thing to do is create a variable - I’ve called mine coords - to work with the coordinate object. Next, using the get object properties of block we can see that the coordinate object is itself made up of 16 other objects. To save you some of the guess works, the one we’re interested in is nativeEvent.
Let’s repeat this step and investigate the nativeEvent object.


nativeEvent contains a further three objects, action, postion and coordinate.


If we repeat once more we will discover the the coordinate object contains a latitude object and a longitude object. Let’s create two more variables to store the lat and the lng so we can position our marker.


Once we have the values for lat and lng we can place a marker:


If you want to clear the map all you need to do is call the deleteAllMarkers function like this:

Remix

Here’s a remix link in case you want to experiment with this yourself.

https://x.thunkable.com/copy/bc34f663b5d2272a2727e97e3c3b1dbc

3 Likes

i have searching on all over thunkable community,
actualy it’s same method… but why on mine is not working…
i always got “null” on nativeEvent…

event i try your remix, & it’s not working…
are thunkable update…? the problem is, i always get nativeEvent:null

help me pls… :sob:

Can you post a link to your project or screenshots? That might help to solve the problem.

2 Likes

@rilo_raspopo +1 for screenshots, it might just be a case of you needing one of the object blocks in your project - or perhaps it might be a typo?

If you show us what you’re trying we’ll be able to point you in the right direction.