Zooming and on map click not Working
See original GitHub issueHello,
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?
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (6 by maintainers)

Top Related StackOverflow Question
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.
Much has changed since this bug was reported, in Mapsui and in Xamarin. I will close it.