HEY WHAT'S UP GUYS I'M Jacob.
Debs Lopes dot com.
And in this lesson we are finally going to get our polyline showing on the map so that's really cool.
Let's go ahead and pull apart terminal real quick and I'm going to just make a new branch for this.
So check out Desch B and will call this one less than 18 and then we'll commit to it at the end.
So first things first are begin run.
VC is the only VC that shows the map right.
So if I open up our storyboard
let me just zoom out a little bit.
Our map view and our last run view.
So this is the only thing we have.
And we also have our center on our location button so will hook that up in this lesson too.
So if we go into our beginning run VC we need to go all the way down to the bottom where we have our
extension of C-L location manager or delegate and we need one more method that we need first setting
up our our overlay so we can see it and it looks the way we want it to look and all that stuff.
So we just start typing in renderer we want the render for overlay this one map view where we reference
our map view and it returns our overlay renderer and what we need to do here is create our polyline
so just let polyline that is what we'll call.
And this needs to be equal to the overlay property that's being passed in overlay and we have to cast
this as a M-K polyline
right.
And we also need a polyline renderer so we can take our polyline that we want to show on the map and
render it to the map view.
So we'll go ahead and create a variable called renderer and this is equal to M-K polyline render right
here.
And we need to pass in our polyline wallers not polygon or under Come on auto polyline Paul.
There we go polyline render.
And we want to pass in a polyline and we already created the variable up above.
So we're going to just pass in our polyline overlay.
And that's our renderer now.
Basically all we need to do is set it up so we need to control though the within the color of it.
OK.
So just go ahead and call your renderer and say stroke color and then go ahead and just set this to.
We can do color literal which is right here and just click on it and let's make a like a dark blue or
something like that.
You can pick whatever color you want.
I'll do a little purplish blue.
So that's pretty cool.
And now let's just set our render a line with.
And this is honestly I just kind of messed around and picked a line with that I felt looked good so
it is four.
And obviously once we see our polyline on the screen we can adjust that.
And then all we have to do is return our overlay renderer and it'll be all set up for us.
So return render.
All right.
So that is done and our air goes away.
Save that and now we have to we have to do a few things.
OK one thing I want to do is just move the map view delegate.
I want to just move it down to a view will appear helps
map you delegate.
I'm just going to cut and paste it down here by the manager because I were we're not using the map you
delegate on our run Visi but I want to just make sure we always have the delegate set when this view
appears again.
And now what we need to do is we need to draw our polyline.
So right now we're just calling get last run and we have this whole little function here which is great
and we can actually probably use this and we can actually even call it get last run since our polyline
is our last run right.
We're just going to have to refactor this a little bit and maybe what I'll do is make a new function
above it so we can still see what we're doing because obviously if we don't have a last run we want
to show our users current location if we do have a last run we don't want to show our users location
and we want to show the polyline.
So we're going to have to center our map on our polyline instead of our user and yeah we also need to
center around our user if there is no polyline.
So why don't we go ahead and make a function called Ad last run to map.
I think that's probably good.
And we're not passing in anything but we do need to return a M K polyline But this is going to be optional
because we might not have our last run if it's the first time we open the app.
We're not.
It's going to return nil or nothing to us.
So I think there's a few things we want to do.
Obviously if we have a last run we still need to set our labels and show them and everything.
I want to just make one more function called a set up set up map view.
And instead of calling get last run in view will appear.
Let's call
let's And let's use view did up here just we want to make sure everything rendered before we set up
our map.
Sometimes you can access your map delegate and stuff too soon and it won't actually render anything
to the map.
So let's call our set up map view right here
and in set up map view we need to get an overlay.
So we need to call this function which isn't returning anything yet here to get rid of this air.
Let's just do return.
M K polyline just like that.
OK so inside our set up map we want to see if we have an overlay right.
So whether this is nil or not.
So what we want to do is just do like an if left and then let's call our variable overlay and we just
have to set it equal to our ADD last run to map function right.
So if that's not nil we now have this variable and then like we would just do map view dot add overlay
and send in our overlay.
Right.
All right.
That's easy enough.
There is one problem.
If our map already has overlays showing you don't want to just keep rendering overlays over overlays
right.
And so one thing we need to do is check if our current map view has overlays.
And we're going to check the count and that's how many points are rendered and drawn to each other.
So if this is greater than zero that means our map already has an overlay on it.
And now we want to call our map view and say remove overlays and remove overlays and it's just going
to be our map view that overlays that's the array of overlays that we want to remove.
And basically all that does is if our map view already has an overlay like if we open the app and then
we go and we already had a previous run an overlay would be printed and then if we start a run and go
back to the map view we want to wipe out the one before that.
So that's just cleaning up our map view.
And then we just simply add our new overlay after that.
All right.
So that's pretty easy.
Now what I want to do in our set up map view is hide the stacked view the run background and all that
good stuff so let's copy and paste down in our Get last run the last run stack is false.
All this stuff we wanted to show.
So underneath our ad overlay make sure we add our last stack that is hidden equals to false.
Our last run background view is hidden is equal to false and our last run close button is had and is
equal to false because if we have an overlay we have a last run.
So we want to show that detail.
Okay.
And then that's all we need to do here.
And then if our overlay returns nil to us we want to hide everything right.
So we can copy and paste our HIDDINS set to true in our statement.
Okay.
So that's all we need to do.
And now we can delete our.
Let's see we're still going to use some stuff here.
Okay so if our ad last run gets called and it's not nil we can set our labels and everything in here.
So let's go ahead and just do our guard let.
Last run equals run that get all runs done first and that is grabbing the first run in our in our realm
results
and that's the else we want to just return nil now.
So if there is not any runs if there aren't If there isn't a first run that means we have zero runs
we return nil and returning nil would answer this statement and it would hide our last run Steck view
and our overlay for showing our last runs to exactly what we want.
So now we can delete this.
We don't need that and now will let's just take our pace labeled that text all this stuff copy and paste
right underneath so we can use the last run variable.
And now if we just delete our guest last run function we are refactored pretty good.
OK so we have everything set like it was right.
We have our duration label but now we need to return an M.K. polyline and to make more sense of it.
What is an M-K polyline.
That's of course my clicking isn't working let's just real quick I need to just change this to M-K polyline
and OK here we go.
So we need to pass in a let's see we need to pass in an array of coordinates and also the count of how
many coordinates are getting passed in right.
All right.
So knowing that all of our locations have coordinates in them right.
We just need to add them to an array now.
So why don't we just make a variable called var coordinates.
And this is going to be equal to an array of C-L location coordinates location coordinates and 2 D is
great.
So now that's an array and let's just initialize this as empty array and all we have to do now to add
to the coordinates array is go through all of our locations and our location object our location list.
So if we just make it for loop called location in last Rondout locations.
So we're just going to loop through all the locations saved there.
Now all we have to do is say coordinate dot append and we just need to add
the latitude and longitude from our location.
So since we need a C-L location coordinate to D type right now we're just going to create a new one
so just call C-L location coordinate to D.
And it wants latitude and longitude so we can just simply call our location variable and our for loop
dot latitude and then for longitude location that longs it did and now our array has all the coordinates
added to it.
So let's now just return our M-K polyline with all those coordinates.
So M-K polyline and our coordinates is our Cordner array we just created and the count would be our
locations.
So our last run that locations dark count ok cool.
So let's see.
That should be done and now is this mixture.
Where do we call we call set up map.
Let's go ahead and run this.
And let's see if we get any poly lines rendered to our map you
see our last run of point 1 2 miles and.
All right.
So you can see the line underneath.
I don't know how to zoom in with.
I always forget how to do this.
Oh well but anyways you can see our line obviously.
I think it would probably be nice.
We still need to hook this button up so it centers to our user but I also think if we have a previous
run it's not going to be where our user is.
So like right now our map is showing us our user right.
But you might want to see your last run and you could have ran five miles from where you are right now.
So we're going to have to be able to center on our last run if there is one or center on our user so
we're pretty much wrapped up here like everything is really cool.
There's not much for us to do other than hook up our center to user button.
And also we'll zoom in on our last run.
So in the next lesson we'll finish up this app and I'll show you how you can zoom in on our polyline
and also zoom in on our user.
So I will see you then.
But first let's pull up our terminal and let's just do a get ad period and get commit dash dash em.
And we got our wholey of line rendered to map you.
All right sweet.
And that is done.
I'll see you in the next lesson.