Mapas en .NET MAUI
Esta publicación es parte del Calendario de Adviento .NET MAUI 2022, una iniciativa liderada por Héctor Pérez y Luis Beltrán. Revisa este enlace para conocer más artículos interesantes sobre .NET MAUI publicados por varios miembros de la comunidad.
Una de las características más esperadas por los desarrolladores de apps .NET MAUI era la de Mapas; finalmente, durante la .NET Conf 2022 (específicamente en la sesión State of .NET MAUI) se anunció que ¡ya podemos incorporar Mapas en nuestras apps .NET MAUI! ¡Vamos a darle un vistazo! (Por cierto, el código fuente de este proyecto está disponible en GitHub en este enlace).
1. Configuración inicial
El primer paso es crear una app de .NET MAUI con el target de .NET 7. Esta es la versión mínima requerida por el paquete Nuget Microsoft.Maui.Controls.Maps que es el que incorpora la funcionalidad de Mapas en .NET MAUI. Usaremos Visual Studio 2022.
Una vez listo generado el proyecto, vamos a agregar el paquete Nuget mencionado.
En MauiProgram.cs inicializa el paquete añadiendo el método UseMauiMaps() como parte de los métodos usados por el objeto builder dentro de la función CreateMauiApp.
| public static class MauiProgram | |
| { | |
| public static MauiApp CreateMauiApp() | |
| { | |
| var builder = MauiApp.CreateBuilder(); | |
| builder | |
| .UseMauiApp<App>() | |
| .ConfigureFonts(fonts => | |
| { | |
| fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); | |
| fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); | |
| }) | |
| .UseMauiMaps(); | |
| return builder.Build(); | |
| } | |
| } |
Se requiere configuración adicional en Android para poder usar los mapas nativos a través del paquete añadido. Además, si usaremos los servicios de geolocalización, será necesario agregar los permisos requeridos. ¡Hagámoslo!
2. Configuración en Android
La configuración se realiza sobre el manifiesto. Específicamente, hay que añadir:
- Una llave del API de Google Maps (ver aquí como generarla desde la consola de Google Cloud).
- El número de versión de los servicios de Google Play.
- Como además haremos uso de los servicios de localización, agregamos los permisos ACCESS_FINE_LOCATION y ACCESS_COARSE_LOCATION.
- Si la aplicación tiene por destino dispositivos con API 22 o inferior, deberás añadir también el permiso WRITE_EXTERNAL_STORAGE.
Así que en el archivo AndroidManifest.xml agregamos dichos elementos:
| <?xml version="1.0" encoding="utf-8"?> | |
| <manifest xmlns:android="http://schemas.android.com/apk/res/android"> | |
| <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"> | |
| <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR-API-KEY-GOES-HERE" /> | |
| <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> | |
| </application> | |
| <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> | |
| <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> | |
| <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> | |
| <uses-permission android:name="android.permission.INTERNET" /> | |
| </manifest> |
Esto sucederá cuando se solicite la ubicación actual del usuario por primera vez
3. Configuración en iOS
Como mencionamos anteriormente, no se requiere configuración adicional en iOS/Mac Catalyst para utilizar los mapas, pero como nuestra aplicación mostrará la ubicación del usuario, simplemente añadiremos los permisos requeridos en Info.plist, los cuales son NSLocationAlwaysAndWhenInUseUsageDescription y NSLocationWhenInUseUsageDescription. Añade las siguientes entradas en el archivo Info.plist
Esto sucederá cuando se solicite la ubicación actual del usuario por primera vez
4. Desarrolla tu app y muestra el mapa en alguna página
Lo único que queda es desplegar tu mapa en alguna página, eso se logra con 2 elementos:
- Importando el espacio de nombres y ensamblado Microsoft.Maui.Controls.Maps
- Usando el control Map
Observa el código completo de una vista que he implementado (MapView.xaml). Explicación de algunas líneas de código:
- La línea 5 importa el espacio de nombres y ensamblado Microsoft.Maui.Controls.Maps donde está el control Map.
- La línea 16 crea un mapa para ser mostrado en la página.
- La propiedad ItemsSource (línea 17) se asigna a una colección de objetos (Places) para usar sus propiedades y desplegar un Pin; se puede observar en las líneas 19-23 cómo se define un DataTemplate (dentro del ItemTemplate del mapa) donde establecemos las propiedades Location, Address y Label del Pin a mostrar en el mapa. Por supuesto, dichos datos corresponden a la ubicación actual del usuario (controlado por el comando GetLocationCommand asociado al botón).
A continuación te muestro el ViewModel (MapViewModel) asociado al BindingContext de la página anterior. Se expone la propiedad Places (para mostrar pines en el mapa) y el comando GetLocationCommand (para obtener la ubicación actual del dispositivo):
Como puedes observar, estoy haciendo uso del CommunityToolkit.Mvvm a fin de simplificar el código del ViewModel.
Vamos a probar nuestra aplicación en Android.
Y esta es la vista en iOS.
NOTA: Al dar clic en el botón no se mueve el mapa a la ubicación actual. Tendrás que hacer zoom o desplazarte manualmente a fin de poder ver el pin (eso podemos automatizarlo por medio de un Behavior).
Así se ve el pin en Android:
Y esta es la vista del pin en iOS:
Así pues, es muy sencillo comenzar con la implementación de Mapas en .NET MAUI (prácticamente es el mismo proceso que en Xamarin.Forms cuando usábamos el paquete Xamarin.Forms.Maps). En la próxima publicación veremos un uso más avanzado de Mapas para trazar la ruta entre dos puntos geográficos o dibujar áreas específicas. Y podemos checar lo del Behavior mencionado.
No olvides revisar el código fuente del proyecto para agregar otro código que es importante (como la definición del modelo Places, la inyección de dependencias en MauiProgram, la asignación del BindingContext en MapView.cs…)
Espero que esta publicación te haya sido de utilidad, no olvides compartirla en tus redes sociales, tal vez le sirva a alguien más =)
Recuerda seguir el resto de las interesantes publicaciones del Calendario de Adviento .NET MAUI 2022 generadas por varios miembros de la comunidad, quienes amablemente comparten sus conocimientos. También puedes seguir la conversación en Twitter con el hashtag #AdvientodotNETMAUI y en la Comunidad Xamarin / .NET MAUI en Español en Facebook.
¡Gracias por la visita y hasta la próxima!
Luis
