Maui.Controls.BetterMaps

A more useful maps control for Android & iOS, ported from Xamarin.Forms.BetterMaps, which was based off of Xamarin.Forms.Maps.

Why?

Pretty much I just wanted custom pins, but I got a little carried away, see my blog post for more details. In summary,

  • Custom pins (including image, tint colour, anchor & z-index)
  • User location button
  • Compass button
  • Map themes (light & dark)
  • Tapped events
    • Map tapped
    • Pin tapped
    • Info window tapped
    • Info window long tapped

Setup

This is designed to be a simple drop in replacement for anyone using Xamarin.Forms.Maps. Care has also been taken to maximise performance, e.g. mapping the pins to their native views is tracked using dictionaries, instead of scanning through lists.

New Map Properties/Events

Property Description
MapTheme The current theme of the Map (either System, Light or Dark)
ShowUserLocationButton Display the button that allows user to centre map on their location
ShowCompass Display compass, which shows true north & allows user to reorient map
SelectedPin The currently focused pin
Event Description
SelectedPinChanged Fired when selected pin is changed
PinClicked Fired when user taps on a pin
InfoWindowClicked Fired when user taps the info window (visible when pin is selected)
InfoWindowLongClicked Fired when user long taps the info window (visible when pin is selected)

New Pin Properties

Property Description
TintColor Sets a tint colour for the pin, or image (if ImageSource is set)
Anchor The coordinates to anchor the pin (e.g. to centre pin on location (0.5, 0.5))
ImageSourceProperty Name of file image resource (i.e. custom pin image)
ZIndex The z-index of the pin
CanShowInfoWindow Whether the pin can display the info window when selected

Android

public override void OnCreate(Bundle savedInstanceState)
{
    ...    
    Maui.Controls.BetterMaps..Init(this, savedInstanceState);

    // Light/dark theme requires custom JSON style files (https://mapstyle.withgoogle.com/) added to 'Plaforms/Android/Assets'
    Maui.Controls.BetterMaps.SetLightThemeAsset("map.style.light.json");
    Maui.Controls.BetterMaps.SetDarkThemeAsset("map.style.dark.json");  
    ...
}

iOS

protected override MauiApp CreateMauiApp()
{
    ...
    Maui.Controls.BetterMaps.MauiBetterMaps.Init();    
    ...
}