{"id":45315,"date":"2023-04-25T09:30:00","date_gmt":"2023-04-25T16:30:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=45315"},"modified":"2023-04-25T09:09:10","modified_gmt":"2023-04-25T16:09:10","slug":"drawing-on-maps-with-dotnet-maui","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/drawing-on-maps-with-dotnet-maui\/","title":{"rendered":"Drawing Elements on Maps with .NET MAUI"},"content":{"rendered":"

Did you know that .NET MAUI<\/a> features a full Map<\/code> control for iOS, Android, and MacCatalyst apps? It came with the launch of .NET 7 and it allows you to not only display a map with pins, but it also allows for full drawing with polygons, polylines, and circles! Lets take a look today at the Map<\/code> control, how to display pins, and how to draw outlines and walking paths on the Microsoft campus in Redmond!<\/p>\n

\"Multiple <\/p>\n

Pins on a Map<\/h2>\n

The Map<\/code><\/a> controls in .NET MAUI offers a wide arrange of customization of how to display the map. One of the basic elements that people place on a map is a Pin<\/code><\/a> that displays a marker with text. The Pins<\/code> property on the Map<\/code> control is an IList<\/code> that we can populate dynamically to put as many pins on the map. This can be accomplished in XAML:<\/p>\n

<ContentPage ...\r\n             xmlns:maps=\"clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps\"\r\n             xmlns:sensors=\"clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials\">\r\n    <maps:Map x:Name=\"map\">\r\n        <x:Arguments>\r\n            <MapSpan>\r\n                <x:Arguments>\r\n                    ...\r\n                <\/x:Arguments>\r\n            <\/MapSpan>\r\n        <\/x:Arguments>\r\n        <maps:Map.Pins>\r\n            <maps:Pin Label=\"Santa Cruz\"\r\n                      Address=\"The city with a boardwalk\"\r\n                      Type=\"Place\">\r\n                <maps:Pin.Location>\r\n                    <sensors:Location>\r\n                        <x:Arguments>\r\n                            <x:Double>36.9628066<\/x:Double>\r\n                            <x:Double>-122.0194722<\/x:Double>\r\n                        <\/x:Arguments>\r\n                    <\/sensors:Location>\r\n                <\/maps:Pin.Location>\r\n            <\/maps:Pin>\r\n        <\/maps:Map.Pins>\r\n    <\/maps:Map>\r\n<\/ContentPage><\/code><\/pre>\n
You can specify the pins directly in the XAML or you can use data binding to a list of Pin<\/code> using the ItemsSource<\/code> property similar to a ListView<\/code> or CollectionView<\/code>.<\/p>\n
You can also do this directly in C# code:<\/p>\n
using Microsoft.Maui.Controls.Maps;\r\nusing Microsoft.Maui.Maps;\r\n\r\n\/\/...\r\n\r\nvar pin = new Pin\r\n{\r\n  Label = \"Santa Cruz\",\r\n  Address = \"The city with a boardwalk\",\r\n  Type = PinType.Place,\r\n  Location = new Location(36.9628066, -122.0194722)\r\n};\r\n\r\nmap.Pins.Add(pin);<\/code><\/pre>\n
\"A<\/p>\n
Better yet, you can add events to the Pin<\/code> to see when it was clicked or when the info window was clicked with the MarkerClicked<\/code> and InfoWindowClicked<\/code> events on the Pin<\/code>.<\/p>\n
Drawing Elements on a Map<\/h2>\n
Now, let’s get into some fun and actually draw some lines and polygons on a map! The MapElements<\/code> property on a Map<\/code> takes in a list of MapElement<\/code><\/a> that can be drawn on the map. Built into .NET MAUI are three elements:<\/p>\n