.NET Maui Apps | Using Map to get locations in Mobile and Desktop Applications

Hello friends and family welcome  back to netcode pop Channel   in this lesson we are going to talk about  maps in dot net marry so when do you want   to create your application that is a mobile  or desktop app and you want to use map in it   how are you going to do it so in this video we  are going to cover some basics of map in Marine   now when I talk about Maps there are two ways  of displaying map in Mario mobile application   specifically Android you can call a map installed  from the application or you can use your own map   in this video we are going to talk about  the two ways of using mapping married   so the first one is we are  going to create a button   now when we click on this button you want to  access our location and display it on the map   so that is what you want to do first the  second part here we are going to install   we're going to use the map open the map  on the same page in the same application   so the app that we have created and installed  we are going to open the map on the same map   but the first one we're going to open at  the map that is installed on the platform   okay so let's have a look at the first one now  let's add a button so we can click to get or to   open map and get our location so I've created  a project here and I run it and you can see I   have the default as you can see that's my main  page I have nothing here so let's add button to this and I'm going to say so show my location so save this and let's see  so you have this button here so let's put this to Center and let's say this to   Center as well as I said there  width 250. okay so we have this and let's service us okay so show my location so I we  are going to click on this button   now if I click on this button it has to open  the map installed and display our location   so in doing so what is the first thing that we  need to do let's install some packages here let's   install this community tookit.mvvm because you  want to use the mvvm that is a model VV model   architecture to do that so let's go to uh Explorer  right click on dependencies and I'll go to manage   me get packages so let me close this up write  it again and now I think I've installed this   project or this package already so click on the  browse Tab and now in here but type in community so Community toolkit dot mwbm so that is this  so two kids Dot nvvm so you want to install this so let's see if we have it installed now if  I go to my platform Android and I'll go to   regarded dependencies um Android  and go to packages and if you see   that is this one community.ngm that is  what we want to install so let's see so Community toolkit okay so try to install that and I think I  can start it over here already so click on   the browse to happen now install this  package let's see so when you are done   the next thing that you can do here is it's  very simple let's go to Mi program and you   will see here we have nothing we have this  the default one so there's no registration   you're not going to restart the package that  we have installed what we can do here is   we are going to open the button so let's  create a view model so in a package over here   that is solution Explorer let's create a folder  called view model so let's add folder here   and ask the view model so this view module  let's add a class or a model and since this   yeah so this model is going to relate to this  main page I'll say this main page review model now this is going to be a public partial class and this will inherit from observable  objects so observable objects so let's generate Constructor for this right now we want to use so first of all let's  check if we are connected to Internet so if   you're connected to internet then we are going to  open the map okay so in doing so let's first grab   High connectivity so we can use this or we can actually go   in straight for that so once  you have this here let's see let's create a method and now that's going to be  public is saying task and let's say   open map okay uh select location then on top of this let's add really command so we're doing this first  last second so we can use if so connectivity so let's use connectivity dot  current so dot network access it's not equal to network access  dot internet so here we are checking   then you want to display so I will sell but  current so let's display analytes so we say oops so let's say you need internet connection for this okay then you can just return that's all  now else this is what you want to do we   are going to open a map so we can say a weeks  and before we open map let's inject IMAP here   then we say map so control period  let's create an assign fill   so we're going to say await this map dot then open  async so with this open listening we need to get   the latitude and also the longitude okay to  display this so we have to First grab the   location of the user how did it take the  location of the user so let's first go to   the Android go to platforms folder then  Android and we go to androidmanifest.xml so this right click and open width and let's use  the XML test editor click on OK and have this open   so if you see that from here we have access to  network and we have access to Internet that's   your permission let's plug this in half and get  access to location as well so let's copy this   and let's press this let's face two and  here we are going to play this so dot access so you're gonna have access underscore   in the we have Android dot permission  direct access underscore and course so underscore location then the next one we are going to play this  Dot access so underscore fine then location so we need to grab these permissions on the phone  before we can have access to this location now   let's say this let's go back to our page now  in here we first have to open or there are   vacation first so let's create a  variable now let's say this is get   so let's use get current location so we  say via location and it says equal to so I wait and here let's also include this let's inject add your location as  an interface you can have access   to your location so we say add your location   then we say location and let's create an  assigned field so we say I wait the location so we say await geolocation so let's call this and that is this one so let's call this because we've injected this and now we  can actually go in for this location so your location so you want to use this it is saying this does not exist  so let's see the reason why so we have actually okay so this might be right up and it might be here okay so I'll wait your location dot let's get  La known location async so let's get this   so we get the last location and now we're  going to check so if location is not   then this is what you want to do so we want  to grab location so location is equal to   we can now call a rate geolocation  then dot get location is in then in here in this good location we can now go for new   your location request you see now this request  there are some few things that you need to get   and the first one that you have decide  accuracy you want to set this equal to   um your location accuracy so we have you can  go for the best then we can go for timeouts so timeout is equal to let's say this is  time span Dot so from let's make it from   seconds and how many let's add 30 seconds so  that's a time span to get location then let's   get requests full accuracy is equal to true  okay now in here after grabbing this location   you know we can come here and check so as of  now if location is still now then that's what   you want to display live display and information  to the user that you couldn't get the location so let's open this and let's  cut this one and put it here so so we say oops sorry so you could you couldn't we couldn't get your location all  right yeah okay so we need less credit   you couldn't get to your  location then if you can return okay but if this location now let's say we have the location now  then what can we do then we want to open   so then open map and use the location so values so we have the location and  now in here so we're gonna awake open   Maps so we open map over here and what  are the few things that we need to specify so let's see let's close this  open map and let's specify   the the first one if our closes and openers like  this we see we have location it is a value that   let's see you can also have a place Mark we  can have latitude and longitude so this is   what you want to specify okay so we can get this  from location dot we can have latitude and you   can have location dot we can also grab magnitude  from this then plus lines new map launch options and on this launch options  this is what you have to do   let's set the name so the name here is going  to be my location or my current location my current location then let's say navigation mode  is equal to navigation mode dot not because yeah   you're not going to drive if you want to drive  to that place you can use bicycle.living.clanset   Etc we're going to use none okay  that is this now let's save this   and Let's Line This in application so let's  run this and see but what you have to do here   is we have to register this before we  run it so let's go to the myprogram.cs and we need to resolve that so myoprogram.cs let's  restart this unit here so I'm going to say that   builder.services and with this we are going to dot add Singleton let's use the interface to eye connectivity eye connectivity then in here we say that connectivity and activity dot currents so that is what you want to use less  process like this okay now let's also   register the map.services.ad Singleton so dot add Singleton then this gonna be I map and now we say that map Dot defaults the last one  is the geolocation so let's draw that.services why is not popping up because I'm running  yeah so beta.server says dot add Singleton   the reason why we are adding Singleton  here is we want to create it once for the   whole application so one and let's add the  ideal location so Singleton I do location then here to receive your location dot default so you say your location let's get it again your location dot default  okay these are the things I need to do now this   view model that we have created now let's grab  this let's banish to the context of this main   page so we go to this main page where we have  this um the code behind file let's inject it   yeah then we say binding contest  binding contest is equal to this   model so control period let's inject  the reference let's make it over here now we have this let's go to the page stuff and  let's add the reference the name space and also   a data type so Excel Ms XM and then space let's  say this review model then we say that name space   and now this namespace the name of the app  is demo.v model let's add editor type so X   data type then we say recorded view model that we  have created and then we can grab this main page   so this in that main page you have a button  over there so let's add this command and   let's bind this command Q select location  command very simple now let's refresh this and we're going to check first  then I reconnected to internet   if no we're going to have a pop-up  Okay then if not you want to have   the next time to to display if you have  connected then let's see so in here   before you go to this message model we  can also inject this eye connectivity so they say no parameters Constructor  defined so let's close this up   let's less it again so we can  also say that High connectivity then connectivity control period create and  assign field so we have this connectivity   okay now with this connectivity you know  there is map we are using the Mark here so this map might be the reference that we created  this map that's what you are trying to okay now   this connectivity we can also check this here so  let's say so if connectivity dot network access   here it is equal to internet unless it is not  equal to internet okay we can also grab the   same thing and display and it's still going  to work so there are two ways of grabbing or   checking the internet okay we see we are using  the interface here and getting a method known as   network access okay and that is how to  be attacking so we grab the interface   and there's a network access as a  method in it in this interface and   that's why we are using to check so any  of these is going to work now let's see so we save this we have our   from Spotify created our interface is injected  utilize or initialize them and we are using them   when we go to our main page here we bind the  contest so let's grab this might be the next okay so let's save this now let's run  this again and see what we have now okay so we have an exception here and  no parameters or splatter you find in   this main page now when we navigate to this  main page if you see it doesn't know of this   because this has not been registered so let's  go to this mariprogram.cs and in here let's add   Builder dot Services dot add Singleton  now here let's register this main page so main PhD model then the next one less Services let's register  the main page itself there is a main page this will solve the problem so let's refresh this so with here what's our app launches   let's see what we can do when we click on  this button we ask we're going to check is   our device connected to Internet if it  is yes then we're going to open the map okay so click on this now show my location if  I click on this button let's see the outcome   now it is saying that allow demo this app to  access the location so you want the approximate   one or the precise one so let's go for this  precise one when using this app okay so let's see now it's going to open our map and it's going to check for our location so  let's see if so obviously my current location   and that is where I am now so it is navigating to   the Androids place we see we have  this that's my current location so if you see this this pin here so that's my current location  that's open a different map   let's open the map installed or the  map app now this is our application   if I click on this button you can  see that there is our application so it's nice to click on this then it has to  open this map and now grab your current location   over here and that is a current location so if  you see the name is nine current location is   actually when we go to our V model the name that  you set to us okay so my current location okay and that is what we have now so obviously we can get allocation  like I decided to also open this in   the windows that's what I can see so now let's turn our data off and see so let's check let's switch  off our internet from here and now let's open the map  let's go back to application and let's try to click on this button again  to see so it's saying that we need an internet   connection to do this okay now click on OK so  now we have this list of this and let's change   this to Windows you and see if it's going  to work now let's run it on Windows and see so now on Windows let's click on this show my  location so I click on this to my location and   I'm just going to open this map and now it's going  to navigate to my current location so let's see so let's see where I am let's click on it again so you can see it is navigating to my location  and it is saying that my current location   and that is where it is pointing up to   so you see I am getting the current location  and it is pointing to where I am now okay so it's loading the map and I'm  pointing to my current location you see so that is why I'm now you see good so um it is saying it is 7th Avenue   um I said that's my Accra and that's the current  location so if I want to move the location let's   say the location that I am getting up to you can  just click on directions and you can navigate   because you know when certain updates we set  up as a navigation to be um num as you can see   from here but here if this is car or if this  is a driving then you can click on this button   then we can now get a direction it's going  to get us a road or a path to the location   that we are getting so you see this is also  working now since I'm connected to Internet uh let's say I am off from internet now open the  app again now show my location and it's saying   that you need internet connection for this so  we see this also where I can both Android and   on Windows yeah now this is the first one now  what is the next one if I want to open this   I want to open this map on this application and  I want to open the same map here the map that we   opened from this we want to open this map from  our within application how am I going to do it   I'm going to create the next video to  explain how to do that so I believe   um this is clear and also um it's very simple to  integrate it as well that is it for this video   um if you like what I'm doing and just  subscribe to the channel also give me   thumbs up also as well if you have an issue too  you can just put it under our comment section   that is it thank you take care of yourself  and I will meet you up in the next lesson

Channel: Netcode-Hub

Views: 708

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, scalffold, scaffolding, migration, database migration, creating models, fileupload, blob, javascript, ef 7, authentication, client-side, jwt, token, role-based, assign-role, maui, mobile apps, consume web api in maui app, maui app, mobile app, desktop app, create app, barcode, qrcode, android, apk, applications, application, publish, windows, MSIX, publish apk applications

Id: NgszdNUxL7E

Length: 31min 49sec (1909 seconds)

Published: Tue Aug 01 2023