Mapsui
Zooming and on map click not Working
Hello,
i have a xaml page in Forms with an AbsolutLayout. In this I have two StackLayouts. One is the master, who is shown all the Time, the other in get hide by TranslationY. In the master one i have a map and a button for showing the other stack Layout. In the other Stack are some buttons and labels and a 250px high map. If i bring the second StackLayout to the front, i can zoom normaly in the map and could click on the map. But sometimes after zooming by finger the map clicking and zooming is not working anymore. With the integrated zoom buttons it works then, but not clicking on the map. Workaround ist so close the app and start again. Then it work some seconds and the i have the same behavior.
XAML-Code
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="MainView">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">
<mapsui:MapView x:Name="MapBig" Margin="0,0,0,-5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" BackgroundColor="Gray" RotationLock="True" IsMyLocationButtonVisible="False" IsNorthingButtonVisible="False" IsZoomButtonVisible="False" PinClicked="MapBig_PinClicked" />
<Frame HeightRequest="200" Margin="0,0,0,-90" VerticalOptions="End">
<Grid VerticalOptions="Start" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="UserButton" Text="Benutzer" Grid.Column="1" TextColor="DarkGreen" ContentLayout="Top,10" ImageSource="UserIcon" BackgroundColor="Transparent" Clicked="UserButton_Clicked" />
<Button x:Name="AddObjectButton" Text="+" Grid.Column="2" BorderWidth="2" BorderColor="DarkGreen" CornerRadius="40" BackgroundColor="DarkGreen" TextColor="White" FontSize="50" FontAttributes="Bold" Clicked="AddObjectButton_Clicked"/>
<Button x:Name="LogbookButton" Text="Logbuch" ContentLayout="Top,10" TextColor="DarkGreen" ImageSource="NotebookIcon" Grid.Column="3" BackgroundColor="Transparent" Clicked="LogbookButton_Clicked"/>
</Grid>
</Frame>
</StackLayout>
<!-- PanelUpSendObject-->
<StackLayout x:Name="PanelUpSendObject" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0" BackgroundColor="Transparent" >
<ScrollView x:Name="PanelUpSendObjectScrollView" VerticalOptions="FillAndExpand" BackgroundColor="Transparent">
<Frame VerticalOptions="FillAndExpand" Margin="10" CornerRadius="15" Padding="0" IsClippedToBounds="True" >
<StackLayout VerticalOptions="FillAndExpand">
<Grid HeightRequest="400">
<Image x:Name="DescriptionPicture" Source="AddImageColorGardient" VerticalOptions="FillAndExpand" BackgroundColor="Gray" Aspect="Fill" />
<Grid VerticalOptions="End" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Label HeightRequest="20" x:Name="PlaceLabel" Text="Hier steht der Ort" LineBreakMode="NoWrap" HorizontalOptions="FillAndExpand" VerticalOptions="Center" TextColor="White" FontSize="20" FontAttributes="Bold" Grid.Column="0"/>
<Button x:Name="TakePhotoButton" HorizontalOptions="End" BackgroundColor="White" ImageSource="TakePhotoIcon" HeightRequest="40" WidthRequest="40" BorderRadius="20" BorderColor="White" BorderWidth="2" TextColor="White" Grid.Column="1" Clicked="TakePhotoButton_Tapped" />
</Grid>
</Grid>
<Editor x:Name="NoticeEditor" Margin="10,0,10,10" Placeholder="Notiz hinzufügen..." AutoSize="TextChanges" MaxLength="500" />
<Label x:Name="PositionLabel" Text="Position" FontSize="14" TextColor="DarkGreen" Margin="10,0,0,0"/>
<AbsoluteLayout HeightRequest="250" Margin="10,0,10,10" >
<mapsui:MapView x:Name="MapSmall" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HeightRequest="250" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" IsMyLocationButtonVisible="False" IsNorthingButtonVisible="False" IsZoomButtonVisible="True" MapClicked="MapSmall_MapClicked"/>
<Button x:Name="SmallMapProp" Margin="20" ImageSource="refresh" AbsoluteLayout.LayoutBounds="0,1,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="White" WidthRequest="40" HeightRequest="40" CornerRadius="20" Clicked="SmallMapProp_Clicked"/>
</AbsoluteLayout>
</StackLayout>
</Frame>
</ScrollView>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Init Map
async public void InitMap(Mapsui.UI.Forms.MapView mapView, Position position, bool onlyView, int resolution, Label placeTitle, string objID, string placeName, string objTyp, string pictureName, bool isManual, bool setCallout, bool getAuthority, Label AuthorityLabel = null, Label DistrictLabel = null, Editor NeigborDistrictEditor = null, Label LongitudeLabel = null, Label LatiudeLabel = null)
{
var pos = new Mapsui.UI.Forms.Position(position.Latitude, position.Longitude);
var pospoint = SphericalMercator.FromLonLat(position.Longitude, position.Latitude);
placeTitle.Text = await GetPlacemark(position.Latitude, position.Longitude);
Mapsui.Map map = new Mapsui.Map();
//Clear Maps
map.Layers.Clear();
//Init
map.RotationLock = true;
map.Layers.Add(OpenStreetMap.CreateTileLayer());
map.Home = n => n.NavigateTo(pospoint, map.Resolutions[resolution]);
mapView.Map = map;
//PinHandling -> Set Pins with icon
PinHandling(mapView, onlyView, pos, objID, placeName, objTyp, pictureName, isManual, setCallout);
}
Did i something wrong or is this an issue?
This one is working nice, main difference is that mapview and frame are positionned with absolute positions, in code I use .IsVisible and .IsEnabled to show/hide the frame
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mapsui="clr-namespace:Mapsui.UI.Forms;assembly=Mapsui.UI.Forms"
NavigationPage.HasNavigationBar="false"
Title="RoadBook"
WidthRequest="1024"
HeightRequest="800"
x:Class="RoadBookXF.MainPage">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Entry x:Name="AdressSearchEntry"
Completed="SearchTextCompleted"
Placeholder="Entrez une adresse ici "
PlaceholderColor="Olive"
HorizontalOptions="FillAndExpand"/>
</StackLayout>
<AbsoluteLayout x:Name="MainPageAbsoluteLayoutReference"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill">
<mapsui:MapView x:Name="MapsuiView"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
BackgroundColor="Gray" />
<Frame
x:Name="PopUpFrameElement"
AbsoluteLayout.LayoutBounds="0.5,0.5,0.2,0.2"
AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Padding="0"
BackgroundColor="White"
BorderColor="Blue"
CornerRadius="20"
IsVisible="False"
IsEnabled="False">
<AbsoluteLayout
x:Name="PopUpAbsoluteLayout"
BackgroundColor="White">
<Label Text="PopUpAbsoluteLayout"
x:Name="PopUpLLabel"
FontSize="Micro"
AbsoluteLayout.LayoutBounds="0,0,1,0.6"
AbsoluteLayout.LayoutFlags="All"
TextColor="Blue"
BackgroundColor="White"/>
<ImageButton
x:Name="PopUpIImageButton"
AbsoluteLayout.LayoutBounds="0,1,1,0.4"
AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="Center"
/>
</AbsoluteLayout>
</Frame>
</AbsoluteLayout>
</StackLayout>
</ContentPage>
After first start of the app it works a few seconds, but then you can see the small map freezes after some time. In the big map in background it worked all time. I have no idea whats the problem. Could the ScrollView has an effect?
https://user-images.githubusercontent.com/77233082/104363103-00248680-5515-11eb-8c0b-7c829fcd5632.mp4
I saw that #898 is the same problem. But at the moment i have no idea how to handle it. Zooming over the buttons is a workaround but onclick on the map it should change the position to the click. Any ideas how to handle it?
In a previous version of my app i used the xamarin mapkit with apple and google maps, in this case zooming and click hat worked with my scrollView.
We have same issue - so map freeze. In our case we disable Pan and Rotation. We tried to update Skia to latest version in project etc., but issue is still present. It's easy to reproduce it by using 3 fingers on map, then map is completely frozen.
@Billaehbong Thanks for the movie. I guess you problem could be related to having two maps. This is something we do not test in our samples.
@jmielczarkowski Do you have a similar setup, with two maps? I can not reproduce this behavior in the samples using 3 fingers. When else is needed to reproduce it?
@pauldendulk my first map is fix on the start screen. if i click on the + button the i took a stack layout with a scroll view to the front. Now i have tried it without this scroll view and there it works perfectly. So it think the problem is the scroll view where the second map is inside. In #898 is a similar problem but this is fixed if i saw it correct?
Sounds like a tricky problem. This is not something I personally want to spend time on. Perhaps it is possible to reproduce this is in a simpler setting. Perhaps without a Mapsui dependency.
The problem is described here. You could not place a SkiaSharp SKGLView in a ScrollView. If you do this, the scroll view takes all touch events. So they won't work in Mapsui. Another thing are taps, which work. That's the reason, why the buttons work.
So, then should this issue be closed as a known limitation of 'SkiaSharp SKGLView in ScrollView'?
@charlenni if I could use the tap it would be a working workaround for me. But this only works if there is no gesture to map for this I must disable zooming, but then I couldn’t use the zoom buttons.
So what I want is zoom with the buttons and the functionality of tapping on the map. How could I handle this, any idea?
@pauldendulk from my side the issue could closed with the knowing of the limitation.
Much has changed since this bug was reported, in Mapsui and in Xamarin. I will close it.