Well we got our map moving which is fantastic.
But as we just saw if a user starts a drag around on this they just kind of get snapped back to the
same location.
Maybe that's not the best interaction we could possibly make.
So in this video I want to figure out a different way that we could somehow represent a user's location
in the world all right.
I'm inside of my mapped out G.S. file.
We saw just a moment ago that we could make use of the Poly line import from React Native maps to draw
a line on our map maybe a better way to represent a user's current location would be to draw just a
little circle or something like that.
So it turns out that we can very easily draw a circle on our map in a very similar way in which we drew
our poly line.
So I'm going to import circle from React Native maps in addition to poly line.
This is a react component that we can display inside of our map view.
So I'm going to once again expand my map view element right here so I'll put in a closing tag and then
inside there we can display a circle element when we make a circle we have to pass in a couple of different
props.
The first one we have to put in is something called as you might guess center.
So this is going to be the exact latitude longitude of where we want to draw a circle on our map.
We already have access to a latitude and longitude in the form of current location records.
So for our center we can pass in current location dot courts.
So React Native map is going to take the latitude longitude out of there and use that as the basis for
our circle before we try to test this out.
However we also have to specify some information about the size of the circle and what color is should
be drawn with as well.
So we could put a radius in here of like an arrow maybe 120.
We'll try that out really quickly and then we could put in a stroke color which will be essentially
a border on the circle.
So the stroke color can be a RG be a value we can use an RG be a value to essentially apply some color
with some opacity to it.
So I got to put in here RG be a 158 158 255 and 1.0 like so and then going to also define a filled color
which is going to be the color inside the circle as opposed to its border so this will be an RGA as
well.
We'll do 158 to 158 255 but then this time around we're gonna do a opacity.
So the fourth value in here of zero point three.
Like so.
All right.
Let's now save this and test that out.
So go back go to check create.
And now I've got that kind of nice looking circle right there.
So the radius value right here is the meter diameter of the circle maybe its radius honestly a radius.
I'm crazy.
It says radius right there of course it's the radius.
So chances are a radius of 120 is a little bit too large.
So we might want to dial that down to just like maybe five or 10 meters or something like that.
So if we try that out OK maybe a little bit too small so we'll try going up to 15 and.
All right still a little bit small but I'd say that's kind of reasonable.
Maybe I'll just stick with 30 and call it good ok.
I think that's pretty reasonable right there.
So now if we wanted to we could drop off the region drop off our map view it's now we will not get the
automatic updating map but the circle will be updated.
So if I save this now and go back to track Create Now the map is kind of fixed but we can see the circle
moving around to indicate exactly where our user is.
I'd say that this is probably a better interaction because now the user can kind of move around a little
bit in this map and not have it just kind of mysteriously snap around on them.
On the flip side if a user moves outside of the bounds of this map well the user is not going to really
understand where they are.
We could very easily add in some code to update the maps position if the position the circle kind of
goes outside of a bounding box indicated by our latitude Delta and much to Delta right there.
But I'll leave that kind of as a exercise for you as opposed to showing how to do it myself.
So it's definitely looks like an improvement.
So now we probably need to start making sure that we can record a user's location over time then eventually
draw it out on our map as a line.
So quick pause and I'll start.
Take her that in the next video.