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.
This is the event we need to understand to make everything work. The
onPress event has two outputs,
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.
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.
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
Let’s repeat this step and investigate the nativeEvent object.
nativeEvent contains a further three objects,
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
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:
Here’s a remix link in case you want to experiment with this yourself.