I was playing around with porting my Xamarin.Forms app over to .NET MAUI with the release of .NET 7 RC 1, which includes the Map control for MAUI. The app uses open data from my local municipality and shows the different parking zones around town. It also shows additional info like how long you can park and if you are allowed to park there at all. I posted a screenshot to Twitter with my progress, and I was asked if I can share how I created the outlined polygons that made up the parking zones on the map. So, here’s how I did it.
Upgrading to .NET 7
I won’t go into much detail on how I ported my app. I will mention that I had to upgrade my work-in-progress .NET MAUI project to .NET 7. The steps for how to do this is listed in the link I provided at the start, so I won’t go into detail on how to do that here. Link for the lazy.
Then I added a
Map control to my XAML page and gave it an
map. I also wanted the map to start at the location of my municipality, so I used the same code as in the example article and just replaced the coordinates in the
Parsing the data
The data set for the parking zones is stored as a GeoJSON file. I load the file from a URL and deserialize the result as a
FeatureCollection, which is the root object of a GeoJSON file.
using var httpClient = new HttpClient();
var stringResult = await httpClient.GetStringAsync(geoJsonUrl);
var jsonResult = JsonConvert.DeserializeObject<FeatureCollection>(stringResult);
Then I iterate over the resulting
Features list from the
jsonResult. Each feature in this case represents a parking zone. Each feature contains a list of coordinates, which makes up the “outline” of the parking zones if you were to draw lines between them.
foreach (var parkingZone in jsonResult.Features)
if (parkingZone.Geometry is not Polygon polygon) continue;
var points = polygon.Coordinates.First().Coordinates;
To represent these parking zones in the map, I create a
Polygon from the
Maui.Controls.Maps namespace. I start by setting the stroke width, the stroke color and the fill color. I want the parking zone to have a distinct “outline”, since these parking zones often are very close to one another and I want them to be distinguishable, so I set the fill color to be just a bit more transparent than the stroke color:
var mapPolygon = new Microsoft.Maui.Controls.Maps.Polygon
StrokeWidth = 8,
StrokeColor = Color.Parse("#1BA1E2"),
FillColor = Color.Parse("#881BA1E2"),
ClassId = parkingZone.Properties.ElementAt(4).Value.ToString()
I use the
ClassId property to handle click events on individual parking zones, but I won’t cover that in this post.
Now I iterate over the list of coordinates and add it to the
mapPolygon I just created:
foreach (var p in points)
mapPolygon.Geopath.Add(new Location(p.Latitude, p.Longitude));
Finally, I add the
mapPolygon to the
MapElements property of my
The complete code would look like this:
And that’s how it was done! Like I mentioned, I do have some functionality for when you click a parking zone as well, which will highlight the selected parking zone and show some additional info. If you want to know how I did this, feel free to reach out and I might make a follow-up on this.