DEV Community

Cover image for Implementing Maps in .NET MAUI Apps
Janki Mehta
Janki Mehta

Posted on • Updated on

Implementing Maps in .NET MAUI Apps

Maps provide invaluable context and visualization in mobile apps. They allow marking nearby points of interest, tracking user location, displaying data visualized on a map, and more.

.NET MAUI provides several options for integrating maps into cross-platform apps built with C# and XAML. In this guide, we'll look at four options:

  • Xamarin.Essentials Map
  • Google Maps
  • Mapbox Maps
  • Custom Map Rendering

Xamarin.Essentials Map

The simplest way to add a map is using the Map control in Xamarin.Essentials. It provides a cross-platform API for displaying maps on iOS, Android and Windows.

To use it, install the Xamarin.Essentials NuGet package and import the namespace:

xmlns:xamarinessentials="clr-namespace:Xamarin.Essentials;assembly=Xamarin.Essentials"
Enter fullscreen mode Exit fullscreen mode

Then add the Map control to the page:

<xamarinessentials:Map x:Name="map" />
Enter fullscreen mode Exit fullscreen mode

In code, we can customize the map's initial properties:

map.MapType = MapType.Street;
map.IsShowingUser = true;
Enter fullscreen mode Exit fullscreen mode

This displays a street map focused on the user's location.

We can also add pins to mark points on the map:
var pin = new Pin {
  Label = "Empire State Building",
  Address = "20 W 34th St, New York, NY 10001",
  Type = PinType.Place
};

map.Pins.Add(pin);
Enter fullscreen mode Exit fullscreen mode

The Xamarin.Essentials map provides a simple API for common mapping tasks. But for more advanced features, a dedicated map SDK is recommended.

Google Maps

The Xamarin.Google.Maps package enables natively embedding Google Maps with access to the full Google Maps SDK on each platform.

Start by adding the NuGet package and your Google Maps API key to the app.

Then a map can be added to a page:

<maps:Map x:Name="map" />
Enter fullscreen mode Exit fullscreen mode

To display a specific location:

var center = new Position(37.4219983, -122.084);
map.MoveToRegion(MapSpan.FromCenterAndRadius(center, Distance.FromMiles(1)));
Enter fullscreen mode Exit fullscreen mode

Custom markers, polygons, ground overlays and utility layers can be added on top of the map.
For example, to mark a point:

var pin = new Marker() {
   Position = center,
   Title = "Googleplex"
};

map.Markers.Add(pin);
Enter fullscreen mode Exit fullscreen mode

Google Maps enables rich, localized map experiences on each platform.

Mapbox Maps

Mapbox provides customizable vector maps using Mapbox web services and SDKs.

After installing the Mapbox Maps SDK NuGet, a map can be declared:

<maps:Mapbox x:Name="map" />
Enter fullscreen mode Exit fullscreen mode

The map style and center position can be configured:

map.MapStyle = MapboxStyles.Dark;
map.Center = new Position(53.3381985, -6.2592576);
Enter fullscreen mode Exit fullscreen mode

Annotations like markers, polylines and images can be overlaid:

var marker = new Maps.Marker{
  Text = "Hello World!",
  Position = new Position(53.3381985, -6.2592576)
};

map.Annotations.Add(marker);
Enter fullscreen mode Exit fullscreen mode

Mapbox allows designing custom map styles and assets for branding your app's map experience.

Custom Map Rendering

For ultimate flexibility in look and behavior, you can directly render maps using the .NET MAUI graphics APIs.

This involves:

  • Downloading map tile images from a provider like OpenStreetMap
  • Caching the images locally
  • Drawing map tiles on a SkiaSharp SKCanvasView For example:
// Lookup tile coordinates
var x = (int)Math.Floor(lon2tile(longitude, zoom)); 
var y = (int)Math.Floor(lat2tile(latitude, zoom));

// Load image for tile
var image = GetTileImage(x, y, zoom); 

// Draw tile
canvas.DrawBitmap(image, x * 256, y * 256);
Enter fullscreen mode Exit fullscreen mode

Custom overlays like pins, shapes, and annotations can be rendered on top of the map tiles.

This allows for the ultimate flexibility in map design and behavior at the cost of increased implementation work.

Summary

There are several great options for adding maps in .NET MAUI apps:

  • Use Xamarin.Essentials for simple map display
  • Leverage Google Maps or Mapbox for rich, hosted maps
  • Build custom rendered maps for unlimited control Maps provide important context and visualization in mobile apps. With .NET MAUI's mapping options, you can build immersive location-based experiences on any platform.

Top comments (0)