SwiftUI - Maps Integration and Find Nearby Places

hello everyone and welcome to autumn sharp Channel and in this video we'll be learning about how to build a complete near me application which is going to allow the user to search for a point of interest like a coffee shop or a burger shop and then we're going to display it on the map as well as in a list so let's go ahead and first see that what exactly will be building this is the final output of the application I'm going to go ahead and search for coffee and as soon as I search for coffee you can see right over here at the bottom I can see a list of all the different coffee shops near my current location now if I actually zoom out a bit I can also see a different coffee shop so basically it's the same exact coffee shops but they are being displayed in the map as annotations so there we go now if I go ahead and search for let's say burgers you can see there are different burgers obviously in California that is in and out burger and you can see over here in this list we will have in an outburst of burgers all right so let's go to get started for creating over near me application all right so let's go ahead and get started well the first thing we need to do is we need to add some sort of a Z stack or some sort of interface that can display a map view as well as a text field right so I'm gonna go ahead and remove the text bar and order the text view and replace it with the Z stack the reason I'm using a nice tag is that I want to put the map but I also want to display the text feel over the map and that's the perfect place where you can use these tag because it is going to put stuff on top of each other so I'm going to go ahead and start with a text field and the textview is simply going to say search and for the text we are going to say dollar sign search because we will have some sort of a property of state property which will be all search so whenever we type in a search it's gonna go to the first property which doesn't make this right now but we are going to create it on editing change do we have to do anything over here not really so we're kind of like going to skip that and after that the final thing would be the actual commit all right so over here this is the actual commit when the person has actually pressed the return key or something all right the other thing that we want to do is we need to set up the text field actually you know what let's go ahead and silence it by creating a search so let's go at the top by the way this video is going to be a little bit long because we are treating the whole application so you can fast-forward but I suggest that you go along and see how we're doing the things okay so we added the search well let's go ahead and build the application all right let's find that the application is building hopefully now we should be able to set up the text field style and we do want the rounded corner so I'm just going to go ahead and say rounded border textile and we're going to go ahead and add a little bit more padding and a little bit more offset which we'll just go ahead and give with 44 let's go ahead and save it and try a game so that we can see our view being rendered let's go ahead and make this a little bit bigger okay so this is what what it actually displays right now let me go ahead and select command a and control eye a little bit more formatting okay so this is fine I mean it's just displaying the search box obviously we don't really have a map view and unlucky for us there is no way to get the map view because there is no map view control in surfy why so what we can do is we can use the MK map view all right so I'm gonna go ahead and create a brand new folder and I will just call it views inside that folder I'm gonna go ahead and add a new file and so file is fine and this will be a map view which will be a UI view or presentable which basically means that this particular map view that we are going to build will be based on a particular UI view UI kit element which in this case will be mkmf for you let's go ahead and start it with import surfing UI and we'll also go ahead and import the map kit because we will be using that and now we can start so a structure map view and we're going to say UI view representable alright now for a UI view representable you have to implement a couple of different things one of them is make UI view alright now this is going to take in a context so we can go ahead and give it a some sort of a context and what we are going to do is we will be returning a type which is MK a map view you can declare a type alias also at the at a start but I'm just ignoring that stuff it's the same thing map view equals to MK map view that's the actual map view part of the UI kit map dot show you their location do you want to see the user location I guess so so let's go ahead and set it to true map dot delegate equals to contact start coordinator coordinator will be the one that will process all the different functions for the map view like data update locations and things like that we don't really have a coordinator right now but don't worry we're gonna add it later let's go ahead and implement the function called make coordinator this is going to a trend as something we are just going to call it coordinator and it's gonna return us coordinator let's go ahead and pass in the self we don't really have any coordinator right now but we're gonna add that okay the other one will be the update UI view and right now we are not going to do anything over here for right now okay we need to focus on the coordinator so let's go ahead and implement our coordinator now you can create a separate class for the coordinator like a separate file I'm just gonna write it over here coordinator which will be NS object and it will be using MK map view delegate there we go and it will have some sort of a control and it will be a map view control and when you want to initialize it you need to pass in that control which will be all tied in map view and we're going to simply set it up so self dot control equals to control all right now we can go ahead and implement different function for the map view the right now we're not interested in anything but we can implement did add and Matthew did select and all those kind of things we can do that if you want to but right now we're simply starting out so we're not really implementing anything we just want to see the map displayed on the screen and that's pretty much it that's all we want to do right now taking you know really really simple aka baby steps okay alright so now we have that let's go to our content view there we go and since we do have the map view let's go ahead and say a map field Matthew doesn't really take anything is going to save it and you will see that we have placed my up you a little bit above the text field so this means the text field can display on top of the map view that's the reason of using the stack and now you can actually see that the map view is getting this click so if I go ahead and run this application you may be able to see the actual map getting displayed now it may not display the actual location because first of all is running in Xcode preview so it doesn't really know my location if we run it on a simulator it will still not show the location because we haven't really configured that so a couple of different things need to happen before we show the location but you can see it's actually working over here right the other thing I want to do is this search bar is right in the middle which doesn't really make any sense so let's go ahead and add the top alignment and now it looks much better it's at the right at the top right okay so what else do we need to do well we definitely need to get in the location we want to display the location and if you see our map view over here right now it doesn't really have any code to well display anything all right so we do need to let show the location we also need to request the location and that's the job for a location manager so I'm just gonna go ahead and add a new group and I will call it managers the location manager will be responsible for well getting the location and it will be start updating the location also so location manager alright there we go so we've entered the location manager import mapkit class location manager and it will be inheriting from NS object and observable object so we can get access to the location if you want to we're going to go ahead and create a actual location manager which is location and manager equals to CL location manager that's a real one alright and we can also get our location although we're not really using the location but if you do want it so we can actually put it over here and you can get the updated location if you want let's go ahead and override the in it and inside the initializer Oh first of all we're gonna go ahead and call the super in it and now we can actually go ahead and set the actual location manager now this is the CL location manager which is responsible for actually getting the location all right so the one that we have location manager the one that we created which is right over here this is the one that is the one that's wrapping the other one the real one okay all right so first of all we can really do that line number twenty is basically saying that you're trying to set the location manager delegate to self and self is location manager the one class that we created but it is not conforming to the location manager delegate so let's go ahead and create an extension and now some of the people we all say over here okay why are you creating an extension a I mean why can't you just do it inside inside the main class like inside right over here and yes you can do it I think by creating an extension and extending the location manager delegate or some other delegate it just makes it go a little bit more cleaner because we can now read all of this stuff which is part of the location manager initialization and we can read the stuff which is all related to the location manager delegate but yes you can put all the codes that I'm about to put somewhere else also okay so a couple of functions that we can implement although we're not really going to use some of the functions like this one which is the did change authorization we can go ahead and print the status this is the important one which is data update location and we simply assign the location to the location whenever we have signed this over here since the location actually it shouldn't be well it's not really marked with published but we can publish that like we can do something like this if we want to all right so whenever the location is set it's going to publish an event and we can get the new location go ahead and build that okay so our location manager is done that is great now it will be a good time to start using our location manager so we can start tracking the user and we should also be doing authorization all right so let's see how we can do that all right so now we can go back to our content view and we can initialize the location I'm going to close this can with me because most of the time when you're working with the map view it will be a good idea to actually run it in a simulator because the Xcode preview doesn't really work as expected so I'm going to say over here observed object and we can go ahead and set location manager and go ahead and initialize location manager so when ever we initialize the location manager it's going to go to the location manager class the one that we build and it's going to fire all of this stuff all right so in other words it's also going to be asking for permission which you can see that we are asking right on this particular line so this is fine and it's actually good that we are asking for permission but we also need to set up the permission in info dot P list which we have not sent so let's go ahead and run this and maybe we will see an error in the console let's go over here okay there we go so some sort of our error is actually there which is in its location when it's used in description so we need to add that key all right so let's go to info type in list and we are going to add a new key and we can say near me hab requires access your location I mean this is your custom message you can actually set it up to anything you want and let's go ahead and give it a try again okay there we go that's the dialog box that we were waiting for and now we can say allow while using the location and there we go so that is our location all right super cool the one problem is that this is so zoomed out that I don't even know where I'm standing so it will be a good idea that if we are zoomed in so I can at least see some you know neighborhood okay so where should we add that code let's see we'll go back to the location manager and you can see that in the location manager we have a couple of different things going on actually sorry we can actually go to the map let's see where should we put that code let's see location or not location manager although we can use a location manager to do that we can also I believe use map view to do that all right so here in the map view we can implement these function in the coordinator sometime I also get lost like okay where do I have to implement this function so I'm going to go ahead and implement it did add annotation views keeping in mind that the view that is added which shows your location the blue dot is also an annotation all right okay so let's go ahead and say if or if let a notation view equals two views dot first and most of the time the first view is your I guess it's all all of the time it's always the your view basically your location if let a notation equals two annotation view dot annotation again we're going to unwrap it now we can say if annotation and you can do it in a different way also and like using guard or something m'kay and user location then we can go ahead and create some sort of a region all right now this region would dictate that how far you want to zoom in or zoom out and we are saying that latitude meter is one thousand longitude meter is one thousand which is kind of like the stand that we are creating and you can change that to see how far the room that you want let's go ahead and run the application again and hopefully this time it will zoom a little bit so that we will know our surroundings there we go okay so I am right over here in the Apple campus that's pretty good right yeah okay now let's move to the actual text box or the text field we can enter something over here let's say I'm interested in coffees I can enter coffee but it doesn't really do anything you can see I still don't know where are the coffee shops so we need to take care of that let's go back to the content view and over here whenever we press the return key this particular all of this gets fired the commit gets fired and we are not really doing anything in the commit so this is our opportunity to do well do something in the commit what we need to do is we need to get the nearby landmarks now you can use Google Maps API and that's gonna take a little bit of time to set it up and it's also going to charge you eventually so what I'm going to do is I'm going to use a m'kay local search request which is part of the iOS framework so in land marks there we go and the first thing we need to do is to create the local search request so let's go ahead and create that the second thing that we are doing is we are setting the natural query language self dot search actually you can just say search over here that should be okay and m'kay local search is undefined so make sure that we import mapkit let's go and build it again oh yeah there we go all right so now we can use MQ local search the first is the first term which is assigning so basically coffee burgers or whatever you want now let's go ahead and create the search equals to m'kay local search and passing in the request that we made our lead which is simply request and now we can say a search door start and it is going to give us a couple of different things it's going to give us a response error it's gonna give us the error all right and now we can check that if let response equals to respond so it's kind of like unwrapping it let map items equals two response dot map items which is an array of MK map items and once we have that we can assign it to the something called the landmarks which we don't have so what we want to do at this point is to assign it somewhere are populated at least somewhere so that we can display it on the map but the problem is that we don't really have anything to populate like wait should we populate so I'm gonna go over here and create a new group will call it models and inside the models I am going to create a landmark model so let's go ahead and add a surf file and I'm just gonna call it landmark so this can be a landmark like a coffee shop or any other thing and now what I'm gonna do is I already have a landmark code so I'm just gonna have that you can see landmark is created using the place mark it has an ID it has a name it has a title it has a coordinate all right now in order to display the landmark we will also need a landmark annotation so let's go ahead and add a landmark annotation so I'm just gonna call it landmark annotation the purpose of landmark annotation is to display that annotation on the map so you can see it takes in the tight takes in the coordinate and initialized uses the landmark the actual model and set these things up and then later on we can add this landmark annotation on the map since it is actually in a notation which you can see right over here ok let's go back to our content view and in the content view now we can go ahead and create an array of landmarks so there we go and I want to be get the result from the MK local search we can go ahead and assign it to landmarks ourselves or landmarks equals to map items map items dot map and since it's a map or aka transformation operator we can go ahead and return a landmark by passing in the place mark which will be a dollar sign zero of the first item dot place mark so using the place mark we were able to create an array of landmarks ok great ok so what else can we do so we are displaying these landmarks while not displaying it we are populating these landmarks and they are marked with state which means as soon as you set a new property to landmarks the render gets fired and this is our opportunity to feed in the data to the map view but you can see that the map view currently does not really take in any parameters so let's go to the map view and maybe update the map view so it can take in a array and array also landmarks right over here so now we can pass in an array of landmarks great right let's go back to our content view and we can go ahead and say landmarks south well we can simply say landmarks I guess there we go okay so since we are setting the landmarks later on and it's going to pass into the map view the update function of the map view it's going to get fired and what we want to do in that update function is to put all those landmarks on the map so we already have a function called update annotations which is responsible for first of all removing all the annotations because maybe you are searching for burgers but then after that you want to search for coffees so we want to remove all the annotations then we are going through the landmarks and creating the landmark annotation which remember we created that earlier and since it's an annotation we can add it to the map so let's go ahead and call update annotations and we are going to pass in a UI view which in this case is the map view all right let's see over here my content view that if we are calling this function this function get me nearby landmarks and you can see we're not so when you click the or the new press the return key of the text view we can go ahead and call self dot get nearby landmarks let's go ahead and build that again and let's go ahead and run this hopefully it will display us the landmarks we may have to zoom out a little bit but we'll see okay so what are we searching for coffee and you can see the landmarks are not displaying maybe we need to like zoom out a little bit and there we go the lemons were displaying it just said we zoomed in maybe too much all right so you can set the zoom level from 1000 to something else okay let's search for burgers Wow lots of burger places in and out in and out is actually now in Houston also I've already been to in and out in Houston but they have in and out I mean we have in and out now SuperDuper burgers okay very cool so that's actually the one half of the whole story right we still need to work on creating some sort of a list that we can drag up not drag up I guess we can just click on it and it just fills up the whole screen we click again and it goes back so we still need to do that so let's go ahead and work on that now all right so next part is to display all the stuff and for that we are going to create a brand new view which will be called the place list view all right so I'm gonna go to views and I'm gonna say new file and since it's a view like a surf uib I'm just gonna select surf UI view and let's go ahead and give it a name place list view and the respondibility of the place list view is to well display all the different burgers or points of interest for coffee shops in a list that's what it is doing all right so let's see if we can actually create that view now I'm not going to be coding the the whole complete view obviously I will paste it and then we'll learn as we go what exactly is going on in the view or else this video will be like 10 hours long okay so where should we start well the first thing is in order to create this place with view you should pass in a little list of or array of landmarks so we have an array of landmarks so that's done right now we obviously don't need a text hello world over here so let's remove that and replace it with a V stack vertical stack and we are going to give it some sort of an alignment so alignment this will be leading alignment you can already see that it is complaining on the bottom and also over here let's go ahead and put something where here doesn't matter let's go ahead and zoom out a bit so you can see on the bottom line number 24 is complaining because we haven't really passed a particular you know particular list of landmarks so let's go ahead and pass it a list of landmarks so that it can be happy ok so here we go and array of landmarks here we go we will say landmark we do have to provide a place mark will kind of simply say m'kay place mark and hopefully it's gonna like that or maybe not okay so we may need to import something else which is map kit ok all right so let's go ahead and begin with that we have a V stack we stack doesn't really have anything what we are going to do is we are going to do we have an empty view over here we don't have an empty view okay all right that's fine but there is already something called interview so we can just use that so we'll start with creating the gestures all right and what we will do is we will do the tamp gesture so let's go ahead and add the tap gesture so the first thing I'm going to do is I want to give the responsibility to the parent to control the tamp so that's why I'm putting the tamp gesture all right I also wanted to create a horizontal stack which is let me actually see not this one you can see already we have a problem over here so let's go ahead and try to replace it let's see if we can fix that on tap what do we want to do on tap well let's go ahead and jump here not really anything you don't really want to do anything over here on the tap so that is fixed and what we want to do is we want to start with a horizontal stack so we'll say H stack and we will start with the Mt view all right because what we want is the top to be a little bit more empty and we can set the frame so let's go ahead and set the frame and we can say a bit will be you I scream dot main dot bounce dot size dot width and height will be 60 this is kind of like that handle that we're trying to create and the background view will be color and you can use any color that you want so color dot let's say gray should be okay but you can change it later on if you don't like gray that's perfectly fine too alright and so why it's complaining about that let's go to build it let's try it again maybe the Xcode preview is failing it's very hard to tell what's going on okay alright so the next thing is that we will add the gesture so let's go to that gesture and this will be a tab gesture so let's go ahead and add tap gesture and with the tab gesture we can say that on when it is ended we can fire self dot on tap the closure that we added so we can go ahead and fire that all right the next part is the actual list because without the list well it will be useless so let's go ahead and have a list and we are going to use a ListView let's go ahead and make sure that it's at all nicely formatted there we go and really using a ListView in this case which is going to iterate through the landmarks and going to just write the name or in a vertical stack the landmark name and the title alright and it's not going to animate so that's what we're going to pass in nil because we don't really want the list to animate when we are populating the list again and again alright okay the final thing is the actual view which is the vertical stack which is right here we can go ahead and said some sort of a corner radius let's say ten or something no way now let's go ahead and try to use this particular place list view so I'm going to go to over here to the content view that's what let's do a little bit and inside the content view it really depends where you wanted to get displayed so I want it to be right here so I'm just going to say place list view and you will see that we do need to pass in the landmarks and we have to provide the on tab implementation so landmarks will be easy because we can simply say landmarks and for the on tab implementation it can become a trailing closure where we can do something and now you can see that it's covering up the whole screen and most probably we don't really want it to cover the whole screen okay and we can actually check it out we can simply say offset offset and let's say if I give it just trying it out like if I give it a hundred what actually happens there we go so you can see it's actually moving down which is great okay all right so next up would be we'll go ahead and add animation that it will animate a little bit we'll go ahead and had a default spring animation and offset will be a calculated by a calculate offset function which we will implement the calculate offset function is simply going to well calculate the offset and give back to you so let's go and implement that all right we may have to say self I think over here together self over here let's see let's go ahead and build that okay so here does a couple of different things there is no such thing as tabbed we need to keep track of whether it is tapped or not so I'm going to add a new property which will be call tapped and let's see if it was a little wood there we go let's try it out you may have to run this but right now is fine you can see there we go so right now it's not displaying anything alright and when we do tap this is a function that we have to implement which is basically what to do when you are actually tapped alright so when you are tapped we are simply going to toggle it so itself not tapped not toggle which means if it's off then turn it on if it's on off off and on alright and let's go ahead and run the application we may have to do some things so that it actually appears well let's see let's go ahead and try it out so I'm gonna say coffee and there we go a nice animated and now you can see now if I tap it it covers the whole screen if I tap it again goes back now you can see the radius it can be adjusted a little bit more if you want to and what I'm going to do is a little bit zoomed out and there are all the stuff you can see all the coffee shops being appearing over here I can tap it and I can tap it again obviously the colors and everything you can change if you don't like the gray color that's fine you can change it that's not a big deal so there you have it we have created the complete near me application using served UI wow that was a long video hopefully you have enjoyed the video and if you want to learn more about of UI then check out my latest course stuff you want and declarative interfaces for any Apple device this is a 14 plus our course with more than 2600 students and rolling this is the best-selling course as you can see right over here we have the best-selling label thank you and let's go ahead and check out different sections and what this course will be covering we're gonna start with creating and combining views building lists and navigation this is my favorite chapter or the section which it understanding state and binding extremely important and you can see that's why it's an hour long and then we're going to jump into understanding mvvm design pattern implementing the coffee ordering a vacation in south UI so this will be integrating with the api and you will be using mvvm design pattern you will also learn how to integrate with core data and also core ml machine learning all right and then at the end this is a really fun section because you're gonna learn how to create Apple stocks application which is on your iPhone so you're gonna create it using surf UI all of this for an amazing price now if you need to get this code which you should check out the link in the description and you will find the different links for different courses click on safety wine or do it any other course you can also buy multiple course if you are feeling much generous and if you want to learn different things like sweater or something and by using the link so please use the link in the description if you use a link you will get the best deal and to be really honest usually I get to keep a little bit higher revenue but the deal is so good that you won't really mind alright so click on the link get the best deal and start winning Sophie why I really hope that you have enjoyed this video and let me know I mean I know that I've been creating these different videos a little bit longer like a longer timeline I mean they're running like at least like a 30 minutes long now but they are covering the whole thing instead of like okay one section it's covered covered this one one section of this and so on so let me know how you like this kind of a form and I actually do enjoy because at one time I can just put the video out and that will be covering one particular task completely so that's always good alright thank you so much and thank you for your support and hey go ahead and buy my course thank you

Channel: azamsharp

Views: 8,350

Keywords: swiftui, swiftui tutorial, ios development, swift language, swift, xcode, ios

Id: WTzBKOe7MmU

Length: 39min 57sec (2397 seconds)

Published: Wed Feb 12 2020