Well we've got the track that we care about inside of track detail screen.
So now we can show some information about it to the user in particular.
We probably won't show a map that kind of highlights the area that the user was hiking through or whatever
it was and then draw the line that indicates the exact path that they took.
So because we want to show a map we can import the map view component once again and remember we already
have a map component inside of our components directory.
However I will be honest with you this map component that we put together is not very well suited for
reuse.
And the reason for that is that there's a lot of code inside of here that takes a look at our context
object and it also takes a look and draws a circle on the screen for the user's current location as
well.
So the map component we already have is not very reusable.
So rather than trying to reuse that map component we'll just use our map view from the React Native
maps library and just show a brand new map view inside of here rather than trying to reuse the one we
already have in this case.
We didn't really do a lot of customization of our map inside the components directory.
So honestly we're not really losing a lot of opportunity for code reuse here anyways okay.
So to get started at the very top I will get a map view and we want to draw a line as well.
So I'm also going to import Polly line two from React Native maps
so then rather than just returning a text element I can return a text or a react fragment and I'm going
to make sure I remove that semicolon at the end of the text tag then immediately after that we'll show
our map view
inside of that.
I'll put my poly line.
Let's take care of the Poly line first.
So remember a poly line takes a coordinates property and we need to pass it an array of coordinates
which is supposed to be a array of objects with latitude and longitude properties.
So once again our track right here has a locations property that is an array of track readings or location
readings.
And inside that location is a coords property.
So it's that court's property that we really care about in this case.
So we're once again going to map over all of our different locations and pull off just that court's
property.
So I'll do track dot locations dot map.
We'll take a look at every location and return location.
Dot courts and of course once again I'm abbreviated location simply as LLC OK.
So that's a good start.
Let's make sure that we also set an initial region on the map view as well.
Because remember by default a map view is going to appear like very far scrolled out so on map view
I'm going to put in a initial region property so inside of here we can specify some kind of like zoom
level by assigning a longitude Delta.
In this case I'll use zero point zero one and a latitude Delta as well of 0 0 1.
Then we want to also take all of our different coordinates probably for like the very first point that
we recorded out of our track.
In other words let's take a look at this track right here.
I think we should try to find the very first point.
Take its coordinates.
So it's starting longitude and latitude longitude and throw them into this initial region so that the
map view knows what does center on by default.
So right after we find that track right there let's get some initial coordinates which I would call
initial chords so we're gonna get those from looking at our track.
Looking at the array of safe locations we're gonna take the first element out of there and get specifically
just that coords property.
So now initial chords will be an object with a longitude and latitude which is exactly what we need
to specify the initial region so after we specify the zoom level right here we can also do dot dot dot
initial courts okay.
One less thing inside of here before we test it.
Remember by default a map view doesn't really have a set height.
So let's make sure that we define some set height down inside of our styles object down here so that
in a map section with a height of 300 and I'll make sure that I apply that to my map view.
So say style is styles dot map.
Okay.
I think we're ready for a test.
So going to save this I'll flip back over I'll try out car drive.
And there we go.
So I now see my map and I see the path that I took when I recorded that track.
Same thing for went for bike ride and went for hike as well.
So I'd say this is pretty much working out just as we expected however we're still not quite done yet
even though our application is pretty much feature complete there's still some kind of nasty things
inside of here.
So for example on the tracklist screen we've got a header on here.
Even though we're not showing anything inside the header in addition down here at the very bottom on
our bottom tab bar we've got these kind of ugly terms for every screen.
We don't have any icons inside there either so let's kind of polish up a couple of different items in
the next video and will be just about done with our application.
So I'll see you in just a minute.