Forced to use paper maps because
.NET MAUI didn't have a Windows implementation of the maps control?
That changes now with the .NET MAUI Community Toolkit, which
provides a Windows Maps implementation. And... This is not even a
map! There is a little bit of a backstory
to the Maps Control, right? For example, with Xamarin.Forms, way back when, you had a Maps
Control which was ended on iOS, Android and Windows, because
that's how it works, right? For Xamarin. Forms and now for .NET MAUI,
everything gets mapped to however it should look and feel and work on that
platform. So for iOS you would get Apple Maps, for Android
you would get Google Maps and for Windows you would get Bing Maps. That's how it
works. But for .NET MAUI, we've swapped out UWP as a windows
back end for Win UI. And for UWP there was the maps control. But for Win UI,
there is no maps control. So this is kind of a problem, right?
The .NET MAUI team is not really in the business of creating
their own controls and maintaining those. We just map all the things to
whatever should work on the platform, right? So ideally,
the WinUI team should implement a Maps Control and
then we can finish the work there. But the ask for a Maps Control on iOS
and Android was so big and so loud that we had to make
the choice to implement it for iOS and Android, make that
available and not have anything for Windows. Until
today! We now have the .NET MAUI Community
Toolkit where we can implement something that is not as official, but we can
still help you out, right, as the community. So what we did is add the
Windows Maps Control in the .NET MAUI Community Toolkit and it
basically is a WebView that loads Bing Maps with the API key,
but it still has all the stuff. It works with the same API as the
actual Maps Control for iOS and Android. So you can still
add your pins at your things, at your polylines, all that kind of
stuff. And that will still work with the same API. You just need
to install an extra package. Is it ideal? Maybe not. But this will
help you out with implementing maps also on Windows. So let's go check out
how to get started. As with most of my videos, I created a
little sample project to show you how to get started. So here in Visual
Studio 2022, I created this project. You can find the code in
the GitHub link that is linked in the video description below. I do
that for all my videos, so you can find it there. And I've already
installed a NuGet package, but an update has been released minutes ago. It's
almost like I have released that package myself. And so let's
update the package. It's the exact same. If you want to
install it for the first time. Even if you've been working with .NET
MAUI Maps before, you need to install this package onto
your project to make it also work for Windows. So
let's go over to your project, right click Manage NuGet Packages.
And here we're going to well... I have it under Updates
here. The CommunityToolkit.Maui.Maps. You should be looking for it under the
Browse tab and search for CommunityToolkit.Maui.Maps, right? So you can find it here. At the time of recording, just
released, hot off the press, 1.0.2. So install that version. For me it's going to say Update, but
you can install that version. And whenever you do, I think the
README.txt comes up with a couple of instructions
as we do with the .NET MAUI Community Toolkit. And the important
part is here you want to use the UseCommunityToolkitMaps and then
you have to specify the Bing API key. So let's just copy this one. And I'm going to close this READM.txt
and also the NuGet Packages screen here. And I'm
going to go to my solution explorer and click on the MauiProgram.cs. And here in the Builder, if you're
using maps already, you have like UseMauiMaps. If you're not
using it yet, it will be installed as part
of this package as well because it has a dependency on
each other, right? So you should have this one in here and you can also
now add this UseMaui CommunityToolkitMaps. And you need
to add a key. I think you need to add a key for this one as well or set
it a little bit differently. For Android. I have another video on
the .NET MAUI Maps for iOS and Android. So I highly recommend
that you check that one out if you want to get started. That one. I'm
going to focus on this Windows one for now. So you have this key and to get
the key, let's hop over to our browser, which I have here. And
you can go to Bingmapsportal.com, log in with your Microsoft account and
you will figure out how to do that. You will get to a screen like this
one. And under my account you can go to my keys. And under my keys I
have a couple of them already, but you can create a new one and you
can create a key for the actual thing that you're going to use
here. So I'm just going to do show key here. You can see this one. Don't
bother. By the time that you are watching this, this
has been disabled. So don't bother typing it over from the screen. I'm just
going to use this one and go back to Visual Studio and I'm
going to copy that in here. If you forget, you will get an
exception. Like, hey boom, you need a Bing Maps key. Right, so you can't forget
because it won't work without it. Now, when we
have this, the next thing that you want to do is actually use the map again.
If you're already using the map in your project, nothing should be
changed, you can just use it as is. This should be all that you
need to do. But if you're going to implement the map for the
first time, let's see how to do it. And this works kind of like vice
versa. If you want to implement maps for iOS and Android, this should work the
same way as well because the API is the exact same. So let's go to our
main page, XAML and we just have the waving Netbot that we know and
love. So that's in here, but you want to add the map stuff in
here. So we want to do XML and S and I'm going to call it
Maps. You can make that whatever you want and search here for maps as
well. And I actually think that we shouldn't
do this maps handler, but you want to have the controls
maps. It's kind of funny that it doesn't
show in the IntelliSense. So make sure that you have these controls maps and
that's it. So now we can use this maps prefix to
actually reach our maps control. So let's remove all of this.
I'm just going to create a Maps map here and there we have it. So we have this Maps
map and here we can do all the things. I'm going to give it
an X name so I can reach it from my code behind. Of course, it
also has all kind of stuff for MVVM, my map. So we have this one and let's give it a little width and
height so that I know for sure that it will show up and hide the
Request 500. And if I run this now, we should
actually see the map in our Windows application already. So while
we're waiting for that, I'm going to show
you a little bit more. I'm also going to add markers and that kind of stuff.
So we're going to see that. And in my code behind, it now doesn't
know the counter button. So let me go to the main page code behind and
remove all the code that we have right here.
Because this was for the new project template and I removed a bunch of
example that it was referring to. So that's why this is happening,
removed all of that. And now we should actually see the
Windows application come up this time and we should see the map being initialized
now. Like I said, you should see a web view. It doesn't
really feel like a WebView, maybe a little bit, which
actually loads the Bing Maps API for you. And we will do all the heavy
lifting with JavaScript and that kind of stuff. So here we have the
maps. The default location is maui. Well, who would have thought maui.
Here we are, the island of Maui. You can see I can zoom by using the scroll
wheel on my mouse and I can move it around, right? By
just clicking and moving the actual map. And I can zoom in somewhere else and I
can do all of this. Now what's really cool, I think this
works with hot reload. So actually let's do the XAML Live preview. You know this existed, right?
The XAML live preview. You can see the actual live preview of your running
application. Let's pin that here and not the diagnostic tools. So let's pin
that here and zoom in a little bit so I can actually see the
screen side by side here. So you can see that
things are happening. And I can go over to my main page XAML and let's go
over some properties here. So let's do traffic information
which is cool, right? Is traffic enabled and let's set it to
True. So now we can see all the traffic information
and actually I need to switch over to the application because you don't see
it. You can see here in the top left slow and fast. So that is already
added because we now have some traffic information. Let's go to the
Netherlands and go to Amsterdam. It's always busy in Amsterdam. And you can see all this
traffic information coming up, right? So this also works on iOS and Android
and now also on Windows. So we have all this traffic
information. So what else do we got? We can say is zoom enabled. So whenever I set
this to false the zoom is enabled by default. I can now use
the scroll wheel but nothing is happening. See, I'm doing
it but nothing is happening. While it would zoom before, I can still move it
around. And if I also say like hey, what is the other one is scroll enabled and I set that to false
then it doesn't scroll anymore. So it's more like a static
map. I can now not move and I can now not zoom. And if I set zoom to
true again or just remove it because true is the default value
now you can zoom but you can't move it around. So you have tons of options
to actually work with this map. So there is a lot of cool stuff
going on here. Now you also notice that we didn't
really do any permission stuff. So if you
want to do is showing the user that's where the permission stuff comes in. I
think we request the permissions. But go check it out yourself and let
me know if that's not the case. If that's not the case, you have the
permissions APIs which is built into .NET MAUI and you can request them
yourself and all should be good to go. The other thing is the markers
and that kind of stuff, right? So let's see, go over to
our main page and let's add some markers right here. So
actually let me add a button in the example first. So I'm going to
make this a vertical stack layout and so that it
stacks vertically. Let's add a button here
with a text do things, I don't know,
something like that. And then for a clicked event, I want to have
this new event handler. Okay, so there we are.
Now in our UI, you can see I got this new button, do things and I
still have this map underneath it which reinitialized because it
reloaded the thing. But we have all of this. So button clicked
and now under the button clicked I can say my map pins add and I can add a new pin. So I can add
new pin. And this is a Microsoft.Maui.Controls.Maps.Pin
So this is already there, right? So let me make
this a little bit clearer. So that we can just do using Microsoft. Maui
controls maps. We have that in here and then we have
this pin that we can use. And then for the pin we have some properties, right? So let's see what
we have here. We have the address, you can put the address in here. What are the
important things? A label, a location that's very important. And
some other thing. A type is not really applicable to all the
platforms. I think with a type, notably on Android, it will show up a
little bit differently but otherwise don't really bother with it.
And so mostly the address, the label and the location there are
the important things. So let's start with the location. And it's actually
going to be a new location which is also a built in type for
this. Actually it's not this one. Oh,
latitude, longitude. There we go. So it's a
location for the map. So I don't know. Let's do 50, 6, which is
I know that is a coordinate on the map.
I'm not really sure where it is, but that should be it. And I think you
need to add a label as well else you will get an exception
that it can be added to the map. I think that's some requirement on a
platform. So let's do my well maybe subscribe to this channel from this location. I don't
know if the label should be that long, but maybe you want to subscribe to a
channel. And this is your sign, do it now. And we have the address,
let's put that in there as well. Address is my
location. Road 1337, something like that. So now
it's going to add this new pin and what we can
then also do is say myMap.MoveToRegion. So we can move to a region. We can kind of like
move the camera to this region. And here we have a MapSpan. Now you
can do a new map span obviously and do all
these things. But MapSpan also has a couple of extension methods
basically. So MapSpan I'm going to do use
Microsoft.Maui.Maps. It will add that here at the top so it
knows that this map span is a thing. And then I can say .FromCenterAnd Radius, which is really cool. So it's
going to create a MapSpan from a center, a location that I specify and
it's going to give a radius to determine kind of like the zoom factor
that it has to apply. And now I can just do new location. So let's
take the same one. Of course I should be reusing this
instance, but here we are, new location and what I'm going to do distance. And
again, distance has little helper methods. So we have
distance dot and here you can say from kilometers or between
positions or from miles. So you can have these different helper
methods to determine a distance that you want to show. Let's do from
kilometers and let's do ten. And now we have a little new
functionality that we can use here. So I'm going to save this.
Actually, I don't think this is picked up by Hot Reload.
So I changed a lot here. Let me just restart the application
just to be sure that everything is working here. And now the application is going
to come up, it's going to show Maui as an initial position. You can
definitely change that as well. But now when I click it, it should
move me to wherever 50, 6 is and then it's going
to show me that marker, right? It's going to add
that first and it's going to move it there. So here we are, subscribe to
this channel from this location. Apparently it's somewhere in
Luxembourg. Well, that's close ish, so that's cool. And you can have this marker. And if you click
it, you will show this info window. So we will have all this, you can see
the label, you can see the address right here and you can close
it again. This is all stuff that works just like all the other maps
implementations. Now you can do much more. You can add a clicked. So if I
do this pin, here we are. If I create this var p = new Pin and I add the pin like this. And I also have some things that I can do
with the pin, right. So I can say p.Clicked. I think I have a
couple of clicked events. So you can have that info window. So
that little bubble and the marker. So let's do MarkerClicked += and
it generates a little method for me and let's just do
something like display alert and I can do... DisplayAlert clicked, subscribe, because you still haven't done it yet. I can
see it, I can see it. You have to subscribe do it now. So
okay. And we can have this alert and the
same thing works whenever we click on the info window, right? So whenever
the little balloon pops up, you can also click on that balloon and
you can have some action trigger that from that balloon as well. So again,
that works the same way for iOS, for Android, and now also for Windows.
So let's just click this button and prove it to you.
If you click this marker, you will get this little alert and that is how
to implement Maps also for Windows. So this is a bit of a weird video
because this was already available on iOS and Android. So I'm not really
telling you anything new besides from the really cool fact that this is
now also available on Windows through the .NET MAUI Community
Toolkit. So let me know down in the comments below if you have any more questions.
Find the GitHub link in the video description. And of course, show me
all your cool projects which you're building, which can now have Windows
Maps as well. Don't forget to like and subscribe and I'll be seeing you
for the next video!
