Now we can show a map.
Let's figure out how we can actually draw a line of sorts on this map that has some actual meaning.
So from the React Native maps library I'm going to add in a second import here.
It's going to add in a comma a set of curly braces.
We're going to pull in something called a poly line this polish line is a react component that we can
show inside of our map view.
If we show a polish line component inside of a map we will see a line drawn on the actual map itself.
So going to find my map view I'm going to turn it from a self closing element into a expanded element.
So going to say slash map view inside of a closing tag like so and it'll pass in to the map view tag
itself a poverty line when we show a poly line component we have to pass in.
In addition some number of coordinates.
That's essentially going to be a series of points in the actual world that indicate a line that we want
to draw on here.
So it's going to be an array of objects where every object is going to have a latitude property and
a longitude property the polish line will then take that array of objects and reflect it as an actual
line.
So right now we don't have any real data but we can try to just make some kind of like fake array of
points to show inside of our poly line.
So to do something to put a little bit of temporary code right above my return statement I'm going to
say let points.
It's gonna be an empty array and then going to set up a very simple for loop.
So I'll say for let I equals zero I less than about 20 I plus plus and then inside of here we'll do
points.
Dot push I'm going to pass in an object and this object is going to have an imaginary point that we're
going to try to draw on the map so I'm going to give it a latitude and we'll use the same starting latitude
we have down right there.
So I do it 37 3 3 2 3 3 and we're just going to add in some little increment for every iteration through
our for loop.
So I'll do that amount plus I times zero point zero zero one.
We'll try that out to get get started and I'll do a longitude as well.
So my initial longitude will be negative 122 0 3 1 2 1.
So same thing we have down here plus I time zero point zero zero one OK.
That's gonna give us our array of points with some number of points inside there.
So this really should just be a very simple straight line so now we can pass that array of coordinates
or points into our poly line under a prop called coordinates into coordinates.
Going to pass in that array that we just generated.
So for coordinates I'll pass in points.
Let's now try to save this.
Go back over to our map and we can see our line is created okay.
So that definitely works.
Now of course we just added on zero point zero zero one more or less to every single point.
So we end up with a perfectly straight line as what you see right here.
If we wanted to we could easily add in a little bit of variation to this thing so we could say something
like If I modulo two is equal to zero.
In other words if I is an equal even number let's put in that value else let's push in a slightly different
value.
So how about in this case we subtract a latitude of that amount.
And in addition rather than just doing 0 0 1 let's say you like 0 0 2.
So we'll give us more of like a jagged line.
It's all save that's we'll go back over and try to create.
And now we can really see a very interesting path gets drawn out.
So we initially subtract 0 0 2 then we go up and then down up down up down and so on.
So as you can see we can very easily draw a series of points as a line on our map.
So this is essentially how we're going to end up with our real application over here so obviously drawing
a line really not the worst thing in the world.
All we have to do is provide a series of latitude and longitude points to this polish line component.
So the real challenge behind our application is not the map stuff.
It's actually really going to be how we record the user's location.
All right.
So now we've got a reasonable idea of how to work with our map component.
Let's take a pause right here.
When we come back the next video we're going to start to discuss how we can track the user's location
somehow record it and how we're going to distribute that information inside of our track create screen
so quick pause and I'll see you in just a minute.