How can we make sure that we can pick a place?
Well on map view, in your map screen, you can add an onPress handler and this fires whenever you tap somewhere
on the map
and with that I don't mean taps when you scroll but when you tap there without scrolling, so if you really
want to select something. This will then fire and this therefore can be bound to a function which I define
in here which should kind of store the selected place.
So here I'll have my select location handler function which gets an event object and that's what I bind
to onPress here.
Now we can look into this event to get a feeling for what's inside there, which kind of data we get.
So let me save this and let's test it,
let's go to the map and then once this is loaded, simply tap somewhere on the map, like here.
If we now go back, this is the output I get and in there you see it's quite a big object,
in the end we get a bunch of data in there which we don't really need,
it's this synthetic event here.
What we do have, what's interesting is this native event property which is yet another object, which
has a coordinate property which is yet another object, which has a latitude and longitude.
That's what we're interested in in the end, right,
that's what we want to find out,
that's the coordinate pair
we want to get.
So this is the place, the coordinates the user tapped on,
this is what I want to store here and it would be nice for a start to add a marker in that place
so that we mark that place on the map. For that
of course we can use state to save that selected place and in the component, then initialize this up here
and have our selected location and set the selected
location with the help of use state. Initially it's empty, we have no selected location initially and
then we can create a marker here
if we do have one. For that, we can import the marker component from native maps by adding some named imports
here besides this default import we have and we can import marker from React Native maps, it's as simple as
that and we can render this marker by adding it between the opening and closing tags of map view which
we now need,
so we can add a marker here.
Now this marker needs some configuration,
otherwise React Native maps doesn't know where to show it. We can add a title for example, picked location
but more importantly, you can add a coordinate prop here and that expects to get an object with a latitude
and longitude in there. So here, I'll add a new variable, marker coordinates let's say and if I have a
selected location and that's the state I'm managing up therem if I do have that, then I want to set marker
coordinates equal to an object where you need to have a latitude named latitude,
so it's not lat,
it needs to be latitude because the marker component will look for a property named latitude
and that can be the
selectedLocation.lat
let's say, it's up to us how we then save this, we're not doing it right now but later I will save it
such that we have a lat prop there and longitude which needs to be named like this which can hold the
value stored in selectedLocation.lng.
Now marker coordinates is conditionally set and here we can now check if marker conditions does exist
and if it does, we use this shortcut to also output a marker here. Now marker coordinates is also what
we can feed into here
and please note this is coordinate, not coordinates, it's just coordinate.
At this point it's our marker coordinates and now we just have to make sure that we eventually set the
selected location
and of course I want to do this here in my select location handler. There
I want to call set selected location to set my state, pass an object in there and set my state to an object
with a lat key because I'm trying to extract lat down there of event.nativeEvent as you saw and
in there, there was this coordinate property which has a latitude property and then lng which I'm also
extracting down there should be set to event.nativeEvent.coordinates.longitude. And with this
code, we should be able to view a marker on the map. So let's give it a try,
let's go to iOS,
load the map there
and pick some place and we see a marker at the place where I click. The same on Android hopefully, let's
give it a try there, open the map and indeed there
if I tap somewhere,
I also do place my marker there.
So this is how we can work with markers and how we can select places,
it's all nice.
Now ultimately I want to be able to kind of click a save button up there which doesn't exist yet, which
then closes this map and passes the selected location back to my new place screen in the end,
right, which I do have here as well. I want to go back to that screen and of course kind of save my selected
location.