i’m new using MAUI. I’m developing an app using the built in Control Map.

The problem is: When the app load the first time, the map works fluent; but when i navigate to a route that is not in the Tab navigation the map movement get slow like laggy. I do not know why this happend.

Plus question. I’ve been using MVVM for college for 2 years, but now that i’m using MAUI. Is ok to use some code behind even if i have a ViewModel? Because a could not do markers binding commands and other stuff.

My MainView.xaml

 <maps:Map 
     x:Name="map"
     VerticalOptions="FillAndExpand"
     HorizontalOptions="FillAndExpand"
     MapType="Street"
     ItemsSource="{Binding Pins}"
     >
     <maps:Map.ItemTemplate>
         <DataTemplate>
             <maps:Pin 
                 Location="{Binding Location}"
                 Address="{Binding Address}"
                 Label="{Binding Label}"     
                 MarkerClicked="Pin_MarkerClicked"
                 >
               
             </maps:Pin>
             
         </DataTemplate>
     </maps:Map.ItemTemplate>
 </maps:Map>

MainView.xaml.cs

public partial class MainView : ContentPage
{
    private readonly MainViewModel ctx;
    private readonly IGeolocation geolocation;
    private readonly IPopupService popupService;

    public MainView(MainViewModel ctx, IGeolocation geolocation, IPopupService popupService)
    {
        InitializeComponent();
        this.ctx = ctx;
        this.geolocation = geolocation;
        this.popupService = popupService;
        BindingContext = ctx;

    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();


        //var geolocation = geolocation.GeolocationRequest(GeolocationAccuracy.High, TimeSpan.FromSeconds(10));
        //var location = await Geolocation.GetLocationAsync(geolocation);
        var location = await geolocation.GetLastKnownLocationAsync();
        if(location is null)
        {
            location = await geolocation.GetLocationAsync(new GeolocationRequest(GeolocationAccuracy.Medium, TimeSpan.FromSeconds(30))); 
        }

        if(location is not null)
        {
            map.MoveToRegion(MapSpan.FromCenterAndRadius(location, Distance.FromKilometers(1)));
        }

    }

    private async void Pin_MarkerClicked(object sender, Microsoft.Maui.Controls.Maps.PinClickedEventArgs e)
    {
        var pin = (Pin)sender;
        //var answer = await DisplayAlert("Detalles", $"Ver detalles de {pin.Label}", "Si", "No");
        var restroom = ctx.RestroomDTOs.FirstOrDefault(x => x.Name == pin.Label);
        if(restroom != null)
            ctx.SelectedRestroom = restroom;
        await this.ShowPopupAsync(new PinPopup(vm: ctx)
        {
            vm = ctx
        });

    }

}

This is my shell.xaml

<Shell
    x:Class="TuTronoMovil.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:TuTronoMovil.Views"
    xmlns:reviews="clr-namespace:TuTronoMovil.Views.Reviews"
    xmlns:local="clr-namespace:TuTronoMovil"
    xmlns:restrooms="clr-namespace:TuTronoMovil.Views.Restrooms"
    Shell.FlyoutBehavior="Disabled"
    Title="TuTronoMovil">

    <ShellContent Route="LoadingPage" ContentTemplate="{DataTemplate views:LoadingView}" />
    <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate views:LoginView}" />
    <ShellContent 
       Title="Detalles de baño"
       ContentTemplate="{DataTemplate restrooms:RestroomDetailsView}"
       Route="RestroomDetails"
/>
    <ShellContent
         Title="Crear reseña"
         ContentTemplate="{DataTemplate reviews:ReviewFormView}"
         Route="ReviewFormView"
    />
    <TabBar>
        <Tab  Title="Inicio" Icon="home.svg">
            <ShellContent
                Title="Inicio"
                ContentTemplate="{DataTemplate views:MainView}"
                Route="MainPage" />
        </Tab>
        <Tab Title="Crear baño" Icon="toilet.svg">
            <ShellContent 
                 Title="Crear baño"
                 ContentTemplate="{DataTemplate restrooms:RestroomFormView}"
                Route="RestroomFormView"
              />
          
        </Tab>
        <Tab Title="Configuracion" Icon="settings.svg">
            <ShellContent
                Title="Configuracion"
                ContentTemplate="{DataTemplate views:SettingsView}"
                Route="SettingsView" />
        </Tab>
     
    </TabBar> 

    

</Shell>