Maps and Directions in SwiftUI 2 - Learn SwiftUI for iOS

all right now we're going to build a maps application using swifty y and we're going to do with this end product is we're going to demonstrate annotations so pins on our map we're also going to request directions to a new location and what we're going to do is we're going to then list out those directions on a list view so let's get started i already have a new project open and i'm going to go ahead and start to code out what i want my ui to look like alright so first things first let's bring in map kit so i'm gonna go to project settings scroll down to frameworks libraries and embedded content we're going to bring in map kit and if you don't do this you'll probably get a crashing error when you try and run it because it needs to look for the libraries that that have the relevant maps functionality the other thing going to bring in is core location all right so we got map kit and core locations our two frameworks are in play now what we're going to do is we're going to have a home page and then a sub page that we will redirect to so our home page will simply have the title and it'll have the the navigation links to the secondary page so i'm going to make a little folder here new group called content views it's going to drag contentview.swift into it expand it add a new file and it'll be a swift ui view hit next and i'm going to call this my map content view hit create all right so first thing we're going to do is we're going to wrap our text label there i'm going to keep it because it'll make a nice title label i'm going to wrap it around a navigation view all right let's put that there and let's put it inside a v stack as well close that up too just tab over the hello world text and the padding and change hello world to map navigation using swift ui and make the padding 50. and put in a navigation link say destination is map sorry my map content feed put some text label there to represent our button say begin all right and just put a padding around that of 50 as well all right let's give it a shot give it a run let's see what it looks like i'm using an iphone 12 pro there's our homepage hit begin we've got hello world second page that's good and now let's move on to my map contentview.swift and actually start coding up a map so apple was a little bit slow in getting map kit ported over from ui kit over to swift ui so you may see a lot of tutorials out there asking you to use a ui view representable and right now even present day that is still okay to do because there's still more functionality in in map kit that is has not been ported over to swift ui like as of right now polylines don't work in swift ui unfortunately and so when you're trying to build a turn by turn navigation app it can be problematic when you can't see your lines on where you're supposed to go visually like we all need that visual on it but if you were to do this using ui view representable you would be able to work with the polylines because they would still work because we know ui if you representable it's just sort of a window from ui kit into swift ui so it'll take everything in ui kit and it'll bring it over well the focus of this tutorial though is to focus on pure swift ui and we'll update this tutorial in the future once poly lines are up and running for pure swift ui in in the hopes that we can actually finish this as a full on turn by turn navigation app so we're going to do though first is we're going to start by importing map kit all right now we're going to need a couple of identifiable objects or identifiable structs one is for our location and really for the annotations and one is for our root steps or turn by turn step by step navigation so i'm going to say struct and location extends identifiable and we'll say let id equals uuid let name string let coordinate be cl location 2d all right and now struct group steps extends identifiable and we'll say let id equals uuid let step be a string all right and we're going to use these two structs we're going to use root steps a bit later but i just want to get the definition out of the way so not to worry about scrolling back up and adding it after the fact now we're going to do is we're going to hard code our location as being the empire state building and then finding a turn-by-turn navigation to anything nearby in new york city all right so we need some state vars so i'm going to say state private var home will be cl location coordinate 2d and we'll say latitude now i already looked up the latin long of the empire state building it's actually forty point seven four eight four four zero longitude is negative 73.985664 now you're free to maybe look up a uh you to look up i'm gonna see an equal sign there to look up any sort of relevant landmark closer to your home and and and build out the app with turn by turn navigation for your locality uh it's perfectly fine as well if you want to pause this video i use lat long.net as a website that'll give me the latin long of any location in the world that i enter in nice little tool there but something useful to work with all right i'm going to make another state far call region equals mk coordinate region and we'll say center now i i would love to put home in here but it it it doesn't the swift ui doesn't like putting variables inside variables that have been instantiated right off the bat uh it seems to come frown upon that so i'm gonna have to retype this in so cl location 2d for latin long being again 40.748440 the long will be again negative 73.985664 now the latitude on longitudinal meters this is kind of like your zoom level all right so we want to center up around the empire state building which is what that latin long is uh but we want to see how far out now instead of using latin latitude along two meters i'm gonna try a different overload here so i can actually replace this with span and use mk coordinate span it does the same thing right just sort of like a a distance a zoom level meaning like how much of the surrounding area around this point this empire state building do i want visible on the map and it's an interesting it it it tends to be like an experiment on your part so it's like cl location degrees cells location degrees for latin two long data delta and it is a little bit easier it's like adding plus or minus point zero five to the latin long values above or whatever it is i'm actually suggesting 0.05 for each and then we can play around with that when we're up and running if you experiment and try just starting off with like latin long deltas of 1.0 you'll see that in a nut and i suggest you do try it out uh you'll see like basically north america right and so and and it's nice to experiment with uh this this delta makes it easier to read like when you it's kind of like you're saying plus or minus point zero five and after we run this i'm gonna experiment a little bit more as well so i'm gonna add a couple more variables and just get it out of the way i want to get my variables done and then we're going to pick on them pick them off as we write the code so another state variable var going to call it tb location entered or lock entered and it'll be a string equal to empty string it's going to hold whatever search criteria i enter at as a into a text field and we'll say state var root steps this is going to be an array of root step objects and we'll set it equal to just give it like one one item in its list so we'll say instantiate a root steps object passing in its step will be uh enter it'll be like a message to the user enter a destination all right and and and there you go so those are all of our variables now let's build out the ui and get the ui up and running so what we're going to need is we're going to have like instead of this hello world which i'm going to get rid of i'm going to put everything in a v stack so we're going to have a v stack and within that v stack i'm going to start off with an h sac so let's get rid of this here and the h stack is going to contain a text field that'll ask you know where do you want to go right and it's text will be dollar tb lock entered and next to it will be a button with an action and opening curly all right closing curly and say text go all right put some padding around this um you know what let's say a padding of of five right just something small and we could play around with that just to see how it looks okay now that's our h stack is going to have a text field and a button side by side we're going to continue on with the v stack we're going to pull outside of the h stack there and continue on the v stack now for swift ui 2 they introduced the map map object and we're going to call that here so i'm going to say map and there's a bunch of different overloads we're going to take that second one coordinate region and annotation items i don't need annotation context so i'm going to actually rip that out but i'll just take it to save some time all right so we're actually using this so map coordinate region will be dollar region so the region variable we created just above right that region variable now annotation items i pull that in because i want to jump jump in and drop a pin as well and we already we already defined our annotations so or we did not so we missed a variable here let's define some annotation annotations are our drop pins right and so what we're going to do is going to add a new variable here for annotations and annotations will be an array so i'm going to say at state var annotations equals open up a square bracket for an array instantiate just one annotation here like just one map pin so we'll say location instantiate location and so name will be empire state building coordinate we're going to instantiate another cl location 2d object latin long so again same idea forty point seven four eight four four zero long negative seventy three point nine eight five six six four all right and so now we can actually take it and put that annotations variable here under annotations right just to make it happy now one last thing let's drop a pin as well so to clear up this error open up a curly and closing curly there we're instantiate a map pin coordinate will just be item.coordinate but really what it's missing here is we need to have and it's going to loop through our array here so when you say item in there we go and now we'll say item dot coordinate all right let's specify a size for this map so we'll say dot frame i'm just going to hard code it to be width of let's say 400 you can always play with this after height of 300. if you want an alignment put one in i'm going to leave it out and let's give it a run see what we got all right swipe again and there you go you now have a map pin centered on the empire state building you have a but you have a sorry text field and a button ready to go and now all that's left is to request some directions all right now that we have our map up and running and displaying let's let's make use of the text field and get some directions uh you know requested from the apple servers and then displayed here so we're going to create a separate method to to do this and we're going to put it just outside body so it's going to make sure i get the right matching there's the matching curly i'm going to create a method called find new location so funk find new location and button will say find new location so say let look entered text equal tb lock entered and we're gonna we're gonna request a geocoder object and the geocoder object its purpose is to actually convert between the text that's entered by the user into a lat long so we're gonna say let geocoder equal cl geocoder instantiated and we're going to then pass in so we'll say geocoder dot geocode string and we'll pass in loc enter text and here's the thing so completion handler so this whole approach is going to be a completion handler inside a completion handler inside of completion now it's kind of funny that way but yeah be very careful in how we do this so we're going to make a request for the location based on the text that's entered and we're going to wait and pat and until the results finish and we'll process what's ins what will process those results inside the completion handler so i'm just going to open up just trying to make space so that it looks like and before i forget and since we're here okay so we did define new location so what we're going to do is open up a curly i'm going to put the closing curly next to this round bracket just so i don't forget and i don't like that it's killing off my indentations there because i i value having lots of coding space and now inside of it the arguments that we passed in here will be place marks comma error close the round bracket void in now we could do a check for you know if there's an error we could say like if error does not equal nil just print out like you know to the console error at geocode all right and otherwise continue on all right we need to have curlies around our ifs otherwise continue on and now what we'll do is so what will happen is is that when you when you make this geocode request based on your whatever you type what's going to happen is is that it's going to send back a list of stuff so if i search for say krispy kreme it's going to send me back like 10 krispy kremes right now what you could do is you could expand on this and you know have a list view to say you know choose choose which krispy kreme i'm going to just pick off the first result that comes back just for simplicity's sake and work with that so what i'll do here is say if let placemark equal placemarks dot first and open up a curly and let's close that curly as well now let's con now because the result as you can see here is an array of place marks really and we're just going to grab the first one and let's make it happy putting a question mark there and now we're going to convert that place mark we're going to extrapolate the placemark location so we'll say let coordinates which extends cl location coordinate 2d equal placemark without the s dot location dot coordinate all right so we'll extrapolate the coordinate from it now we're going to do is set up a new region variable so say region or we'll actually refresh our region variable by saying equals mk coordinate region center actually there was an overload right there i wanted see if i can steal it there there center and span centers coordinates span is mk coordinate span and we'll just see the same delta of 0.05 all right and we're going to add this to our to our annotations let's fix the unwrapping so we're going to say annotations dot append and we'll say location we'll instantiate a fresh location name will be placemark.name coordinate will be coordinates okay so when added to our annotation array and let's make the unwrapping happy now we actually have now what happened here is that at this point it'll just re-center the map all right on the new location so if i search for jfk airport it'll just redirect to jfk airport what i want to do now is actually find directions from the empire state building to this new location i'm searching for so i'm going to use the directions request object the mk directions request so let's calculate those directions we'll continue on here so we're going to say is let request equal mk directions dot request we'll say request dot source so the starting point is equal to mk map item instantiated with a place mark of and we're going to instantiate a fresh mk place mark with the coordinate and well i'll say coordinate of home which i defined above as being the empire state building i just dictionary i'll say no so we have our starting point our destination so request dot destination is equal to mk map item as well instantiated with a place mark of mk placemark passing in coordinate of coordinates i just dictionary nil and we'll say request dot request alternate routes and i'll set it to false i just want one route just give me the route and request dot transport type will be dot automobile so we'll just do card car directions all right and you could you could throw in like buttons or this or a picker uh formerly known as segmented control which is what i'm about to say you know asking the user what type of directions they want whether it be bike or car or or transit or whatever all right so i have my direction request objects object let's feed this in and actually make a directions request so first i'm going to say is let directions equal mk directions instantiated passing in the request of request and we'll say directions.calculate with a completion handler of and so now it's a completion handler inside a completion handler it's kind of funny and so i'm just going to say response comma error in and so at this point if it enters this it has a list of directions to to this so all we're going to do is we're going to create we're going to update our root steps array at this point i would update polyline information if if that was up and running at this point hopefully and i can update this tutorial in the future and and add the polylines but i would do that here as well but for now we'll just grab the root steps so we'll say for root in response dot roots so just grab me a root and inside of it i'm just going to reset my root steps array so self.rootsteps is back equal to an empty array i'm just going to double check my see here we need all right yeah i was missing a comma or was i it's going to rewrite i think i have too many brackets here so root for root that's going to retype it root in response dot roots there that's all right now we made it happy very picky for loop there all right so i've emptied out my root steps array and i'm just going to update it by saying for step in root dot steps say self.rootsteps dot append and instantiate a fresh rootstep object passing in step which is step dot instructions all right for now that's good enough until we can get polylines up and running and add to it's going to clean up my extra empty lines here all right and now so we have our we have we're basically done at this point we want to display our root steps but we need to add a list to our uh to our swift ui view so i gotta scroll up back to where i define my map just add one more item there a list for root steps are in and we'll just say text let's see a simple text of r dot step and that's it let's give it a run see what happens hit begin so we have a empty list here we have our pin on top of the top of the empire state building let's make the use of our text field where you want to go we'll say jfk airport nyc hit go it says error at geo code now sometimes it can get very picky there we go that's better so now it's centered on jfk airport it's going to give me directions here to get to jfk airport by car from the empire state building so there you have it now you have the ability to do your own little mini turn by turn navigation app in swift ui until the next tutorial take care bye for now you

Channel: Jawaad Sheikh

Views: 137

Keywords: swiftui, apple, iOS, app development, learn to code, tutorial, mobile, map, mapkit

Id: BdP3tIehZes

Length: 32min 19sec (1939 seconds)

Published: Wed Oct 20 2021