One highly anticipated .NET MAUI
feature is the .NET MAUI Maps, showing maps in your application. A
first version has now been merged in .NET MAUI. So it's about time that we have
a first look. And if you stick around until the end of the video, I'm
going to share with you a little secret about how you can get started
yourself today. If you have been around since Xamarin.Forms,
you know, Xamarin.Forms had a separate Maps package that allows you
to show a map in your application. On iOS. That would be Apple Maps. On
Android. That would be Google Maps, right? So it would show the map
that would belong on that platform. You can do all kinds of cool stuff,
adding pins, adding polygons, adding all kinds of crazy stuff. So a
lot of people were disappointed that the maps were not in the initial
version of .NET MAUI. I can totally understand. And now for .NET 7,
we're planning to release .NET MAUI Maps. So it's going to be
here. I put out a little Tweet, I did a little something
on the community tab here on YouTube and like asking, hey, should I do an
early preview version? Because the code has just
been merged, it's a first version, we still need to work out some bugs. But we're
on track to release this for .NET 7. And I asked like, hey, should
we do a first early preview? And a lot of overwhelming response
came in like, yes, I want to see this early version. So here we
are. Now, before we get started, there's a couple of things that are
good to know. There are a couple of breaking changes. So we had a lot of
properties that were named HasZoomEnabled,
HasTrafficEnabled. And it's kind of like weird with the
has, right, the properties that start with has and we had, I think one property
that was named IsShowingUser. So that was also
inconsistent. So we made that consistent. It's now
all called IsTrafficEnabled, IsZoomEnabled, all that
kind of stuff. It starts with Is, but another, maybe even a little bit
bigger change Is that we have now. Essentials is built into
.NET MAUI. And Essentials has a Location
object. For Xamarin. Forms Maps, we had a position object.
Both do kind of the same thing. They both have a set
of coordinates that can point to a location on a map, right? So we
decided to get rid of the Position element and use the
Location object that is in Essentials so that you can use the
same for both. That will also make it easier to integrate both of these
codes, both of these APIs. But that means if you're transitioning
from Xamarin.Forms, there is some stuff to get used to. Let me just show
you with a little example. Let's dive into Visual Studio. Now
this video is going to be a little bit different than you're used to for
me because this demo is completely set up already. I just want to give you an
early preview and early look of what is coming, what it looks like
right now. And as such, I already prepared the full demo. So
here we are in Visual Studio 2022. I also booted up the iOS Remote
Simulator with which you can show the iOS device, the
simulator from a Mac that's connected to the network on
Windows. Not just because I'd like to show you that this also works,
but also because when I was preparing this demo on Android there were a
couple of rough edges on the Android version. So right now iOS
seems to be the best version working and it's also the easiest one because you
don't need any API keys or anything. So the first thing we want to do is go
over to our Solution Explorer and right click on our project and say
manage NuGet packages. Now here you can see already two
NuGet packages. These are not publicly available yet. That's where the secret
comes in. In a little bit, stick to the end. But you will find
these whenever you have that set up on your machine. And the one you
want to install is Microsoft.Maui.Controls.Maps That has a dependency on this core
package, the Microsoft.Maui.Maps. It will pull that in automatically and
you're good to go. Notice how here the package source is set to
local downloads. If you don't know how to set up a local nugget feed, there
is a video popping up on the corner of your screen right now. Or
find it in the video description below. I have a video on that to help you
with that. That will come later. Now we've got that set up
whenever you've installed that. We want to go
to our MauiProgram.cs because we now have this new AppVuilder and you
want to do UseMauiMaps. That's it. That will register the
handlers and everything that's needed to set up the maps. Just that one line and
you're done initializing basically. So another
thing that you want to do is ask the permissions if you want to
use that is showing user. It's going to show a little
indicator of where your device actually is. And typically that means if you're
holding the device where you are in the world. So you want to add permissions
to that. For Android you can go to the inside
of your .NET MAUI project. You need to go to Platforms,
Android and the AndroidManifest.xml and you need to, inside of this
application, add this metadata. Well, this is actually not
the permission. This is the API key that I'm explaining right here. So
you also need to get an API key. It's in the documentation, for
Xamarin.Forms, the documentation for .NET MAUI Maps will come really soon. Go to your
Google developer account, get this API key. Don't worry
you hacker persons out there. This one is invalidated by the
time you see this. But you need this API key in there. If you don't
have it, it will throw an exception on the UseMauiMaps if it doesn't
find this key here. But if you want to also show
that location that was what I was actually talking about. You need
to do the locations right here. So make sure that you put these in
here so that you request the right location. Of course, the same thing
for iOS, but now in the info.plist. So let's
go here with open with XML text editor and you can see down
here that I'm requesting this location permissions with a
little descriptive string of why I want to use the permissions.
This is the same thing for macOS. The code can be found on GitHub so
make sure that you inspect it there in full detail. So now that we've got that set up, we can
actually start implementing the UI. So let's go to our MainPage.xaml and the first thing you want to do is import this
XML namespace. I've called it Maps. This can be anything. And you
want to look for Microsoft.Maui.Controls.Maps so that has the map control and
now you can start using it with Maps and Map. We're working on
hopefully getting rid of this so that you can
just use the map like any other control. But for now, to make sure
that it works, do it this way. Also if you want to use that
location inside of XAML, so not the position location, you need
to add this little namespace right here for the essentials which
lives now under Microsoft.Maui.Devices.Sensors. That's where the location
object lives, so that you can declare locations inside of your XAML as well. So now
we got this. Now we got this map. I gave it a
little name of mappy IsShowingUser is true, IsTrafficEnabled is
true. Let's actually just run this on the iOS simulator while
I'm talking to this so that we can actually see it
in action as well. And here you can net all these kinds
of creative things. So we have a couple of other properties here,
right? We have the other thing is what we have more IsScrollEnabled.
So if you can actually scroll to other locations, is visible. If it's
visible, yes or no. IsZoomEnabled. If you can pinch and pan to
zoom actually the IsShowingUser is it showing your
user location. IsTrafficEnabled that will show the
traffic information. So it will have little red and orange and green lines if
there is a traffic in some kind of street, yes or
no but you can do much more and you can do that both. You can
do all of this in code and in XAML, whatever you prefer. But
you can do also polygons and lines and mark different territories on a map. Now in
XAML it's kind of verbose. You can see it right
here. I'll just scroll over it really quickly. You can set different
colors inside of like this geopath so it will draw this
thing for you. And you can do all these kinds of
things. So this is a lot to take in XAML. But
you can also do this from code which probably makes more sense.
But you can do this from XAML as well. So lots of options here.
Now the application booted up here on the right. Let me
get myself out of the way here and you can see that it asks for my
permission, right? So that's good. It wants to show my permission. Well,
let's do it while using the app. That's great. And we're seeing
here the wonderful island of Maui, Hawaii. So that's the default
location. But you can net the location, of course, whichever it has to show initially. So
we can zoom out here a little bit as well. We can go all
kinds of ways. You can do pan to zoom here. Just have to hold
down that alt button, the command button and we can zoom
out. And here you can see it's showing our location. We have this little blue
dot. That's how iOS shows the location, right? So I think this is in the Apple
campus probably. And here a little bit above
you notice this little black dot. So let's zoom in on
that. This is in Seattle, in Redmond to be exact. I think this is the
Microsoft campus. And that big blurb of XAML that you
just saw is creating this. So you can mark this
kind of like orange thing here, the blue thing here and a line. Maybe
this is some kind of road, I don't know. I copied this from the
Xamarin.Forms documentation. There was a little example so I just
took it from there. But yeah, so this is there. You can do this. And
what I didn't show you yet is I added Pins. So you can add Pins
on the map as well. I did that from code. You can do it in
example as well. But here in code you can see mappy. So that's
the name that I gave it, Pins.Add(new Microsoft.Maui.Controls.Maps Pin, you have to give it a label, I
think, else it will blow up, which is conveniently. Something like
subscribe to my channel. Maybe you're watching a YouTuber right now that you
think, hey, this person deserves a subscribe, do it now. This is your
time. And a little location, right? So we have this location which
is actually really close to me. So we can zoom out a little bit. Zoom and scroll a little bit here. Oh,
there we go. There's the pin. This is how iOS shows Pins. And
we can zoom in. We can zoom in. You can click it.
It does a little bouncy thingy which is really nice. And you can also
see here in Cologne, I'm close to Cologne, you can see the traffic
information, right? So you can see all these red. There's a lot of traffic
right here. You can see the red and the orange. I can go back here to my
example. I can say IsTrafficEnabled, I can
say false and boom and it goes away, right? It also works
with Hot Reload which is really amazing. So set it back to
true. You can also choose the map type. So you can do MapType Satellite. We will get the satellite
image so the satellite photos, it doesn't work together with
IsTrafficEnabled. So we lose that. But if you want to have both, we can set it to
hybrid and you will get the satellite images but also the streets.
And you get back the traffic information here. So you got
all kinds of options now you also have all kinds
of events and commands like map clicked. So whenever
something is clicked, I think you also get back the location that you actually click
the GPS coordinates and that kind of stuff. So there is
lots of things going on. One other thing while I was in the
code behind here is I did the request permission. I don't think the
Map handles the permissions automatically, at least not on Android is what I
found. Maybe that's another bug, I don't know. But you can request that because
we have essentials and these permissions API
is built in right now. It probably needs a little bit more code than this to also
find the fallback scenarios. But now this is good for my use case
and that is kind of like a really quick overview of how maps
works right now. So that's cool, right? We got lots
tons of options. You can do all these kind of things
with Maps. Of course, there is crazy other things. I think over the years a
lot of people have requested also the clustering of pins and that kind of
stuff. Let us know in the GitHub repository, the .NET MAUI GitHub repository, what else
you'd like to see or better yet, just contribute to our wonderful
project. Now I promised you a little secret on how to
get started with this yourself today. So let's just quickly
hop back to the screen share and I'll show you. So here we are back
on the screen. I opened an InPrivate browsing session on the
Edge browser and let's go to GitHub.com/dotnet/maui Now the InPrivate is just so you're
sure and, I'm sure, that I'm not logged into any accounts here.
So that you're sure that you can do this as a non-Microsoft employee as
well. And then you here in the top bar, if you just go to the
landing page you will see a little red cross here. Typically it
should be a green checkmark so that the build has
gone through successfully the continuous integration build. But
if you click, regardless of the icon that's here, it can also be a yellow
dot if something is in progress. If you click it here, you can go in
here and you see all kinds of build pipelines. Now the one that
you want is Maui-Public. So look for that and you can go to
details here and you will get all the details about this build. How
many tests has passed? You can see we have 16,000 tests running for each
build. So that's really amazing. 0 failed,
good news. And you can scroll down here and you
can see a few more details on Azure Pipelines. It's a bit small
but it's there. And if you go to there, you can inspect this on Azure
DevOps where this is actually running the builds. As you
can see here. Let me zoom in here a little bit. We
have related and here is published and consumed. This is the
build artifact. So each build produces build artifacts. You can go
in here and this is all the build artifacts that we are producing,
which is NuGet packages, which is documentation, which is all kinds of
things, logs, whatever. But you want to have this
NuGet. And if you're not logged in, if you're logged in,
you can view all the files that are in here. If you're not logged in, like
you're probably not going to be, then you can only download one of
these artifacts as a whole. So it's a big zip file. And
you can go here all the way to the right and you can say
download artifacts. Whenever you do that, you will get this NuGet package zip. I
think I have it here. And inside of that you will have
another NuGet folder. But you will have all the NuGet packages
that make up the workload of .NET MAUI. But in there you will find the
Microsoft.Maui.Controls.Maps. Make sure that you get the
nupkg and not the snupkg. And you also want to have
the Microsoft.Maui.Maps itself. Move that to a
folder. Follow that video on how to set up a separate NuGet
feed locally from a folder on your device. And you can
install the NuGet packages. So don't tell anyone, but this is how
you can get started with .NET MAUI Maps today. Now that you know that, I would definitely
encourage you to get started with this package, this early access package.
But do keep in mind this is very early preview bits,
right? This is just merged into the code base. But this allows you to get
started with it. It works with the current version of .NET MAUI,
at least currently. But remind if you are going to log bugs for this
on the repository, please come with high quality bug
reports. Do your best to tell us what is going on so
that we can fix this. And whenever you're reporting now, we
can make sure that you don't have to see that whenever net seven comes. And
we're actually launching the .NET MAUI maps, right? So you're doing yourself
a favor basically by making this more stable for when this
actually comes available. But keep in mind it has rough edges right now.
So just make sure to be nice, which is something
that you always should do in your Bug reports. But Gerald, you didn't
mention anything about Windows. Well, no, because for .NET MAUI we are
building on top of WinUI and WinUI doesn't have a map
control yet. So we've built something with a web view that
loads like Bing Maps. But we're not really sure if that's
something that we want to maintain or if we want to wait for when you want
to come up with something. So Windows is kind of in limbo right
now. It's not implemented. We're thinking about
maybe distributing it through the .NET MAUI Community Toolkit. So stay
tuned for the Windows support. And again, let me know down in the
comments if you are the person that is interested in the Windows version
so we can see if we can work with that. Basically, I hope this was
very beneficial to you this early look on maps. Let me know what you
think down in the comments. Let me know what you think, what feature of
the maps that you want me to zoom in on? So maybe you want to
see more about the polygons, the pins, custom pins, you name it. I
can make videos about all of that. Please net me know
then down in the comments about that as well. Don't forget to like this
video. If you've actually liked it, subscribe to my channel if you haven't
done so already. And check here for this playlist where there is more wonderful
.NET MAUI content. Maybe this video right here is very for you. And right
here you can have that button so that you can very easily
subscribe to my channel. See you for the next one.
